[gelöst] div platzierung und andere div höhe im ie

LeeXX · 4. Dezember 2008 um 17:03

hi, ih hab 2 kleine probleme:
hab ein tableless design, bei dem 4 divs untereinander angeordnet sind, diese liegen in nem main-div (roter rahmen), der sie mittig positioniert.

nun ist im ff der main-div genau so hoch dass die 4 divs rein passen. im ie dagegen hängt er unten immer noch 11 pixel dran. kann man im bild sehen. im ff (und so sollte es auch sein) hört er an der blauen linie auf, im ie hängt er unten unverständlicherweise genau 11px dran.
rechts neben deie 4 divs, also in dem grauen bereich bis zur roten außenlinie soll noch ein 8px breiter div, der immer 100% höhe hat, also immer bis zur (blauen) randlinie unten geht.

achso, in einen der 4 divs wird immer verschieden langer inhalt includet, d.h. feste höhenangaben machen keine sinn.

der html-code:

<div id="main">
<div id="block">
<div id="left">
         <div id="header" class="border_l_r">
                ...
         </div>

         <div id="navigation" class="border_l_r">
                ...
         </div>

         <div id="content" class="border_l_r">
                 ...
         </div>

         <div id="footer" class="border_l_r">
                 ...
         </div>

         <div id="border_bottom"></div>
</div>
<div id="border_right"></div>
</div>
<div class="clear"></div>
</div>

und der zugehörige css-code:

#main {
         top: 10px;
         width: 858px;
         position: absolute;
         left: 50%;
         margin-left: -429px;
}

#block {
         display: block;
}

#left {
         float: left;
         width: 850px;
}

#header {
         background-image: url(../images/logo.png);
         background-repeat: no-repeat;
         background-color: white;
         border-top-style: solid;
         border-top-width: 1px;
         border-top-color: #000000;
         height: 140px;
         width: 848px;
         overflow: hidden;
         text-align: right;
}

#navigation {
         height: 15px;
         width: 838px;
         padding-left: 10px;
         font-size: 9pt;
         background-color: #DFDFDF;
         text-align: left;
}

#content {
         width: 808px;
         text-align: left;
         font-size: 10pt;
         font-style: normal;
         padding: 20px;
         background-image: url(../images/bg1.jpg);
         background-position: bottom center;
         background-repeat: no-repeat;
         background-color: white;
}

#footer {
         padding-left: 10px;
         height: 10px;
         width: 838px;
         border-bottom-style: solid;
         border-bottom-width: 1px;
         border-bottom-color: #000000;
         background-color:gray;
         color:white;
         font-size: 7pt;
}

#footer a:link {
         color: white;
}

#border_right {
         position: relative;
         left: 850px;
         top: 0px;
         float: right;
         width: 8px;
         height: 100%;
         background-image: url(../images/rand_r.png);
         background-position: left top;
         background-repeat: repeat-y;
         vertical-align: top;
}

#border_bottom {
         height: 8px;
         width: 858px;
         background-image: url(../images/rand_u.png);
         background-position: left top;
         background-repeat: no-repeat;
}

.border_l_r {
         border-left-style: solid;
         border-left-width: 1px;
         border-left-color: #000000;
         border-right-style: solid;
         border-right-width: 1px;
         border-right-color: #000000;
}

michi7x7 · 4. Dezember 2008 um 17:16

hmm…da fehlen ein paar Grundlagen in der Positionierungstechnik…
1.) position: absolute auf jeden Fall vermeiden. Zentrieren geht mit margin-left: auto; margin-right: auto
2.) display: block: DIVs sind Standardmäßig Block-Elemente
3.) Wiso ist der div “left” 850px breit? das macht doch keinen Sinn…
Dazu folgendes:
-Der gefloatete DIV hat immer eine Fixe (sinnvolle Breite)
-Der DIV von dem gefloatet wird, hat ein margin-left, das etwas größer als die Breite des DIVs ist…

Also alles in Allem etwa so:

<div id="main">
   <div id="border_o"> </div>
   <div id="border_l"> </div>
   <div id="border_r"> </div>
   <div id="content">
       <!-- HIER INHALT -->
   </div>
   <div id="border_u"> </div>
</div>

der DIV “main” hat margin Links und Rechts Auto, und eine konstante Breite.
Border Links und Rechts sind jeweils links und rechts gefloatet, der Border Unten hat clear: all;
der Content-DIV hat ein margin Links und Rechts, das dem Rahmen entspricht
Den Inhalt kannst du normal verwenden

