Positionierung
Lisa Marten
- css
hallo..
ich habe folgenden html code:
<head>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="all">
<div id="kopf">banner</div>
<div id="menu">menu</div>
<div id="inhalt">inhalt</div>
<div id="stats">stats</div>
</div>
</body>
</html>
und dazu folgende css datei:
body {
width:100%;
height:100%;
padding:0;
margin:0;
}
#all {
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
height:100%;
width:100%;
padding:0;
margin:0;
}
#kopf {
position:fixed;
top:0px;
left:0px;
background:#000000;
width:100%;
height:100px;
}
#menu {
position:absolute;
top:100px;
left:0px;
background:#006666;
height:300px;
width:150px;
}
#inhalt {
position:absolute;
left:150px;
right:150px;
top:100px;
background:#990000;
height:100%;
width:auto;
}
#stats {
position:absolute;
right:0px;
top:100px;
background:#999900;
height:300px;
width:150px;
}
Im Netscape sieht es genauso aus, wie ich es haben will. Im IE allerdings, ist der Inhalt zu lang und zu schmal.. Kann mir einer sagen, woran das liegt?
hallo
du verschachtelst div's und arbeitest mit Prozentangaben in Höhe und Breite. Das mag der IE überhaupt nicht, in Prozentrechnung ist er eine glatte Null.
Problem ist, dass die Browser den Begriff "Breite" und "Höhe" ganz unterschiedlich definieren. Beim einen Browser ist die Breite LüP (Länge über Puffer, wie die Bahner sagen würden), beim anderen Browser kommt der Puffer extra.
Oder um mit CSS zu sprechen: margin, border, padding und width ergeben bei dem einen Browser die Summe X, bei dem anderen die Summe Y.
LG Kalle
hallo
du verschachtelst div's und arbeitest mit Prozentangaben in Höhe und Breite. Das mag der IE überhaupt nicht, in Prozentrechnung ist er eine glatte Null.
Und da kann man nichts gegen machen? Es muss doch möglich sein, eine Lösung dafür zu finden. Mit Pixelangaben kann ich j auch nicht arbeiten, weils ja variabel bleiben soll bei unterschiedlichen Auflösungen..
hallo
Und da kann man nichts gegen machen? Es muss doch möglich sein, eine Lösung dafür zu finden. Mit Pixelangaben kann ich j auch nicht arbeiten, weils ja variabel bleiben soll bei unterschiedlichen Auflösungen..
Probiere mal rum, indem du jedem der verschachtelten div einen border:1px solid #000 und einen Textinhalt gibst. Da kannst du sehen, wie unterschiedlich die Browser Größe und Abstand handhaben.
Ich habe den Gott IE immer mal wieder gnädig stimmen können mit solchen Gebeten wie
<!--[if IE]><style type="text/css">
@media screen {
html, body {
height: 100%; overflow-y: hidden;
}
#scrollbereich {
width:100%; height: 100%; overflow: auto; padding-left:120px;
}
#inhalt {
position: static;
}
}
</style><![endif]-->
Habe inzwischen aber die Faxen dicke und verwende the good old <table>. Das kann jeder Browser.
Kalle
Hallo Kalle,
Habe inzwischen aber die Faxen dicke und verwende the good old <table>. Das kann jeder Browser.
Wieso denn das?
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss
Gruß Gernot