nicht angemeldet
float
Hallo & Schönen Sonntag!
Der untenstehende Quelltext erzeugt 2 nebeneinander stehende Kasterln (Opera 7.21, Mozilla 1.5, IE 6.0).
Ich verstehe nicht, warum die Kasterln nicht neben- sondern untereinander stehen, wenn man das <<class="fl">> vom rechten div entfernt.
Warum ist das so, oder ist was anderes falsch?
Danke
Viennamade
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Seeappartements Fischerbartl - Klares Wasser</title>
<style type="text/css">
<!--
div {border:1px red solid; width:200px;height:100px;}
div.fl {float:left;}
-->
</style>
</head>
<body>
<div class="fl">linkes div</div>
<div class="fl">rechtes div</div>
</body>
</html>
-
Ich verstehe nicht, warum die Kasterln nicht neben- sondern untereinander stehen, wenn man das <<class="fl">> vom rechten div entfernt.
Ein fehlendes float impliziert ein clear:both.
-
Hallo!
Ein fehlendes float impliziert ein clear:both.
Danke für die Antwort, komme damit aber nicht klar. So wie ich Deine Antwort verstehe habe ich auf untenstehenden Quelltext geändert. Trotzdem stehen dann im Opera 7.21 und im Mozilla 1.5 die Kasterln nicht nebeneinander :-(
Danke
Viennamade<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
<!--
div {border:1px red solid; width:200px;height:100px;}
div.fl {float:left;}
-->
</style>
</head>
<body>
<div class="fl">Linkes div</div>
<div>rechtes div</div>
<p><br style="clear:both" /></p>
</body>
</html>-
Ein fehlendes float impliziert ein clear:both...
...beim nächsten Element, und deswegen bricht es um - was es ja bei Angabe von clear:both auch macht.
-
Hallo,
Ein fehlendes float impliziert ein clear:both...
...beim nächsten Element, und deswegen bricht es um - was es ja bei Angabe von clear:both auch macht.
ich verstehe es noch immer nicht. Jedenfalls habe ich in Form untenstehenden Quelltextes dank Deiner Antworten was ich haben will, eben 2 nebeneinanderstehende divs.
Danke
Viennamade<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
<!--
div {border:1px red solid; width:200px;height:100px;}
div.fl {float:left;}
-->
</style>
</head>
<body>
<div class="fl">Linkes div</div>
<div class="fl">rechtes div</div>
<p><br style="clear:both" />Test-Absatz</p>
</body>
</html>
-
-
-
Hallo,
Ich verstehe nicht, warum die Kasterln nicht neben- sondern untereinander stehen, wenn man das <<class="fl">> vom rechten div entfernt.
Ein fehlendes float impliziert ein clear:both.
Nein.
http://www.w3.org/TR/CSS2/visuren.html#floats
Es ist vielmehr so, dass die FLOAT-Property eines Elements die linke/rechte obere Ecke eines folgenden Block-Elements im normalen Fluss nicht beeinflussen sollte. Einzig Inline-Flow fließt, soweit möglich, um das Element herum (siehe Version2 im unten stehenden Beispiel). Nur der IE rendert das anders. Opera 7 rendert das nicht ganz richtig, weil er Probleme mit dem Margin-bottom des vorhergehenden Elements im normalen Fluss hat, wenn dieses nicht explizit definiert ist. Gibt man für das dem FLOAT-Element folgende Element im normalen Fuss einen ausreichend großen Margin-left vor, sollte dieses also neben dem FLOAT-Element stehen (Version3). Nur Opera 7 rendert das falsch, solange nicht Margin-bottom des vorhergehenden Elements im normalen Fluss explizit gesetzt ist (Version3a). Mehrere FLOAT-Elemente sind natürlich alle aus dem normalen Fluss herausgelöst. Deshalb stehen sie soweit oben, wie es ihnen das letzte vorhergehende Element im normalen Fluss erlaubt und soweit links/rechts, wie es die vorhergehenden FLOAT-Elemente erlauben (Version4).<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Floats</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
div.c1 {border:1px solid black; width:50px; height:50px;}
div.c2 {border:1px solid blue; width:70px; height:70px;}
h2 {clear:both;}
-->
</style>
</head>
<body>
<h2>Version 1</h2>
<div class="c1">DIV V101</div>
<div class="c2">DIV V102</div>
<h2>Version 2 (falsch in IE und Opera 7)</h2>
<div class="c1" style="float:left;">DIV V201</div>
<div class="c2">f l u s s DIV V202</div>
<h2>Version 3 (falsch in Opera 7)</h2>
<div class="c1" style="float:left;">DIV V301</div>
<div class="c2" style="margin-left:60px;">DIV V302</div>
<h2>Version 3a</h2>
<p style="margin-bottom:2px;">Margin-Setzer für Opera</p>
<div class="c1" style="float:left;">DIV V3a01</div>
<div class="c2" style="margin-left:60px;">DIV V3a02</div>
<h2>Version 4</h2>
<div class="c1" style="float:left;">DIV V401</div>
<div class="c2" style="float:left;">DIV V402</div>
<h2>Version 5</h2>
<div class="c1" style="float:left;">Hier steht etwas mehr Text</div>
<div class="c2" style="float:left;">zum Testen des Verhaltens bei Überlauf.</div>
<h2>Version 5a</h2>
<p style="margin-bottom:2px;">Margin-Setzer für Opera</p>
<div class="c1" style="float:left;">Hier steht etwas mehr Text</div>
<div class="c2" style="margin-left:60px;">zum Testen des Verhaltens bei Überlauf.</div>
</body>
</html>viele Grüße
Axel
-
[...][ganz viele Beispiele]
Hast Du mal eine Grafik mit allen Beispielen, wie sie dargestellt werden _sollten_?
-
Hallo
[...][ganz viele Beispiele]
Hast Du mal eine Grafik mit allen Beispielen,
Ja, _ich_ hätte, aber _ich_ habe/brauche/möchte keinen vom Internet erreichbaren Speicherplatz, auf dem ich die Grafik der Allgemeinheit zugänglich könnte ;-)).
wie sie dargestellt werden _sollten_?
So wie im Mozilla.
...
<style type="text/css">
<!--
div.c1 {border:1px solid black; width:50px; height:50px;}
div.c2 {border:1px solid blue; width:70px; height:70px;}
h2 {clear:both;}
-->
</style>
...
<h2>Version 2 (falsch in IE und Opera 7)</h2>
<div class="c1" style="float:left;">DIV V201</div>
<div class="c2">f l u s s DIV V202</div>
sollte so aussehen:Version 2
[hier Abstand durch den Margin-bottom von H2]
+----------+----+
|DIV V201 |f l |
| |u s |
| |s |
+----------+ |
|DIV V202 |
+---------------+
< 50px >
< 70px >Opera 7 ignoriert für das DIV mit dem FLOAT den Margin-bottom der H2, wenn er nicht explizit im CSS vorgegeben ist, und stellt dieses direkt unter dem Überschrift-Text, also zu hoch, dar. Das ist falsch. Opera 6 macht _das_ noch richtig. IE stellt die DIVs nebeneinander. Das ist auch falsch.
Damit wird kar, dass man mit einem entsprechend großen Margin-left im zweiten DIV, dieses neben das FLOAT-DIV schieben können sollte.
viele Grüße
Axel
-
Hallo Axel!
Ich hab mir eine ganze Weile Deine Beispiele angeguckt (und werde das wohl noch öfters tun), mein Problem behoben haben sie leider nicht.
2 div-Kasterln, beide mit Text und Bildern, OK im IE6.0, Mozilla 1.5, jedoch im Opera 7.21 nicht nebeneinander sondern untereinander (so das zweite Kasterl kein float:left hat).
Geholfen hat bei mir etwas, was in Richtung "Deines" left-margins geht, nämlich oberhalb der beiden Kasterln ein inhaltsloses div in deren Breite auszuzeichnen. Das left-margin hat m.E. den Nachteil, daß beim horizontales Zusammenschieben des Browsers, das rechte Kasterl nicht schön umbricht.
... und wie man einem inhaltslosen div im IE seine Höhe nimmt habe ich in einem Deiner Postings im Archiv gefunden (line-height:0px)!
Danke
Viennamade-
Hallo,
2 div-Kasterln, beide mit Text und Bildern, OK im IE6.0, Mozilla 1.5, jedoch im Opera 7.21 nicht nebeneinander sondern untereinander (so das zweite Kasterl kein float:left hat).
Nö.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-Template 2-spaltig</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
h1, h2, h3, p {margin:0; padding:0; margin-bottom:.5em; }
#navigation {width:150px; float:left; margin-top:20px; background-color:#00E394; border:2px solid #008231;}
#navigation ul {list-style-type:none; margin:0; padding:0;}
#navigation a:link, #navigation a:visited {width:100%; display:block; background-color:#00E394; color:#000; text-decoration:none;}
#navigation a:hover {background-color:#008231; color:#FFF;}#content {margin:0; border:1px solid black;}
/*
#content {margin:0; margin-left:155px; border:1px solid black;}
*/
-->
</style>
</head>
<body>
<h1>Seitenüberschrift</h1>
<div id="navigation">
<ul>
<li><a href="#">Navipunkt 1</a></li>
<li><a href="#">Navipkt. 2</a></li>
<li><a href="#">Navigationspunkt 3</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">Navpkt. n</a></li>
</ul>
<p style="text-align:center; margin:2px;"><img src="bild.jpg" alt="Bild" style="width:100px; height:20px;"></p>
</div>
<div id="content">
<h2>Mustertext</h2>
<h3>Blindtext zum Testen</h3>
<p>Das ist Blindtext zum Testen. Es befinden sich darin auch einige spezielle Elemente, wie z.B. floatende Images. Das ist Blindtext zum Testen. Es befinden sich darin auch einige spezielle Elemente, <img src="bild.gif" width="150" height="50" alt="Bild" style="float:right;"> wie z.B. floatende Images. Das ist Blindtext zum Testen. Es befinden sich darin auch einige spezielle Elemente, wie z.B. floatende Images. Das ist Blindtext zum Testen. Es befinden sich darin auch einige spezielle Elemente, wie z.B. floatende Images. Das ist Blindtext zum Testen. Es befinden sich darin auch einige spezielle Elemente, wie z.B. floatende Images. Das ist Blindtext zum Testen.</p>
<p>Das ist Blindtext zum Testen. Es befinden sich darin auch einige spezielle Elemente, wie z.B. floatende Images. Das ist Blindtext zum Testen. Es befinden sich darin auch einige spezielle Elemente, <img src="bild.gif" width="150" height="50" alt="Bild" style="float:left;"> wie z.B. floatende Images. Das ist Blindtext zum Testen. Es befinden sich darin auch einige spezielle Elemente, wie z.B. floatende Images. Das ist Blindtext zum Testen. Es befinden sich darin auch einige spezielle Elemente, wie z.B. floatende Images. Das ist Blindtext zum Testen. Es befinden sich darin auch einige spezielle Elemente, wie z.B. floatende Images.</p>
<h3>Blindtext zum Testen</h3>
<p>Das ist Blindtext zum Testen. Es befinden sich darin auch einige spezielle Elemente, wie z.B. floatende Images. Das ist Blindtext zum Testen. Es befinden sich darin auch einige spezielle Elemente, <img src="bild.gif" width="150" height="50" alt="Bild" style="float:right;"> wie z.B. floatende Images. Das ist Blindtext zum Testen. Es befinden sich darin auch einige spezielle Elemente, wie z.B. floatende Images. Das ist Blindtext zum Testen. Es befinden sich darin auch einige spezielle Elemente, wie z.B. floatende Images. Das ist Blindtext zum Testen. Es befinden sich darin auch einige spezielle Elemente, wie z.B. floatende Images. Das ist Blindtext zum Testen.</p>
</div>
</body>
</html>Das steht im IE und im Opera 7 definitiv nebeneinander, soweit möglich natürlich ;-))
Geholfen hat bei mir etwas, was in Richtung "Deines" left-margins geht, nämlich oberhalb der beiden Kasterln ein inhaltsloses div in deren Breite auszuzeichnen.
Das Ziel der Gestaltung mit CSS ist aber gerade, solche "inhaltslosen" und damit auch überflüssigen Elemente zu vermeiden.
Das left-margin hat m.E. den Nachteil, daß beim horizontales Zusammenschieben des Browsers, das rechte Kasterl nicht schön umbricht.
Definiere "schön umbrechen". In meinem Beispiel bricht der Fließtext-Inhalt des DIV#content, meiner Meinung nach durchaus "schön" um. Wenn Du allerdings ein margin-left definierst (CSS-Kommentare im Beispiel entfernen), dann steht der DIV#content eben _immer_ margin-left weit vom linken Rand eingerückt. Wenn der DIV#content in bestimmten Fällen _unter_ den DIV#navigation rücken soll, dann _muss_ er eine definierte Breite haben, und kann dann auch mit float:left ausgerichtet werden. Das ist logisch, weil die Forderung: "Setze einen Bereich mit variabler Breite x neben den DIV#navigation, wenn er hinpasst und unter den DIV#navigation, wenn er nicht mehr hinpasst." unlogisch ist. Ein Bereich mit variabler Breite - von 0 bis beliebig breit - passt nämlich _immer_ hin, oder? ;-))
viele Grüße
Axel
-
Hallo Axel!
2 div-Kasterln, beide mit Text und Bildern, OK im IE6.0, Mozilla 1.5, jedoch im Opera 7.21 nicht nebeneinander sondern untereinander (so das zweite Kasterl kein float:left hat).
Nö.Dieser Thread wird heute oder morgen ins Archiv wandern, obwohl ich ihn noch gerne fortgesetzt hätte. Bin aber leider momentan furchterbar angebunden ...
Jedenfalls werde ich hier im Forum demnächst um Seitenkritik bitten und dabei auch auf "meine" Float-Probleme eingehen.Besten Dank & Grüße
Viennamade
-
-
-
-
-
-