das wäre dann ein schönes, dynamisches Layout ohne position-Angaben

hoffmann · 4. Dezember 2008 um 17:30

Was hast du gegen absolute Positionierung?
(Gibt natürlich sinnvollere Anwendungen dafür als dies hier ;o)
Solange die Seite ohne CSS immer noch genauso sinnvoll ist wie
mit Positionierung, ist das doch komplett unproblematisch.

Daß der MSIE irgendwas größer macht, ist schon interessant.
Man könnte um jedes Element testweise einen Rahmen machen,
um zu sehen, woran es liegt.
Im Zweifelsfalls steht irgendwo zwischen zwei Elementen
ein Leerzeichen, was den MSIE dazu veranlaßt, dafür eine neue
Zeile zu beginnen, die braucht natürlich Platz.
Ansonsten hängt es auch davon ab, ob der im Quirksmodus
läuft oder nicht, da sind die Fehler ganz anders als beim normalen
Modus. Dort ist das Verhalten natürlich auch noch von der
Version abhängig.
Verlockend sind natürlich auch immer Angaben wie height:100%,
wenn beim Elternelement nicht explizit dabeisteht, wie groß es
ist, sich dessen Größe also nach dem Inhalt richtet ;o)

LeeXX · 4. Dezember 2008 um 17:47

danke erstmal, ansich gut so. das mit dem margin: auto wusste ich garnicht, dass das auch zentriert. und das funktioniet in allen bowsern?

das mit dem rahmen rechts klappt aber noch nicht.
ie und ff stellen es beide unterschiedlich und falsch dar.
auf dem bild kann man links die darstellung im ie sehen und rechts die im ff.
die veränderte css:

[code]#main {
margin-top: 10px;
width: 858px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 1px;
border-color: red;
}

#border_right {
float: right;
width: 8px;
background-image: url(…/images/rand_r.png);
background-position: right top;
background-repeat: repeat-y;
}

#left {
float: left;
}

#header {
background-image: url(…/images/logo.png);
background-repeat: no-repeat;
background-color: white;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #000000;
height: 140px;
width: 848px;
overflow: hidden;
text-align: right;
}

#navigation {
height: 15px;
width: 838px;
padding-left: 10px;
font-size: 9pt;
background-color: #DFDFDF;
text-align: left;
}

#content {
width: 808px;
text-align: left;
font-size: 10pt;
font-style: normal;
padding: 20px;
background-image: url(…/images/bg1.jpg);
background-position: bottom center;
background-repeat: no-repeat;
background-color: white;
}

#footer {
padding-left: 10px;
height: 10px;
width: 838px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
background-color:gray;
color:white;
font-size: 7pt;
}

#footer a:link {
color: white;
}

#border_bottom {
clear: all;
height: 8px;
width: 858px;
background-image: url(…/images/rand_u.png);
background-position: left top;
background-repeat: no-repeat;
}

.border_l_r {
margin-right: 8px;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #000000;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #000000;
}[/code]

und html:

[code]

...

     <div id="navigation" class="border_l_r">
             ...
     </div>

     <div id="content" class="border_l_r">
             ...
     </div>

     <div id="footer" class="border_l_r">
             ...
     </div>

     <div id="border_bottom"></div>

[/code]

michi7x7 · 4. Dezember 2008 um 17:50

So wie es ausschaut, brauchst du eig. gar keine border-Divs, da würde wohl border: 1px solid red reichen? Das würde schon mal den Fehlerhaften Rahmen ausschließen…mom, ich mach mal ein Beispiel

LeeXX · 4. Dezember 2008 um 17:54

ok, sorry das hätte ich noch erwähnen sollen. der rote rahmen is nur zu testzwecken da :-).
mein ziel is eig, rechts neben dem “left”-div eine grafik als rand zu haben. den sieht man auch auf dem ie-bild, nur dass da nur ca 15px davon angezeigt werden, und die oberhalb des “left”-divs, obwohl sie auf der selben höhe sein sollten…

edit:
@ hoffmann:
ie is version 6, normal. also kein quirksmodus…
das mti den rahmne probier ich mal, danke.

hoffmann · 4. Dezember 2008 um 18:03

Tja, interessant, beim MSIE funktioniert doch offenbar das
float #left nicht, das wird also nicht aus dem normalen
Textfluß entfernt. Der firefox macht es offenbar, wodurch das
rot gerandete #main zu einem Strich zusammenschnurrt - ist
also offenbar ein Fehler vom MSIE. Da ist wohl bekannt, das der
float und clear noch nie so ganz im Griff hatte…

