verschachtelte divs...

[selma]

hallo!

also ich habe folgendes problem: ich erstelle eine webseite nun auf reiner css basis. nun spielt mozilla nicht mit, und ich weiß nicht, was los ist.

nun denn, ich habe ein div, welches #frame heißt, dann eines das heißt #picture und dann noch eines, das heißt #right. die verschachtelung sieht nun folgendermaßen aus:

<div id="frame">
 <div id="picture">
  <!-- bild -->
 </div>
 <div id="right">
  <!-- sub navi -->
 </div>
</div>

ansich glaub ich, ist da noch nichts falsch. nun das eigentliche problem:

die einzelnen css- angaben dazu sehen so aus:

#frame {
margin-left:auto;
margin-right:auto;
margin-top:2em;
width:46em;
z-index:1;
border-style:solid;
border-width:1px;
border-color:#000000;
}
#right {
margin-top:3em;
margin-left:1em;
margin-left:1em;
padding-left:0.5em;
padding-right:0.5em;
height:10em;
z-index:1;
float:left;
width:8em;
border-style:solid;
border-width:1px;
border-color:E4E4E4;
}
#picture {
margin-top:1em;
margin-bottom:1em;
margin-left:1em;
width:33em;
left:1em;
height:7em;
z-index:1;
float:left;
border-style:solid;
border-width:1px;
border-color:#E4E4E4;
}

komischerweise macht mozilla dann kein frame mehr. soll heißen, der container #frame ist dann nur mehr ca. 1px hoch. was kann ich machen, dass nun der rahmen von #frame erhalten bleibt? mit einer bestimmten (absoluten) höhe ist es nicht unbedingt sinnvoll, da ich alles noch mit inhalten füllen werde bzw. muss sich der rahmen ausdehnen (können). und ich möchte ihm nicht auf jeder seite ein neues 'height' attribut geben.

ich hoffe, ihr versteht, was ich meine.
was kann ich dagegen tun, dass das frame wieder 'groß' wird?

mlg
selma

p.s. danke für eure antworten im voraus

[Cheatah]

Hi,

nun spielt mozilla nicht mit, und ich weiß nicht, was los ist.

wenn Mozilla nicht mitspielt, hast Du in annähernd 100% aller Fälle etwas falsch gemacht.

ansich glaub ich, ist da noch nichts falsch.

Doch: "Recht" heißt auf englisch "law", nicht "right". Und das Recht wirst Du vermutlich meinen, denn ganz sicher hast Du keinen Bezeichner aufgrund der derzeit gewünschten Darstellung gewählt.

#right {
float:left;
}
#picture {
float:left;
}

komischerweise macht mozilla dann kein frame mehr. soll heißen, der container #frame ist dann nur mehr ca. 1px hoch.

Genau 0 Pixel hoch. Kein Wunder, es ist ja auch kein Inhalt da, der die Berechnung von height:auto betreffen würde, sondern nur gefloatete Elemente - und das <div id="frame"> selbst ist nicht gefloatet. Das Verhalten von Mozilla ist, im Gegensatz zu jedem Browser(?), der sich anders verhält, vollkommen richtig.

Cheatah

[MudGuard]

Hi,

Doch: "Recht" heißt auf englisch "law", nicht "right".

You have no right to say that! ;-)

http://dict.leo.org/?search=Recht&searchLoc=0&relink=on&spellToler=standard&sectHdr=on&tableBorder=1&cmpType=relaxed&lang=en

cu,
Andreas

[Axel Richter]

Hallo,

nun denn, ich habe ein div, welches #frame heißt, dann eines das heißt #picture und dann noch eines, das heißt #right. die verschachtelung sieht nun folgendermaßen aus:
ansich glaub ich, ist da noch nichts falsch. nun das eigentliche problem:

die einzelnen css- angaben dazu sehen so aus:

#frame {
margin-left:auto;
margin-right:auto;
margin-top:2em;
width:46em;
z-index:1;
border-style:solid;
border-width:1px;
border-color:#000000;
}
#right {
margin-top:3em;
margin-left:1em;
margin-left:1em;
padding-left:0.5em;
padding-right:0.5em;
height:10em;
z-index:1;
float:left;
width:8em;
border-style:solid;
border-width:1px;
border-color:E4E4E4;
}
#picture {
margin-top:1em;
margin-bottom:1em;
margin-left:1em;
width:33em;
left:1em;

^wozu?

