nicht angemeldet
Float verhindert Zeilenumbruch in Listenpunkt
AugeHallo!
Ich habe links eine Navigation (float:left), und daneben einen Contentbereich, der ebenfalls gefloatet ist und einen längeren Listenpunkt enthält. Bei kleinerem Fenster hätte ich gerne einen Zeilenumbruch in diesem Listenpunkt, doch außer im IE rutscht bei allen anderen Browsern der Contentbereich unter die Navigation.
Was mache ich falsch? Der Code:
----------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<style type='text/css'>
#navi {
background-color: red;
width: 300px;
height: 200px;
float: left;
}
#content {
float: left;
}
</style>
</head>
<body>
<div id='navi'></div>
<div id='content'>
<ul>
<li>Listenpunkt mit etwas mehr Text, der bei kleinerem Fenster einen Umbruch machen sollte</li>
</ul>
</div>
</body>
</html>
----------------------------------------
Danke für Hinweise!
-
Hi,
hast Du mal versucht, für 'content' eine Breite vorzugeben?
Grüße, Patrick
-
Hallo Patrick,
hast Du mal versucht, für 'content' eine Breite vorzugeben?
Das würde sicher gehen, aber dann hätte ich wieder eine feste Breite, und ich möchte ja, dass sich die Seite an die Fensterbreite anpasst.
Grüße, Mick
-
-
Hellihello Mick,
#navi {
background-color: red;
width: 300px;
height: 200px;
float: left;
}#content {
float: left;
}Wozu das?
Zudem: vererbt sich das auf die Elemente darin?
Dank und Gruß,
frankx
-
Hallo frankx,
#content {
float: left;
}Wozu das?
sonst würde die Navigation umflossen, der Content-Bereich würde am unteren Ende der Navigation wieder ganz nach links rutschen. Oder kann man das auf andere Weise verhindern?
Zudem: vererbt sich das auf die Elemente darin?
Nö, ich denke nicht.
Dank und Gruß,
dito, Mick.
-
Hellihello
#content {
float: left;
}Wozu das?
sonst würde die Navigation umflossen, der Content-Bereich würde am unteren Ende der Navigation wieder ganz nach links rutschen. Oder kann man das auf andere Weise verhindern?
zweimal float:left, erst für die Navi, dann für den Content. Ich wundere mich.
Dank und Gruß,
frankx
-
Hallo
#content {
float: left;
}Wozu das?
sonst würde die Navigation umflossen, der Content-Bereich würde am unteren Ende der Navigation wieder ganz nach links rutschen. Oder kann man das auf andere Weise verhindern?
Ja
zweimal float:left, erst für die Navi, dann für den Content. Ich wundere mich.
Man kann damit einen "Block Formatting Context" für die rechte Box (#content) erreichen. Damit ermöglicht man die Anwendung von "float" _innerhalb_ der rechten Box, ohne dass die Positionierung der Box ansich durch ein in der Box verwendetes "clear" aufgehoben würde.
siehe SELFHTML-Weblog: Grundlagen für Spaltenlayout mit CSS
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.2-
Hallo,
Danke für den Link, hier habe ich einiges Neues erfahren. Das Beispiel 3 führt tatsächlich im Opera 9.24 dazu, dass der rechte Block bei zu kleinem Fenster unter den linken Block rutscht. Nur leider nicht im Firefox 2.
Zitat aus der oben verlinkten Seite:
"Bei schmalem Viewport reagiert die Mehrspaltigkeit nicht automatisch durch eine linearisierte Darstellung, bei der die zweite Spalte unter der ersten erscheint. Eine Linearisierung ist mit CSS aber problemlos möglich."
Das macht ja Hoffnung, dass es doch funktioniert, nur leider konnte ich dem Artikel nicht entnehmen, wie genau das gehen soll.
Grüße, Mick
-
-
-
Hellihello
sonst würde die Navigation umflossen, der Content-Bereich würde am unteren Ende der Navigation wieder ganz nach links rutschen. Oder kann man das auf andere Weise verhindern?
margin-left: 300px;
Dank und Gruß,
frankx
-
Hallo Mick,
sonst würde die Navigation umflossen, der Content-Bereich würde am unteren Ende der Navigation wieder ganz nach links rutschen. Oder kann man das auf andere Weise verhindern?
margin-left: 300px;
Stimmt, damit geht's! Leider ist aber an dieser Stelle mein Beispiel zu einfach, im Original hat die Navigation keine feste Breite und nimmt abhängig von der Schriftgröße mehr oder weniger Platz ein, so dass es mit margin-left leider doch nicht ganz klappt.
Danke trotzdem.
Mick
-
Hallo Mick
margin-left: 300px;
Stimmt, damit geht's! Leider ist aber an dieser Stelle mein Beispiel zu einfach, im Original hat die Navigation keine feste Breite und nimmt abhängig von der Schriftgröße mehr oder weniger Platz ein, so dass es mit margin-left leider doch nicht ganz klappt.
Du kannst bei
margin-leftnicht nur px sondern auch andere Einheiten angeben.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
Du kannst bei
margin-leftnicht nur px sondern auch andere Einheiten angeben.Ja danke, das stimmt natürlich. Dann würde der Content aber immer rechts von der Navigation bleiben, und er würde nicht bei sehr kleinem Fenster unter die Navigation rutschen.
Der IE (6) passt den Content dem zur Verfügung stehenden Platz an, und erst wenn der Platz neben der Navigation zu klein wird, rutscht der Content unter die Navigation. Ich hatte gehofft, dieses Verhalten auch mit anderen Browsern erreichen zu können.
Grüße, Mick
-
Hallo
Du kannst bei
margin-leftnicht nur px sondern auch andere Einheiten angeben.Ja danke, das stimmt natürlich. Dann würde der Content aber immer rechts von der Navigation bleiben, und er würde nicht bei sehr kleinem Fenster unter die Navigation rutschen.
Woraus beziehst du diese Weisheit? Warum sollte es einen Unterschied machen, ob der Contentbereich 300px oder 20em Abstand zum linken Rand hat?
Der IE (6) passt den Content dem zur Verfügung stehenden Platz an, und erst wenn der Platz neben der Navigation zu klein wird, rutscht der Content unter die Navigation. Ich hatte gehofft, dieses Verhalten auch mit anderen Browsern erreichen zu können.
Das sollten sie grundsätzlich tun. Im Zweifelsfall solltest du dem Contentbereich eine Minimalbreite (min-width) verpassen. Wird diese unterschritten, sucht der Browser nach mehr Platz, welchen er nur _unter_ der Navigation finden wird.
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.2-
Hi,
Du kannst bei
margin-leftnicht nur px sondern auch andere Einheiten angeben.Ja danke, das stimmt natürlich. Dann würde der Content aber immer rechts von der Navigation bleiben, und er würde nicht bei sehr kleinem Fenster unter die Navigation rutschen.
Woraus beziehst du diese Weisheit? Warum sollte es einen Unterschied machen, ob der Contentbereich 300px oder 20em Abstand zum linken Rand hat?
Das macht natürlich keinen Unterschied. In beiden Fällen rutscht der Content bei kleinem Fenster nicht wie gewünscht unter die Navigation.
Der IE (6) passt den Content dem zur Verfügung stehenden Platz an, und erst wenn der Platz neben der Navigation zu klein wird, rutscht der Content unter die Navigation. Ich hatte gehofft, dieses Verhalten auch mit anderen Browsern erreichen zu können.
Das sollten sie grundsätzlich tun. Im Zweifelsfall solltest du dem Contentbereich eine Minimalbreite (min-width) verpassen.
Hab ich gemacht, leider ohne Erfolg.
Grüße, Mick
-
Hallo
Das sollten sie grundsätzlich tun. Im Zweifelsfall solltest du dem Contentbereich eine Minimalbreite (min-width) verpassen.
Hab ich gemacht, leider ohne Erfolg.
Hast du das? Mit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Flusstest</title> <style type="text/css"> [code lang=css] * { margin:0; padding:0; color:#000; background:#fff; } #navi { width:20em; float:left; border:1px solid; margin:1em; } #cont { min-width:30em; float:left; margin:1em; border:1px solid; }</style>
</head>
<body>
<div id="navi">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Termine</a></li>
<li>Abrakadabra</li>
</ul>
</div>
<div id="cont">
<h1>Flusstest</h1>
<p>laber rahbarber: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>[/code]... rutscht der Text unter die Navigation. Da es keine Maximalbegrenzung gibt, steht der Text übrigens im FF2 _immer_ unterhalb der Navigation. Im IE6, der keine min-width kennt, wird der Inhalt rechts von der navi so breit angezeigt, wie es das Fenster erlaubt. Nur wenn das Fenster so schmal gemacht wird, dass das längste Wort in #cont nicht mehr in die dann zur Verfügung stehende Breite passt, springt #cont unter die Navigation.
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.2-
Hallo Auge,
erstmal besten Dank für deine Mühe!
... rutscht der Text unter die Navigation. Da es keine Maximalbegrenzung gibt, steht der Text übrigens im FF2 _immer_ unterhalb der Navigation.
Das ist aber ja nicht erwünscht, der Content soll nur dann unter die Navigation, wenn rechts kein Platz ist.
Im IE6, der keine min-width kennt, wird der Inhalt rechts von der navi so breit angezeigt, wie es das Fenster erlaubt. Nur wenn das Fenster so schmal gemacht wird, dass das längste Wort in #cont nicht mehr in die dann zur Verfügung stehende Breite passt, springt #cont unter die Navigation.
Dieses Verhalten empfinde ich als optimal und möchte es möglichst in allen Browsern erreichen. Wie in diesem Beispiel kann ich den Content-Bereich mit "overflow:hidden" statt "float:left" ebenfalls dazu bringen, die Navigation nicht zu umfließen und habe dann den Vorteil, dass der Content-Bereich sich dem zur Verfügung stehenden Platz anpasst, auch wenn ich keine Breite angegeben habe. Wird der Platz allerdings zu knapp, reagieren die Browser wieder unterschiedlich. Im Opera rutscht der Content unter die Navigation, im FF aber leider nicht, der nimmt "overflow:hidden" wörtlich. Das Verhalten des IE konnte ich im FF bisher nicht erreichen.
Grüße, Mick
-
-
-
-
-
-
-
-
-
Hellihello
#content {
float: left;
}Wozu das?
Genau, ohne dem gehts in meinem FF.
Dank und Gruß,
frankx
-