nicht angemeldet
Problem mit zwei floatenden Div's
0 0 0 0 0 0 0 0 0
0
0
Problem mit zwei floatenden Div's
Hallo!
Ich hab ein Problem mit einem dreispaltigem Layout:
http://www.digitales-lichtbild.de/test/index.html
Der IE zeigt es fast so wie es eigentlich aussehen soll:
Die drei div's sind auf der gleichen Ebene.
Ungewollt sind allerdings die Abstände (zu sehen an den vertikalen Streifen) zwischen den div's.
Diese macht der Firefox zwar nicht, dafür verlängert er das links und rechts floatende div um umgewollte 85px nach unten.
Hier der Quelltext:
<div id='headerlinks'></div>
<div id='headerrechts'><div id='headerstreifen'></div></div>
<div id='headermitte'></div>
CSS:
/* Zentrales */
body {
background-color: #878989;
margin:0px;
padding:0px;
}
/* Hauptdivs */
div#headerlinks {
margin: 85px auto 20px 0px;
padding: 0px;
width: 5%;
height: 165px;
background-color: #585959;
float:left;
}
div#headermitte {
margin: 85px auto 20px auto;
padding: 0px;
height: 165px;
background-color: #585959;
}
div#headerrechts {
margin: 85px 0px 20px auto;
padding: 0px;
width: 5%;
height: 165px;
background-color: #585959;
float: right;
}
div#headerstreifen {
margin: 0px 0px 0px auto;
padding: 0px 0px 0px auto;
width: 16px;
height: 165px;
background-color: #434444;
}
-
Hallo!
jeder deiner divs hat oben einen Abstand von 85px.
Probiere mal aus, denen 0 zu geben und einen Extra- div mit height:85px davorzusetzen.
IE und FF interpretieren ein Rechteck mit margin, border und padding unterschiedlich.
Kalle_B
-
Vielen Dank, das wär natürlich eine Möglichkeit.
Allerdings: Weißt du zufällig auch warum der IE solche seltsamen Abstände zwischen den div's lässt?
-
Allerdings: Weißt du zufällig auch warum der IE solche seltsamen Abstände zwischen den div's lässt?
Ja, zumindest Version 5 hat Probleme mit auto. Vielleicht ist das der linke und rechte auto-Abstand zwischen den zuvor hingesetzten linken und rechten div.
Nimm seitlichen Abstand 0 für den Mitte-div.
-
Allerdings: Weißt du zufällig auch warum der IE solche seltsamen Abstände zwischen den div's lässt?
Ja, zumindest Version 5 hat Probleme mit auto. Vielleicht ist das der linke und rechte auto-Abstand zwischen den zuvor hingesetzten linken und rechten div.
Nimm seitlichen Abstand 0 für den Mitte-div.
hmm, ich hab IE6 und habs mal so geändert:
div#headerlinks {
margin: 0px 0px 20px 0px;
padding: 0px;
width: 40%;
height: 165px;
background-color: #585959;
float:left;
}
div#headermitte {
margin: 0px 0px 20px 0px;
padding: 0px;
height: 165px;
width:10px;
background-color: #000000;
}Der Abstand bleibt trotzdem.
Ledigliche wenn ich einen negativen Abstand eingebe verschwindet die Lücke, aber das kann doch nicht richtig sein ...-
Der Abstand bleibt trotzdem.
Klingt so, als wäre da noch ein border drumrum (Grunseinstellung für alle divs?). Schalte den auch mal aus mit border:none!important
Kalle
-
Der Abstand bleibt trotzdem.
Klingt so, als wäre da noch ein border drumrum (Grunseinstellung für alle divs?). Schalte den auch mal aus mit border:none!important
Kalle
Hab ich gemacht für alle div's.
Daran liegt es anscheinend auch nicht :(.-
ich habs nochmal hochgeladen:
http://www.digitales-lichtbild.de/test/index.htmlDer IE macht den unerwünschten Abstand
und der FF zeigt das mittlere schwarze div überhaupt nicht!Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="content-language" content="de">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="css/haupt.css">
</head>
<body>
<div id='headerlinks'></div>
<div id='headerrechts'><div id='headerstreifen'></div></div>
<div id='headermitte'></div>
</body>
</html>CSS:
/* Zentrales */
body {
background-color: #878989;
margin:0px;
padding:0px;
}
/* Hauptdivs */
div#headerlinks {
margin: 0px 0px 20px 0px;
padding: 0px;
width: 40%;
height: 165px;
background-color: #585959;
float:left;
border:none;
}
div#headermitte {
margin: 0px 0px 20px 0px;
padding: 0px;
height: 165px;
width:150px;
background-color: #000000;
border:none;
}
div#headerrechts {
margin: 0px 0px 20px auto;
padding: 0px;
width: 5%;
height: 165px;
background-color: #585959;
float: right;
border:none;
}
div#headerstreifen {
margin: 0px 0px 0px auto;
padding: 0px 0px 0px auto;
width: 16px;
height: 165px;
background-color: #434444;
border:none;
}-
OPera zeigt alles^^. Ich glaube hier gelsen zu haben , daß die 2px "marginvoreinstellung" bei IE ein bekanntes püroblem ist...
hier
http://de.selfhtml.org/css/formate/box_modell.htm#workarounds
und..mehr finde ich auf anhieb nicht.-
OPera zeigt alles^^.
Immerhin einer ;)
Ich glaube hier gelsen zu haben , daß die 2px "marginvoreinstellung" bei IE ein bekanntes püroblem ist...
hier
http://de.selfhtml.org/css/formate/box_modell.htm#workarounds
und..mehr finde ich auf anhieb nicht.hm, meinst du wirklich es liegt am Box-Modell?
Die Weite ist nicht in pixeln angegeben sondern in Prozent, die margin und padding Angaben sind eindeutig ...Also mir ist es ein Rätsel, besonders das was der FF macht ... unterschlägt mir einfach mein div :(
-
habe ich ausprobiert:
<style type="text/css">
body {
background-color: #878989;
margin:0px;
padding:0px;
}
/* Hauptdivs */
div#headerlinks {
margin: 0;
padding: 0;
width: 5%;
background-color: #585959;
float:left;
margin-right:0;
}
div#headermitte {
margin: 0;
padding: 0;
background-color: #000000;
margin-left:0;
margin-right:0;
}
div#headerrechts {
margin: 0;
padding: 0;
width: 5%;
background-color: #585959;
float: right;
margin-left:0;
}
div.innen {
height: 165px;
}
div#headerstreifen {
margin: 0;
padding: 0;
width: 16px;
height: 165px;
background-color: #434444;
}
</style>
</head><body>
<div>
<div id='headerlinks'><div class=innen>LI</div></div>
<div id='headerrechts'><div class=innen><div id='headerstreifen'>RE</div></div></div>
<div id='headermitte'><div class=innen>MI</div></div>
<div style='clear:both'></div>
</div>
</body>-
hui, das muss ich mir erstmal genau angucken ;)
Aber aufjedenfall vielen vielen Dank!
-
wieder ein Problem:
Wenn ich eine Grafik der entsprechenden Höhe in das mittlere div einfüge tauchen wieder unerwünschte Abstände im IE auf :(
-
-
-
-
-
-
-
-
Zusatz:
Gut bewährt hat es sich, um die nebeneinanderliegenden divs einen umfassenden div zu legen:
+----------------------------------------------------+
|+---------++-----------------------------++--------+|
|| links || mitte || rechts ||
|| || || ||
|+---------++-----------------------------++--------+|
+----------------------------------------------------+<div>
<div class=li>
links
</div><div class=rechts>
rechts
</div><div class=mitte>
mitte
</div>
<div style='clear:both'></div>
</div>Einer der Vorteile: Der höchste div bestimmt dann die Gesamthöhe dieses Dreierblocks
Kalle
-
-
-
IE und FF interpretieren ein Rechteck mit margin, border und padding unterschiedlich.
Nur der IE im Quirksmodus. Bei einem Doctype XHTML stict oder HTML4.01 strict nicht mehr.
-