height:7em;
z-index:1;
float:left;
border-style:solid;
border-width:1px;
border-color:#E4E4E4;
}
komischerweise macht mozilla dann kein frame mehr. soll heißen, der container #frame ist dann nur mehr ca. 1px hoch. was kann ich machen, dass nun der rahmen von #frame erhalten bleibt?

Das DIV-Element mit der ID frame hat keinen Inhalt mehr, weil die anderen DIV-Elemente mit float aus dem normalen Dokumentfluss genommen sind.

Du musst ihm wieder Inhalt geben. Beispielsweise, indem Du folgendes ergänzt:

<div id="frame">
 <div id="picture">
  <!-- bild -->
 </div>
 <div id="right">
  <!-- sub navi -->
 </div>
 <br style="clear:left;">
</div>

Erklärung:
Die Einstellung clear:left; sorgt dafür, dass sich der Zeilenumbruch nicht an den Floatings der DIV-Elemente orientiert, zwingt ihn also _unter die DIV-Elemente. Da der Zeilenumbruch gleichzeitig aber Elementinhalt des DIVs mit der ID frame ist, muss dieses DIV entsprechend gross werden.

Meinung:
Solche Konstruktionen zeugen von einer falschen Herangehensweise an die Formatierung von Hyper_Text_Dokumenten. Löse Dich von der Aufteilung des Bildschirms in Fenster. Layoute das Dokument nach seinem Inhaltsfluss.

viele Grüße

Axel

[selma]

hallo!

danke für deine antwort!

left:1em;
   ^wozu?

sry. ist mir so reingerutscht...

Erklärung:
Die Einstellung clear:left; sorgt dafür, dass sich der Zeilenumbruch nicht an den Floatings der DIV-Elemente orientiert, zwingt ihn also _unter die DIV-Elemente. Da der Zeilenumbruch gleichzeitig aber Elementinhalt des DIVs mit der ID frame ist, muss dieses DIV entsprechend gross werden.

ich weiß... nur kam ich nicht drauf ;-) - danke!

Meinung:
Solche Konstruktionen zeugen von einer falschen Herangehensweise an die Formatierung von Hyper_Text_Dokumenten. Löse Dich von der Aufteilung des Bildschirms in Fenster. Layoute das Dokument nach seinem Inhaltsfluss.

der inhalt der seite ist schon so gut wie fertig. es fehlt einfach nur noch ein design der seite...

der ie hat nun noch ein problem. anstelle des margin-left:1em rückt mir ie ca. 2em herein...

mlg
selma

[Cheatah]

Hi,

[...] Da der Zeilenumbruch gleichzeitig aber Elementinhalt des DIVs mit der ID frame ist, muss dieses DIV entsprechend gross werden.

ich rate von darstellungsbezüglichen Strukturen ab. Eine mögliche Alternativlösung habe ich genannt.

der ie hat nun noch ein problem. anstelle des margin-left:1em rückt mir ie ca. 2em herein...

Suche nach dem Doubled Float Margin Bug.

Cheatah

[Axel Richter]

Hallo,

[...] Da der Zeilenumbruch gleichzeitig aber Elementinhalt des DIVs mit der ID frame ist, muss dieses DIV entsprechend gross werden.
ich rate von darstellungsbezüglichen Strukturen ab.

Ich auch. Allerdings:

Eine mögliche Alternativlösung habe ich genannt.

Wenn das DIV#frame auch gefloatet wird, ergeben sich _neue_, wenn auch _andere_ Probleme. Deine Alternative ist also auch _keine_ Alternativlösung. Eine Lösung ist das Überdenken des Layouts und zwar dahingehend, dass es dem Dokumentinhalt folgt. Wenn ein DIV#frame nötig wird, dann stimmt etwas mit dem Layout nicht.

viele Grüße

Axel

[Cheatah]

Hi,

Eine mögliche Alternativlösung habe ich genannt.
Wenn das DIV#frame auch gefloatet wird, ergeben sich _neue_, wenn auch _andere_ Probleme.

korrekt. Ob diese von Belang sind, kann selma beurteilen, ich (bzw. wir) leider nicht.

Deine Alternative ist also auch _keine_ Alternativlösung.

Es ist eine _mögliche_ Alternativlösung.

Eine Lösung ist das Überdenken des Layouts und zwar dahingehend, dass es dem Dokumentinhalt folgt. Wenn ein DIV#frame nötig wird, dann stimmt etwas mit dem Layout nicht.

Wenn Du dem Satz noch ein "vermutlich" oder "wahrscheinlich" hinzufügst, stimme ich zu :-)

Cheatah