Verschachtelte div-Bereiche (Firefox)

[suicide]

Also ich habe folgenden HTML-Code:

<div class="rahmen">
 <div class="banner">
 </div>

<div class="header">
 </div>

<div class="header">
 </div>

<div class="header">
 </div>

<div class="body">
 </div>

<div class="body">
 </div>

<div class="body">
 </div>
</div>

Und dazu folgende CSS-Datei:

div.rahmen {
 width: 800px;
 margin: auto;
 border: 1px solid
}

div.banner {
 width: 100%;
 height: 150px
}

div.header {
 width: 258px;
 height: 30px;
 float: left;
 margin-top: 5px;
 margin-left: 5px;
 border: 1px solid
}

div.body {
 width: 258px;
 float: left;
 margin-left: 5px;
 margin-bottom: 5px;
 border-left: 1px solid;
 border-right: 1px solid;
 border-bottom: 1px solid
}

Mein Problem ist jetzt, das sich der Rahmen nicht um alle div-Tags setzt sondern NUR um den Banner. Wie kann das sein?
Im Internet Explorer funzt das übrigens einwandfrei!

[Cheatah]

Hi,

Mein Problem ist jetzt, das sich der Rahmen nicht um alle div-Tags setzt sondern NUR um den Banner. Wie kann das sein?

ganz einfach: Du hast das Floating und die Berechnung von width:auto nicht verstanden.

Im Internet Explorer funzt das übrigens einwandfrei!

Nein, tut es nicht.

Cheatah

[suicide]

ganz einfach: Du hast das Floating und die Berechnung von width:auto nicht verstanden.

Dann erklär's mir bitte :D

Im Internet Explorer funzt das übrigens einwandfrei!

Nein, tut es nicht.

Nun ja also im IExplorer funzt margin: auto; nicht aber bei ihm umschließt der Rahmen wenigstens den Rest!

[Cheatah]

Hi,

ganz einfach: Du hast das Floating und die Berechnung von width:auto nicht verstanden.
Dann erklär's mir bitte :D

schon wieder? Ich hab' das schon mehrmals erklärt, steht alles im </archiv/>.

Im Internet Explorer funzt das übrigens einwandfrei!
Nein, tut es nicht.
Nun ja also im IExplorer funzt margin: auto; nicht aber bei ihm umschließt der Rahmen wenigstens den Rest!

Erstens tut es das nicht, weil es nicht "funzt", sondern höchstens funktioniert; und zweites nicht, weil das Verhalten des IE hier falsch ist, wie so oft. "Es sieht aus wie gewünscht" hat *nichts* mit "es ist richtig" zu tun - ganz besonders nicht, wenn es um den IE geht.

Cheatah

[suicide]

Ja danke ich werd mich wohl mal schlaumachen.

Und Sorry ich wollt damit nicht sagen, das der IE toll oder sowas ist im Gegenteil! Der IE ist der größte Schrott-Browser von Welt.
Ich wollte mit der Zusatz Info eher sagen, das der IE es komischerweise so interpretiert, wie ich es haben will.

[suicide]

Ok ich hab das Prinzip jetzt verstanden mit den gefloateten Elementen nicht mehr so da drin usw...
Aber ich find ehrlich gesagt immernoch keine Lösung. Ich könnte natürlich den Rahmen jetzt auch floaten. Aber dann funktioniert natürlich margin: auto nicht mehr.
Ich hab also jetzt das Problem das ganze mittig auszurichten.

[Detlef G.]

Hallo suicide

Aber ich find ehrlich gesagt immernoch keine Lösung. Ich könnte natürlich den Rahmen jetzt auch floaten.

Oder clear (Fortsetzung bei Textumfluss) lesen, verstehen und richtig anwenden.

Auf Wiederlesen
Detlef

[luiggi]

Mittig ausrichten:
box{ position:absolute; top:50%; left:50%; width:800px; height:550px; margin-top:-275px; margin-left: -400px; }

Wobei das minus margin left jeweils die Hälfte von der Breite sein muss.

Stefan

[wahsaga]

hi,

Mittig ausrichten:
box{ position:absolute; top:50%; left:50%; width:800px; height:550px; margin-top:-275px; margin-left: -400px; }

Wobei das minus margin left jeweils die Hälfte von der Breite sein muss.

• und den inhalt bei kleinerem browserfenster teilweise außerhalb dessen positioniert, und somit unnuztbar macht.

gruß,
wahsaga

[Alexander Brock]

Hallo Selbstmord,

div.rahmen {
width: 800px;
margin: auto;
border: 1px solid
}
Mein Problem ist jetzt, das sich der Rahmen nicht um alle div-Tags setzt sondern NUR um den Banner. Wie kann das sein?

Das liegt an dem fehlenden Semikolon nach "solid".
Deshalb wird der Rest der CSS-Angaben ignoriert.

Im Internet Explorer funzt das übrigens einwandfrei!

Weil dieser nicht die Standards einhält, sondern irgendwie
versucht, jeden Schrott zu interpretieren.

Gruß
Alexander Brock

[suicide]

Das liegt an dem fehlenden Semikolon nach "solid".
Deshalb wird der Rest der CSS-Angaben ignoriert.

Nein daran liegt es leider nicht. Ich hab es zwar jetzt geädert aber vor der }-Klammer braucht man soweit ich weiß eh kein Semikolon mehr.

[Cheatah]

Hi,

vor der }-Klammer braucht man soweit ich weiß eh kein Semikolon mehr.

richtig, allerdings sollte man es sich trotzdem angewöhnen. Es erhöht die Les- und Wartbarkeit des Codes.

Cheatah

[Alexander Brock]

Hallo Cheatah,

vor der }-Klammer braucht man soweit ich weiß eh kein Semikolon mehr.

richtig,

Oh, da hab ich was verwechselt.

allerdings sollte man es sich trotzdem angewöhnen. Es erhöht die Les- und Wartbarkeit des Codes.

Außerdem verringert es die Fehleranfälligkeit, wenn man z.B. später noch Code hinzufügt.

Gruß
Alexander Brock

[Cyx23]

Hallo,

... aber vor der }-Klammer braucht man soweit ich weiß eh kein Semikolon mehr.

wenn du es doch setzt beugst du nicht nur Flüchtigkeitsfehlern bei späterer Codeänderung vor. Du verringerst zudem grundsätzlich die Auswirkungen und Parsingfehler wenn ein Browser mit einer vorherigen Anweisung Probleme hatte.

Grüsse

Cyx23