michi7x7 · 4. Dezember 2008 um 18:08

So, sollte auch im IE6 funzen:

<!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" xml:lang="en" lang="en">

<head>
	<title>unbenannt</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style type="text/css">
		body { background-color: grey }
		
		#main {
			width: 800px;
			margin: 20px auto 0 auto;
			background-color: white;
		}
		
		#header, #footer {background-color: black; height: 20px }
		#content {height: 600px; }
		#content {margin: 0 5px 0 5px }
		#border_t, #border_b {height: 5px; background-color: red; }
		#border_l, #border_r {width: 5px; height: 640px; background-color: red; }
		#border_l {float: left}
		#border_r {float: right}
		#border_b {clear: both; }
	</style>
</head>

<body>
	<div id="main">
		<div id="border_t"></div>
		<div id="border_l"></div>
		<div id="border_r"></div>
		<div id="container">
			<div id="header"></div>
			<div id="content">Hallo :D</div>
			<div id="footer"></div>
		</div>
		<div id="border_b"></div>
	</div>
</body>

LeeXX · 4. Dezember 2008 um 18:10

ok, hab das problem mit der höhe unten in den griff bekommen. ie hat für den unteren rand-div height: 8px; ignoriert. warum auch immer. hab jetzt overflow: hidden; reingesetzt und jetzt stellt ie den unteren rand richtig dar…
aber das die div “left” und div “border_right” nicht nebeneinander stehen versteh ich nicht…

LeeXX · 4. Dezember 2008 um 18:35

danke michi,
dein code funktioniert soweit schon, aber leider nicht, wenn der “border_r”-div eine dynamische höhe hat. wie gesagt, die höhe des “container”-divs ändert sich dadurch, dass sich die hähe des “content”-divs ändert. nun soll sich die höhe des “border_r”-divs genau gleich ändern. height: 100%; funktioniert überhaupt nicht…

michi7x7 · 4. Dezember 2008 um 18:37

height: 100% funktioniert bei gefloateten DIVs nicht…
naja, ich schau mal

//EDIT: Hmm… Habs noch nicht geschafft…

LeeXX · 4. Dezember 2008 um 19:11

hmm, stimmt. das scheint wohl das letzte problem zu sein. hab grade auch schon ne stude gegoogled, aber da gibts offensichtlich keine wirkliche lösung…

danke für deine bemühungen, wäre spitze wenn du noch ne lösung dafür finden würdest!!!

ch weiß css sehr zu schätzen, aber sowas geht einem doch echt auf die eier ! warum geht das mit den dynamischen 100% nicht???

naja, danke nochmal.

MFG LeeXX

michi7x7 · 4. Dezember 2008 um 19:14

das geht mit gefloateten Elementen einfach nicht, weil float nur für ein Umfließen sorgen soll

hoffmann · 4. Dezember 2008 um 19:18

100% von was eigentlich?

Wenn das ein Rahmen um anderen Inhalt sein soll, kann man
einfach das div um den anderen Inhalt legen, das expandiert
dann automatisch auf die Größe des Inhaltes.
100% bezieht sich ja auf die Größe des Elternelementes, aber
auch nur, wenn das wirklich festliegt und nicht wieder durch den
Inhalt bestimmt wird. Da float ein Element aus dem normalen
Textfluß entfernt, fehlt da natürlich auch noch der Bezug zu einem
Elternelement.
Bei relativen Angaben müssen die Dinge schon irgendwie in
Beziehung zueinander stehen. Von solchen Beziehungen gibt
es in CSS vor allem die zum Elternelement (mal abgesehen von
den Eigenschaften von display zur Simulation von Tabellen, die
stellen auch komplexere Bezüge her).

LeeXX · 4. Dezember 2008 um 19:38

danke, danke, danke hoffmann!!!

Mal wieder den Wald vor lauter Bäumen nicht gesehen

Genau das hab ich schonmal bei nem älteren Projekt angewendet… aber in nem anderen Zusammenhang.
Also, jetzt funktioniert das ganze, wenn ich den „border_r“-div einfach um den „left“-div leg’.
dann für „border_r“ breite des „left“-divs + breite des rands. und schon geht das… komisch nur, dass es im ff erst funktioniert, wenn man „overflow: hidden;“ für „border_r“ einstellt… jemand ne ahnung woher das kommt? aber is auch egal, hauptsache es funktioniert

mfg, LeeXX