nicht angemeldet
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