✔ CSS Layoutproblem

Status
Nicht offen für weitere Antworten.
D

<desty>

Erfahrenes Mitglied
[erledigt] CSS Layoutproblem

Hallo Leute!

Ich mach für einen Freund ne Seite für seine Fahrschule und habe diverse Probleme beim CSS Layout.

Aber erstmal der Link zur Page:

http://home.arcor.de/desty333/ralle2/test.html


so, wie ihr seht habe ich für das Banner ober eine einzelne CSS Box genutzt und darunter die sogenannte "Mainbox" eingefügt. Innerhalb der Mainbox sollten dann eigentlich die beiden kleinen Boxen "left" und "right" liegen - Tun sie meiner Meinung nach auch.


Wenn ich mir das Teil dann allerdings im Browser angugg, wird mir die Mainbox garnicht dargestellt (habe den hintergrund der Box testweise auf Schwarz gesetzt).


Hat jemand ein paar Tips für mich? Bin blutiger Anfänger und verzweifel echt bald :(



Vielen Dank im Voraus!

mfg
desty
 
Zuletzt bearbeitet:
Erweitere das Stylesheet mal mit folgender CSS-Regel:

Code: 
div.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
line-height: 0;
font-size: 0;
}
Und füge im HTML-Quelltext nach den floatenden DIVs das DIV .clear ein:

HTML: 
<div id="mainbox">
    <div id="left">...</div>
    <div id="right">...</div>

    <div class="clear">&nbsp;</div>
</div>
 
hm? funktioniert...


was genau hat denn das jetzt bewirkt? versteh den Sinn überhaupt nicht.



Vielen dank schonmal bis hierhin!
 
Nach den floatenden DIVs muß mit der clear-Eigenschaft im Dokument wieder der normale Textfluss hergestellt werden.

Alle weiteren auf null gesetzten Eigenschaften dienen dazu, daß das Element keinen Absatz erzeugt und ggfs. das Layout ausdehnt / verschiebt.
 
ahso ok alles klar :-)

1000 Dank!

hab die Seite jetzt mal neu hochgeladen. Ein Problem ist da nämlich noch!

Die "left-Box" sowie die "right-Box" docken nicht ganz an den oberen rand der "mainbox" an. woran liegt das? habe doch überall Padding:0px ..


css is mal echt voll verwirrend irgendwie :(
 
oh man.. manchmal seh ich den wald vor lauter Bäumen nicht ;)

gut hast mir viel geholfen!



schönen Abend noch :-)
 
Mir ist eben aufgefallen, daß das Layout im IE überhaupt nicht zentriert ist, was an der fehlenden Dokumenttyp-Deklaration liegt.

Mit einem dieser Doctypes richtet der IE das Layout in der Seitenmitte aus:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<!-- oder -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
Der Doctype wird zu Beginn des HTML-Quelltextes notiert:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>
Zudem hast du für das DIV #left die Pixel-Einheit bei der Breitenangabe vergessen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück