[HTML/CSS] "Normalen Textfluss" erzwingen

[alcaeus]

Hallo,

nehmen wir an, ich haette folgenden HTML-Code:

Code:

<div id="content">
  <div id="navigation">foobar</div>
  <div id="text">Hier steht viel Text[...]</div>
</div>

<div id="footer">Hier steht noch was...blablabla</div>

mit folgendem CSS:

Code:

#navigation {
  position:absolute;
  left:2em;
  width:20em;
}
#text {
  position:absolute;
  left:23em;
  right:2em;
  padding:1em;
}

#footer {
  padding:1em;
  font-size:0.7em;
}

Das content-div wird ja aus dem normalen Textfluss rausgenommen, da es absolut positioniert ist. Das hat zur Folge, dass das footer-div hinter dem Content landet, anstatt darunter. Kann ich das footer-div dazu zwingen, unter #content zu erscheinen, wenn ich die Hoehe des content-divs nicht kenne (Hoehe ist variabel), und ohne auf JavaScript zurueckzugreifen?

Der Grund warum ich es so mache ist, weil bei Floating divs (normalerweise koennte ich ja #navigation links floaten lassen) manchmal #text umgebrochen wird, wenn z.B. ueberbreiter Content enthalten ist. Dass das suboptimal ist koennt ihr euch ja vorstellen *g*

Hat jemand einen Tipp?

Greetz
alcaeus

[S2B]

Zitat von alcaeus:

Der Grund warum ich es so mache ist, weil bei Floating divs (normalerweise koennte ich ja #navigation links floaten lassen) manchmal #text umgebrochen wird, wenn z.B. ueberbreiter Content enthalten ist. Dass das suboptimal ist koennt ihr euch ja vorstellen *g*

Kommt darauf an, wie du es machst... So dürfte es eigentlich nicht passieren:

Code:

<div>
  <div style="float: left; width: 20em">Text</div>
  <div style="margin-left: 20em">Text</div>
</div>

Da sich der IE6 mal wieder nicht ganz an die Standards hält, müsstest du bei der linken Box overflow: hidden oder overflow: scroll einsetzen.

Auf jeden Fall denke ich nicht, dass du eine relative Ausrichtung ohne JS automatisch unter eine absolute bringen kannst.

[alcaeus]

Zitat von S2B:

So dürfte es eigentlich nicht passieren:
[...]
Da sich der IE6 mal wieder nicht ganz an die Standards hält, müsstest du bei der linken Box overflow: hidden oder overflow: scroll einsetzen.

Naja, beide Browser halten sich an den Standard, welcher sagt, dass die Box umgebrochen wird wenn sie zu breit ist. Das Problem ist aber, dass sowohl Firefox als auch IE7 Probleme bei der Berechnung der effektiven Breite hatten, da margin und padding eingeflossen sind. Die Seite konnte keiner der beiden korrekt darstellen, obwohl CSS und HTML perfekt der Spezifikation (XHTML 1.1) entsprachen.

Wie gesagt - der Standard sagt Umbrechen, ich sag aber nein. Per CSS das Umbrechen verhindern (white-space:none ging auch nicht.
Anscheinend hatten beide Browser ein Problem beim Berechnen der Breite unter Beruecksichtigung vom Padding der Content-Box, margin von #text, margin und width von #navigation, und padding von #text. Irgendwo hats da gekracht.

Greetz
alcaeus

[Luckie]

Warum benutzt du id-Tags? Sollte man da nicht lieber mit class arbeiten?

[alcaeus]

Zitat von Luckie:

Warum benutzt du id-Tags? Sollte man da nicht lieber mit class arbeiten?

Nein - weil nur diese Boxen den Style haben sollen. Ob ich id="foo" und #foo oder class="foo" und .foo verwende laeuft auf dasselbe hinaus, #foo hat allerdings eine staerkere Bindung auf genau ein Element. An der Darstellungsweise der Browser aendert es gar nichts.

Greetz
alcaeus

[S2B]

Zitat von alcaeus:

Naja, beide Browser halten sich an den Standard, welcher sagt, dass die Box umgebrochen wird wenn sie zu breit ist.

o.O
Das wäre mir neu. Soweit ich das in Erinnerung habe, sagt der Standard, dass eine div-Box ihre angegebene Größe beibehält, egal ob der Inhalt größer ist oder nicht (solange die Eigenschaft nicht mit overflow verändert wird). Denn solange nur der Inhalt aus der Box herausragt, die Box sich aber nicht verändert, wird die rechte Box auch nicht nach unten umgebrochen (siehe Firefox).

Zitat von alcaeus:

Das Problem ist aber, dass sowohl Firefox als auch IE7 Probleme bei der Berechnung der effektiven Breite hatten, da margin und padding eingeflossen sind. Die Seite konnte keiner der beiden korrekt darstellen, obwohl CSS und HTML perfekt der Spezifikation (XHTML 1.1) entsprachen.

So soll es ja auch sein, padding und margin werden zur Größe der Boxen hinzugefügt.

[alcaeus]

Zitat von S2B:

Das wäre mir neu. Soweit ich das in Erinnerung habe, sagt der Standard, dass eine div-Box ihre angegebene Größe beibehält, egal ob der Inhalt größer ist oder nicht

Die Box hat aber keine angegebene Groesse. Ein width:100%; hat die Box naemlich im IE und im Firefox weit ueber den Rand rausgehen lassen, eben weil die margins dazugezaehlt werden. Also muesste ich von 100% die 23em links und 2em rechts abziehen, und der einzige Weg das zu realisieren, ist mit position:absolute zu arbeiten, und left und right zu setzen. Das schluckt der IE6 zwar nicht, was momentan aber kein Problem darstellt.
Allerdings kommt es dann zum oben beschriebenen Problem...ach, hab ich erwaehnt dass ich Webdesign hasse?

Greetz
alcaeus

[S2B]

Also auf meiner Testseite wird alles korrekt angezeigt, zumindest im Firefox (im IE6 gibt es trotz CSS-Hack noch einen kleinen Fehler, der sollte sich aber beheben lassen):

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>
   <title>Test</title>
   <style type="text/css">
   <!--
      #content {
         border: 1px #000 solid
      }
      #navigation {
         float: left;
         margin-left: 2em;
         width:20em;
         border: 1px #000 solid;
      }
      * html #navigation {
         overflow: hidden
      }
      #text {
         margin-left: 23em;
         margin-right: 2em;
         padding:1em;
         border: 1px #000 solid
      }
      
      #footer {
         padding:1em;
         font-size:0.7em;
         border: 1px #000 solid
      }
   -->
   </style>
</head>
<body>
   <div id="content">
      <div id="navigation">
         asdölakjsflöjkasölfköalskfölaksfölaköslfköalskfaksölfkaölsgöaskgölkaölfköasdöasd
      </div>
      <div id="text">
         asdölakjsflöjkasölfköalskfölaksfölaköslfköalskfaksölfkaölsgöaskgölkaölfköasdöasd
      </div>
   </div>
   
   <div id="footer">Hier steht noch was...blablabla</div>
</body>
</html>

[Flocke]

Zitat von alcaeus:

Also muesste ich von 100% die 23em links und 2em rechts abziehen, und der einzige Weg das zu realisieren, ist mit position:absolute zu arbeiten, und left und right zu setzen.

Du könntest auch einfach zwei divs ineinander verschachteln - die äußere bekommt 100% Breite und die innere padding und margin.