nicht angemeldet
Probleme bei Positionierung durch float
Hallo zusammen,
ich versuche zwei DIV-Boxen über die float-Eigenschaft nebeneinander zu positionieren - was auch unter Mozilla (Version Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040206 Firefox/0.8) ganz gut funktioniert, jedoch kränkelt der IE6 unter erheblichen Darstellungsproblemen: Die Boxen werden nicht nebeneinander positioniert, sondern untereinander.
Anbei der vollständige Code. Ich bin für jede Hilfe dankbar!
Gruß,
Tom
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body{
margin-top:10px;
padding:0px;
}
#header{
background:gainsboro;
padding:0;
border:0;
width:770px;
height:135px;
margin:0;}
#main{
background-color:#469B35;
padding:0;
border:0;
width:770px;
margin:0;}
#menu{
position:relativ;
width:149px;
margin:0;
padding:0;
float:left;
}
#content{
background-color:#ffffff;
padding:0;
width:621px;
margin-left:149px;
border:0;
}
#footer{
background-color:#000000;
padding:0;
border:0;
width:770px;
height:19px;}
.menuitem{
margin-bottom:5px;
}
-->
</style>
</head>
<body>
<div id="header">Header</div>
<div id="main">
<div id="menu">
<ul>
<li>Menüpunkt 1</li>
<li>Menüpunkt 2</li>
<li>Menüpunkt 3</li>
<li>Menüpunkt 4</li>
<li>Menüpunkt 5</li>
<li>Menüpunkt 6</li>
<li>Menüpunkt 7</li>
<li>Menüpunkt 8</li>
<li>Menüpunkt 9</li>
<li>Menüpunkt 10</li>
<li>Menüpunkt 11</li>
</ul>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.Duis autem veleum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel willum
lunombro dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.Duis autem veleum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel willum
lunombro dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
-
Hallo!
Ich habe mit Deinem Quelltext folgendes gemacht:
1. Valide
2. "position:relativ*" entfernt von #menu
3. "margin-left" aus content entfert
4. "float:left" zu content hinzugefügtDas mag ja nicht der Weisheit letzter Schluß sein, aber bei mir wird jetzt im IE 6.0 die content-box neben der menu-box angezeigt.
Beste Grüße
Viennamade-
Hallo Viennamade,
Ich habe mit Deinem Quelltext folgendes gemacht:
- Valide
- "position:relativ*" entfernt von #menu
- "margin-left" aus content entfert
- "float:left" zu content hinzugefügt
Vielen Dank für deine schnelle Hilfe! So funktioniert es in der Tat unter dem IE6 - auch wenn ich nicht genau verstehe warum.
Leider ergibt sich jetzt bei der Darstellung im Mozilla folgendes Probleme:1. Die definierte Hintergrundsfarbe wird für den #menu-Bereich nicht mehr angezeigt.
2. Der #footer-Bereich klebt auf Größe der #menu-Bereichs direkt unterhalb des #header-Bereichs.Trotzdem vielen Dank für deinen Tip, vielleicht ist das nun neu erstandene Problem leichter zu lösen.
Viele Grüße,
Tom-
Hallo!
Leider ergibt sich jetzt bei der Darstellung im Mozilla folgendes Probleme:
- Die definierte Hintergrundsfarbe wird für den #menu-Bereich nicht mehr angezeigt.
Vielleicht hilft es, wenn Du #menu die Farbe zuweist (und nicht #main).
- Der #footer-Bereich klebt auf Größe der #menu-Bereichs direkt unterhalb des #header-Bereichs.
Dem #footer ein clear:left hinzufügst?
Beste Grüße
Viennamade-
Hallo Viennamade,
Vielleicht hilft es, wenn Du #menu die Farbe zuweist (und nicht #main).
Das hat in soweit funktioniert, als dass der #menu-Bereich nun
tatsächlich die Hintergrundfarbe darstellt; Jedoch soll der #main-Bereich die gleiche Hintergrundsfarbe haben wie der #menu-Bereich, was leider weiterhin nicht funktioniert, die Angabe unter #main scheint vollkommen ignoriert zu werden. :-(Dem #footer ein clear:left hinzufügst?
Gute Idee! Das hat geklappt, nun sitzt der Footer dort, wo ich hin haben wollte.
Viele Grüße,
Tom
-