  |
| Autor |
Nachricht |
p3l3
Stammuser []
Anmeldung: 11.03.2005
Beiträge: 41
Wohnort: München
|
 Verfasst am: 22.09.2006, 23:34 Titel: IE zeigt DIV falsch an |
 |
|
Also so sieht es im Firefox 1.5.0.7 aus
Und so im IE6
Das ist der Quelltext
| Code: |
<body>
<div style="position:absolute; width: 100%; height: 80px; left: 0px; top: 0px; z-index:3; background-color:#008800;">
<img alt="LOGO" title="LOGO" src="./images/menu/ecke.jpg" width="130" height="80" />
</div>
<div style="position:absolute; width: 130px; height: 2px; left: 0px; top: 80px; z-index:4; background-color:#008800;"></div>
<div style="position:absolute; width: 100%; height: 2px; left: 0px; top: 80px; z-index:3; background-color:#000000;"></div>
<div style="position:absolute; width: 130px; height: 26px; left: 0px; top: 82px; z-index:4; background-color:#008800;"></div>
<div style="position:absolute; width: 2px; height: 26px; left: 130px; top: 82px; z-index:4; background-color:#000000;"></div>
<div style="position:absolute; width: 100%; height: 26px; left: 0px; top: 82px; z-index:3; background-color:#E02828;"></div>
<div style="position:absolute; width: 130px; height: 2px; left: 0px; top: 108px; z-index:4; background-color:#008800;"></div>
<div style="position:absolute; width: 26px; height: 2px; left: 132px; top: 108px; z-index:4; background-color:#E02828;"></div>
<div style="position:absolute; width: 100%; height: 2px; left: 0px; top: 108px; z-index:3; background-color:#000000;"></div>
<div style="position:absolute; width: 130px; height:100%; max-height:100%; left: 0px; top: 0px; z-index:2; background-color:#008800;"></div>
<div style="position:absolute; width: 2px; height:100%; max-height:100%; left: 130px; top: 0px; z-index:2; background-color:#000000;"></div>
<div style="position:absolute; width: 26px; height:100%; max-height:100%; left: 132px; top: 0px; z-index:2; background-color:#E02828;"></div>
<div style="position:absolute; width: 2px; height:100%; max-height:100%; left: 158px; top: 0px; z-index:2; background-color:#000000;"></div>
<div style="position:absolute; left: 160px; top: 110px; right:0; bottom:0; z-index:1; background-color:#CCCCCC; overflow:auto;" align="center">
<?
$i=0;
while($i<30)
{
$i++;
?>
<p>test <? echo $i; ?></p>
<?
}
?>
</div>
</body>
|
Ist alles momentan noch Quick & Dirty, wird aber noch alles in CSS-Dateien ausgelagert und sauber gecoded. Aber mir geht's momentan nur um das Gesammt-Design.
Kann mir bitte jemand helfen?
PS: die PHP-Schleife ist nur drin um den overflow zu testen!
_________________
Wenn Architekten Ihre Gebäude so bauen würden, wie Programmierer ihre Programme schreiben, dann könnte ein Specht ganze Städte vernichten. (Murphy) 
|
|
| Nach oben |
|
 |
sejuma
Power-Poster []
Anmeldung: 08.05.2006
Beiträge: 507
|
| Verfasst am: 23.09.2006, 06:31 Titel: |
|
|
Zunächst solltest du den Quirks rausnehmen und einen Doctype eingeben. Denn damit bekommt beim bisherigen Code dann auch der FF Probleme.
Bin mir nicht sicher, ob du die vielen divs überhaupt benötigst.
Eigentlich sollten 4 (plus ein umfassender wegen der Längenanpassung) reichen. Und falls doch mehr benötigt werden, kannst du die restlichen da reinsetzen. Ich hab mal den Code stark vereinfacht, denke aber das kommt so hin:
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>TEST</title>
<style type="text/css">
</style>
</head>
<body>
<div style="height: 100%; background-color:#008800;">
<div style="width: 100%; height:100%; 80px; background-color:#008800;">
<img alt="LOGO" title="LOGO" src="./images/menu/ecke.jpg" width="130" height="80" />
</div>
<div style="float:left; width: 13.4%; background-color:#008800;">test<p>
test</p>
<p>test</p></div>
<div style="float:left; width:86.4% ; height:100%; border-left: 2px solid black; border-top: 2px solid black; background-color:#ff0000;">
<div style="margin-left:20px;margin-top:20px; border-left: 2px solid black; border-top: 2px solid black; background-color:#CCCCCC; overflow:auto;" align="center">
test<p>
test</p>
<p>test</p>
</div>
</div>
</div>
</body>
</html>
|
|
|
| Nach oben |
|
|
p3l3
Stammuser []
Anmeldung: 11.03.2005
Beiträge: 41
Wohnort: München
|
| Verfasst am: 23.09.2006, 12:38 Titel: |
|
|
Also Doctype ist deklariert hab ich nur nicht mit hierher kopiert.
Deine Version ist schon mal ned schlecht.
Allerdings hab ich jetzt das Problem das er nicht von Anfang an das ganze Fenster ausfüllt. Geht zwar jetzt auf beiden Browsern aber noch nicht ganz richtig
FF
IE
weitere Vorschläge?! 
LG
Peter
_________________
Wenn Architekten Ihre Gebäude so bauen würden, wie Programmierer ihre Programme schreiben, dann könnte ein Specht ganze Städte vernichten. (Murphy)
|
|
| Nach oben |
|
|
sejuma
Power-Poster []
Anmeldung: 08.05.2006
Beiträge: 507
|
| Verfasst am: 23.09.2006, 13:00 Titel: |
|
|
Dann gib dem äußeren div eine fixe height, z.B. 550px und lass den header left floaten.
Der graue div wächst mit dem Text, oder auch ihm eine feste Höhe zuweisen.
Kleiner Schönheitsfehler: Im FF fehlen in grünen Bereich links unten 1-2 px.
|
|
| Nach oben |
|
|
|
|
