3 divs nebeneinander
0 
Detlef G.
0 0 Jetzt geht es
3 divs nebeneinander
Eine Frage hätte ich noch:
Ich möchte drei Divs als Navigation nebeneinander anordnen, habe aber immer das Problem, dass das rechte Div eine Zeile tiefer sitzt. Sogar aus dem übergreifenden Div rausrutscht. Weiß jemand warum?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#nav {
padding-top:0.2em;
border-top:1px dashed #444444;
font-size:1em;
background-color:#eeeeee;
}
.navEl1 {
float:left; width:12em;
margin: 0; padding: 0;
}
.navEl2 {
margin: 0 12em 0 12em;
}
.navEl3 {
float:right; width:12em;
margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="nav">
<div class="navEl1">
<h2>Thema</h2>
</div>
<div class="navEl2">
<h2>Stichwort</h2>
</div>
<div class="navEl3">
<h2>Beispiele</h2>
</div>
</div>
</body>
</html>
Angeschaut hatte ich mir:
http://de.selfhtml.org/css/layouts/anzeige/3spaltig.htm
xsälz
-
Hallo xsälz
Angeschaut hatte ich mir:
Hast du dort auch auf die Reihenfolge im Quelltext geachtet?
Zum besseren Verständniss schau dir mal http://d-graff.de/demos/selfhtml/dreidivs.html an.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hast du dort auch auf die Reihenfolge im Quelltext geachtet?
Ja.
Zum besseren Verständniss schau dir mal http://d-graff.de/demos/selfhtml/dreidivs.html an.
Geht leider nicht so, denn so hatte ich es ursprünglich mal. Allerdings zeigt der IE auf Mac OSX die DIVs auf dieser Seite untereinander und nicht nebeneinander. Während es bei der selfhtml-Variante geht.
xsälz
-
Es lag tatsächlich nur an der Reihefolge. Warum auch immer.
xsälz
-
Hallo xsälz,
Es lag tatsächlich nur an der Reihefolge. Warum auch immer.
Überlege mal!
Ein Blockelement verwendet immer die gesamte zur Verfügung stehende Breite.
Nur wenn es gefloatet wird, ist neben ihm noch Platz.Dein erstes Div hatte float:left. Das Div .navEl2 nicht, es soll ja auch in
der Mitte stehen. Damit ist kein Platz mehr für .navEl3. Es floated zwar rechts,
aber unterhalb von .navEl2.Nimm dir mal ein wenig Zeit und schau dir meine Beispielseite nocheinmal genau an.
Ändere die Größe des Browserfensters, die Schriftgröße, schaue, wie sich die Elemente
dabei verhalten und versuche zu verstehen, warum es so ist.
Ich hatte sie ursprünglich gemacht, um selbst das Verhalten von Elemente in Verbindung
mit float zu verstehen.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Dein erstes Div hatte float:left. Das Div .navEl2 nicht, es soll ja auch in
der Mitte stehen. Damit ist kein Platz mehr für .navEl3. Es floated zwar rechts,
aber unterhalb von .navEl2.Stimmt, so hatte ich das noch gar nicht gesehen. Dennoch hat mich deine Seite irritiert, da keine einziges Mal die drei Elemente in meinem Browser nebeneinanderstehen.
xsälz
-
Hallo xsälz
Dennoch hat mich deine Seite irritiert, da keine einziges Mal die drei Elemente in meinem Browser nebeneinanderstehen.
Das verwundert mich etwas.
Welchen Browser verwendest du, welche Schriftgröße und wie breit ist dein
Browserfenster?Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Welchen Browser verwendest du, welche Schriftgröße und wie breit ist dein
Browserfenster?Mac OSX 10.3.4, IE 5.2.3, Schriftgröße normal, Breite 800px
xsälz
-
-
-
-
Hi,
Es lag tatsächlich nur an der Reihefolge. Warum auch immer.
Du solltest auch nicht nur einen kurzen Blick auf ein Beispiel werfen, sondern Dir auch die Erläuterungen genauer ansehen - ganz besonders, wenn Du Neuland betrittst. Dabei hätte schön ein Blick in den Text dieses Beispiels gereicht:
"Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie im Quelltext vor dem im Fluss belassenen Inhaltsbereich zu notieren."
Und bereits unter der Erläuterung zum allerersten Beispiel auf dieser Seite stand:
"Beachten Sie:
Im HTML-Quelltext sind Elemente, die Sie über die CSS-Eigenschaft float ausrichten wollen, zuerst zu notieren."Und Dein "warum auch immer" wird genau unter dem von Dir gewählten Beispiel erklärt:
"Erläuterung:
Um mehrere Boxen über float nebeneinander zu setzen, kann bei einer Box - hier dem Inhaltsbereich - auf die Definition von float und width verzichtet werden. Hierdurch nimmt sie den gesamten zur Verfügung stehenden Raum ein. Dies erfordert allerdings, die floatenden Boxen vorher in den Quelltext zu setzen, damit sie zuerst ihre definierte Breite reservieren können."Müssen diese Informationen denn noch rot und in Fettdruck stehen, damit man ihnen Beachtung schenkt?
freundliche Grüße
Ingo
-
-