Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „CSS-Problem - wo liegt der Haken?“

besito

Nicht mehr ganz neu hier

Hi, könnt Ihr mir vielleicht helfen?
ich verzweifle grad an einem CSS-Rätsel und kanns nicht lösen :uhm:

ich hab ein 2Spalten-Layout, in der linken 2 Boxen untereinander, in der rechten mehrere DIVs
wenn ich den Boxen in der linken Spalte Höhenwerte (height: ..px) gebe, sitzt der 2. DIV-Kasten in der rechten Spalte bündig mit der Unterkante der 2 Box links
wieso?

Screenshot


HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <link href="css_test.css" rel="stylesheet" type="text/css"/>
    </head>

    <body>
    
    <div id="content">    
    <div id="cont_left"> 
    <div class="shoutbox" id="box_top">
        <p>obere Box</p>
    </div>
        
    <div class="shoutbox" id="box_down">
        <p>untere Box</p>
    </div>
        
    </div> 
    
    <div id="cont_right"> 
        <div class="fotocontainer2">
        <div class="foto"><img src="testbild.png" alt=""/></div>
        <div class="person2"><h2>Name</h2></div>
        <div class="ie_clearing">&nbsp;</div>
        </div>
        <div class="fotocontainer2">
        <div class="foto"><img src="testbild.png" alt=""/></div>
        <div class="person2"><h2>Name</h2></div>
        <div class="ie_clearing">&nbsp;</div>
        </div>
        <div class="fotocontainer2">
        <div class="foto"><img src="testbild.png" alt=""/></div>
        <div class="person2"><h2>Name</h2></div>
        <div class="ie_clearing">&nbsp;</div>
        </div>
    </div>
    
    <div class="ie_clearing">&nbsp;</div>
    </div>
    
</body>

</html>
CSS
Code:
* { padding: 0; margin: 0; }
.ie_clearing {clear: both;}

#content {position: relative; }
#cont_left { float: left; width: 200px; }
#cont_right { margin-left: 237px; position: relative; }

.shoutbox { width: 170px; }
#box_top {height: 140px; }
#box_down {height: 160px; }

.foto {float: left; width: 200px;}
.person2 {margin-left: 200px; }
 

DavidCaspar

Webdesigner

AW: CSS-Problem - wo liegt der Haken?

Weil du vieleicht mit Position:relative arbeitest? änder das mal, vielleicht hilfts.

Außerdem fehlt glaub ich ein geschloßenes </div> tag bei dir im genannten quelltext: "content"
 
Zuletzt bearbeitet:

besito

Nicht mehr ganz neu hier

AW: CSS-Problem - wo liegt der Haken?

hmm nee, leider nich
habs grad noch mal gecheckt
und eigentlich hatte ich das nur reingenommen in der Hoffnung, es würde helfen, weil mir noch dunkel im Hinterkopf rumgeisterte, dass man das fürs floaten braucht?
war aber glaub ich Quatsch
egal: ob mit oder ohne - der Abstand bleibt stur ;-)
 

DavidCaspar

Webdesigner

AW: CSS-Problem - wo liegt der Haken?

NOch nen tipp wie du es eventuell rausfinden kannst:

Installier das FIrefox Plugin "Webdeveloper Toolbar" für dein FIrefox.

Dann gehe auf "Outline" und wähle "online Block level elements" aus oder "outline current element" das hilft fast immer :)
 

besito

Nicht mehr ganz neu hier

AW: CSS-Problem - wo liegt der Haken?

alle DIVs durchgezählt - fehlt nix :eek:)
hätte ja beim kürzen was wegkommen können
ich habs auch im Webdevelopper durchgeprüft und bin nicht weitergekommen

da siehts übrigens so aus:
 

besito

Nicht mehr ganz neu hier

AW: CSS-Problem - wo liegt der Haken?

ach so:
wenn ich dem obersten DIV rechts eine feste Höhe gebe, funktionierts
aber das ist ja eigentlich nicht Sinn und Zweck der Sache
 

Jooohny

Gesperrt

AW: CSS-Problem - wo liegt der Haken?

Hi bin jetzt zu faul mir deinen Queltext anzuschauen
denke aber



das dir das hilft wen du den boxen die du entweder rechts oder link´s rein machst den wert margin top:zb10px gipst halten die immer zu der oberen box einen 10px apstant und bei dem teil verzieht sich dann auch so nix mehr

gruß:Jooohny
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.156
Beiträge
2.581.859
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben