nicht angemeldet
Float und resultierende Gesamtbreite (IE vs Firefox)
Hallo allerseits!
Ich möchte gerne eine Website mit 2 getrennten Bereichen erstellen:
1. ganz links: eine Navigationsleiste
2. zentriert: den eigentlichen Seiteninhalt
Meiner Überlegung nach sollte sich dies recht einfach mittels eines "float:left" div-Blocks und eines anschließenden mit "margin:auto" div-Blocks realisieren lassen.
Klappt wunderbar bei Firefox, jedoch beim IE (V6 & V7) schaut die Sache leider ander aus. Dieser nimmt nämlich scheinbar nicht die Mitte des Gesamtbildschirms sondern die Mitte des noch verfügbaren Platzes, was natürlich zu einem gänzlich anderem Layout führt.
Hier ein kurzes Beispiel zur Verdeutlichung:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
div#content {
text-align:center;
}
div#sidebar {
float:left;
width:24%;
margin: 0px;
padding: 0px;
border:medium solid FF0000;
}
div#text {
width:50%;
margin:auto;
border:medium solid FF0000;
}
</style>
</head>
<body>
<div id="content">
<div id="sidebar">
Ein links floatender Bereich<br>
24% der Gesamtbreite
</div>
<div id="text">
<p>Ein mittig ausgerichteter Textblock<br>
50% der Gesamtbreite</p>
<p>... aber nicht im IE ???</p>
</div>
</div>
</body>
</html>
So wer macht jetzt was falsch?
Ich, in meinem Verständnis von "floats" und "margin:auto"?
Oder einer der beiden browser (IE bzw. Firefox)?
Und am wichtigsten von allem:
Kann ich den Fehler beheben und wenn ja wie?
Mit freundlichen Grüßen und Dank im Voraus,
Sera
P.S.: Ich hab natürlich schon versucht im Internet bzgl. dieses Problems was zu finden, aber leider das eigentliche Kernproblem offenbar nicht richtig spezifizieren können und bin deshalb auch wohl nicht fündig geworden. Aus dem gleichen Grund ist auch wohl der Threadtitel nicht ganz glücklich gewählt.
-
Hallo,
der IE machts falsch. (Was fragst Du noch? *kopfnussgeb*)
Du koenntest dem float ein position:absolute verpassen und es so aus dem Fluss nehmen. Dann ueberlagerts aber den Container fuer den Content, wenn die Breite des Viewports nicht mehr ausreicht.
Oder Du baust auf der anderen Seite noch so ein Navigationsding nur transparent.
Ich finde beide Loesungen nicht grad berauschend aber spontan faellt mir nichts besseres ein.
-
Vielen Dank für Eure Antworten!
Ich denke ich hab jetzt eine für mich akzeptable Lösung gefunden:
Anstatt ein simples "margin:auto" im Content-bereich zu setzen , weise ich nun "margin-left" und "margin-right" einen etwas höheren Prozentwert zu als die Navigationsleiste aufweist.Das scheint ganz gut zu klappen, auch wenn's ärgerlich ist, daß dieselbe Information (Breite der Navigationsleiste) nun 2 x (bzw. eigentlich sogar 3 x) angeführt werden muss.
Nochmals danke für Eure Mithilfe - so ein output von außen, ist einfach unschlagbar, wenn man in einer totalen Sackgasse angelangt ist.
Servus,
Sera
-
-
Moin!
Klappt wunderbar bei Firefox, jedoch beim IE (V6 & V7) schaut die Sache leider ander aus. Dieser nimmt nämlich scheinbar nicht die Mitte des Gesamtbildschirms sondern die Mitte des noch verfügbaren Platzes, was natürlich zu einem gänzlich anderem Layout führt.
Es könnte auch der Double Margin Bug sein (warum der im IE7 auftreten soll, will mir nicht erklärlich scheinen, vielleicht setzt du durch eine Unachtsamkeit den Quirks-Mode).
Generell hat der IE6 mit Margins so seine Probleme. Da hilft eigentlich nichts anderes, als per Conditional Comment ein Extra-Stylesheet zu laden, in dem man dem IE6 (der IE7 ist in dieser Hinsicht friedlich - sollte er zumindest sein) spezielle Formatierungen vorsetzt, die ihn zur Mitarbeit überreden. Beim Double Margin Bug wäre beispielsweise denkbar, einfach nur die Hälfte der Marginbreite anzugeben - was allerdings bei margin:auto schwierig wird.
Alternativ gibts aber gegen die diversen IE6-Bugs auch andere Abhilfen. Übliche Methoden sind "position:relative" oder "height:1%". Recherchiere mal, z.B. hier: http://www.positioniseverything.net/explorer.html
- Sven Rautenberg
--
"Love your nation - respect the others."