nicht angemeldet
Div Container bei Mozilla nach Links verschoben
Hi,
ich versuche nun schon seit ca. einer Woche, die "Formatierung" des Mozilla Firefox zu verstehen bzw. in den Griff zu bekommen.
Im Internet Explorer werden die 2 Divs nebeneinander angezeigt.
Im Firefox jedoch verschiebt es mir den rechten Div ca 50 px nach rechts!!!
Wenn ich jedoch die Links (also den rechten Div) raus nehme stimmt die Formatierung.
Ich weis nicht mehr woran man da noch was einstellen bzw. ändern kann aber irgend wie muss es doch gehen....
Vielleicht hatte irgend jemand schonmal das Problem??
Hier mein Quelltext + Stylesheed
Quelltext
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css"></style>
</head>
<body>
<div class="layout1">
<div class="navi">
<a href="index.htm" class="aktiv">HOME</a> <br>
<a href="profil.htm">PROFIL</a> <br
<a href="galerie.htm">GALERIE</a><br>
<a href="referenzen.htm">REFERENZEN</a><br>
<a href="presse.htm">PRESSE</a> <br>
<a href="kontakt.htm">KONTAKT</a><br>
<a href="impressum.htm">IMPRESSUM</a>
</div>
<div class="inhalt" style="overflow:scroll;">
<p>Main...</p>
<p> </p>
<p>Hier soll dann der Text stehen </p>
</div>
</div>
</body>
</html>
Stylesheed
......
.layout1 {
background-image: url(bilder/A.gif);
background-repeat: no-repeat;
border: solid;
border-width: 1px;
border-color: #CACACA;
width: 926px;
height: 524px;
margin: auto;
margin-top: 35px;
}
.layout2 {background-image:url(bilder/B.gif);
background-repeat:no-repeat;
border:solid;
border-width:1px;
border-color: #CACACA;
width:926px;
height:524px;
margin:auto;
margin-top:35px;}
.layout3 {background-image:url(bilder/C.gif);
background-repeat:no-repeat;
border:solid;
border-width:1px;
border-color: #CACACA;
width:926px;
height:524px;
margin:auto;
margin-top:35px;}
ul {list-style-type:none;
padding-left:20px;
padding-top:350px;
float:left;}
.navi {border:none;
margin-left:20px;
margin-top:350px;
width:130px;
height:150px;
overflow:hidden;
font-weight:bold;
float:left;}
.inhalt {border:none;
margin-left:220px;
margin-top:130px;
width:670px;
height:380px;
overflow:hidden;}
h1 {font-size:10pt;
font-weight:bold;
text-align:left;}
h2 {font-size:10pt;
font-weight:normal;
font-style:italic;
text-align:left;
padding-top:5px;}
p1 {font-size:10pt;
font-weight:normal;
padding-right:10px;
padding-top:0px;}
.......
Ich hoffe mal es ist im Gesammten nicht all zu schlecht :-)
Bin nicht ganz zo Fit selfhtml hilft jedoch meistens....
Liebe Grüße und Danke im Voraus
Daniel
-
Hi Daniel,
ich versuche nun schon seit ca. einer Woche, die "Formatierung" des Mozilla Firefox zu verstehen bzw. in den Griff zu bekommen.
ohne essen und schlafen und alles? Krass ;-)
Wenn ich jedoch die Links (also den rechten Div) raus nehme stimmt die Formatierung.
Was bedeutet, dass sich der linke Rand von .inhalt im FF am rechten Rand von .navi abstößt und nicht -wie man erwarten könnte- am linken Boxanfang von .layout. Das liegt am overflow: scroll für .inhalt (weiß gerade nicht ob das ein Bug ist). Lass .inhalt einfach nach rechts floaten. Und die Ränder zu .layout machst du besser dort über padding links und rechts 20px...
Gruß
Antipitch-
Hi Antipitch,
ohne essen und schlafen und alles? Krass ;-)
Nein das natürlich nicht. Ich hab auch net eine Woche 24 Stunden dran verbracht sonst wäre ich schon lang "Kirre"
Was bedeutet, dass sich der linke Rand von .inhalt im FF am rechten Rand von .navi abstößt und nicht -wie man erwarten könnte- am linken Boxanfang von .layout. Das liegt am overflow: scroll für .inhalt (weiß gerade nicht ob das ein Bug ist). Lass .inhalt einfach nach rechts floaten. Und die Ränder zu .layout machst du besser dort über padding links und rechts 20px...
Wenn ich das overflow:scroll raus nehm funktioniert das immer noch nicht.
Wenn ich .inhalt nach rechts floaten lasse rutscht es direkt unter das ende des linken Div´s. Ist jedoch von der Formatierung richtg. Das ist es aber auch wenn ich überhaupt kein float benutze. Wie muss ich float rechts genau anwenden?Das mit den Rändern habe ich für die .layouts verwendet. Das funktioniert auch.
Hat vielleicht noch einer ne Idee...
Ich habe jetzt auch schon gehört, dass eigentlich der IE das Problem ist und nicht der Firefox????
Danke schonmal
Liebe Grüße Daniel-
Hi Daniel,
falls das nicht funktioniert haben sollte, hast du noch irgendwelche anderen Angaben am Start oder keine Doctype Deklaration in deinem Dokument (von Beginnern gern unterschätzt).
Wie dem auch sei, weil heute so ein guter Tag ist (abgesehen vom Hamburger Wetter), hier dein fertiges Layout:
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0 none;
}
#container {
position: absolute;
left: -463px; /* für Zentrierung in der Seite
top: 35px;
margin-left:50%; /* für Zentrierung in der Seite
border: 1px solid #CACACA;
width: 926px;
height: 524px;
background-image: url(bilder/A.gif) no-repeat 0 0;
}
#navi {
padding: 10px;
position: absolute;
left: 20px;
bottom: 20px;
width:110px;
list-style: none;
background-color: yellow;
}
#inhalt {
padding: 10px;
position: absolute;
right: 20px;
bottom: 20px;
width:650px;
height:360px;
overflow: auto;
background-color: orange;
}
</style><div id="container">
<ul id="navi">
<li><h2>Navigation</h2></li>
<li><a href="index.htm" class="aktiv">HOME</a></li>
<li><a href="profil.htm">PROFIL</a></li>
<li><a href="galerie.htm">GALERIE</a></li>
<li><a href="referenzen.htm">REFERENZEN</a></li>
<li><a href="presse.htm">PRESSE</a></li>
<li><a href="kontakt.htm">KONTAKT</a></li>
<li><a href="impressum.htm">IMPRESSUM</a></li>
</ul>
<div id="inhalt">
<h1>Überschrift</h1>
<p>Inhalt</p>
</div>
</div>Bitte beachte, dass ich es auf absolute Postionierung umgestellt habe. Generell ist das nicht empfehlenswert und am schwierigsten zu handhaben. In deinem Fall macht es aber Sinn, deine Navigation "wächst" jetzt bei Bedarf (User > Schriftgröße etc.) automatisch nach oben. Und bitte weiterhin auch beachten, dass du irgendwelche paddings und u.U. margins immer in Breiten und Höhenangaben mit einrechnen musst.
Gruß
Antipitch
-
-