✔ Container nicht zentriert im IE

M

mita1982

Erfahrenes Mitglied
Hallo leute,

arbeite grade an einem Projekt für einen Freund.
bin auch fast fertig wenn nicht der IE, im standartmodus 8, und 7 mich verrükt machen würde.

Bitte schaut euch das an.

Hier mal der Link:

http://www.vrc-racing.com

in Chrome, Firefox und Opera jeweils aktuelle Version scheint der Container in der Mitte zu sein aber nur in IE nicht.

Die Flaggen ware vorher über den Header aber das hat zu viel platz eingenommen so habe ich dann die flags

innerhalb des Haputcontainers #main einen div #flgas
mit postion: absolute etc.

hier mal ein auszug css:

HTML: 
div#flags {
	position: absolute;
	margin-top: 5px;
	margin-left: 5px;
	width: 74px;
	height: 26px;
	z-index: 99;
}

(...)

div#main {
	text-align:left;
	margin: 0px auto;
	width: 720px;
	height:auto;
}
div#top {
	float:left;
	width: 720px;
	height: 10px;
	background-image: url(../images/top.png);
	background-repeat: no-repeat;
}

div#center {
	position:relative;
	float:left;
	width:720px;
	background-image: url(../images/main.png);
	background-repeat:repeat-y;
}



Hier der htmlcode:

<body>
<div id="main" ">
<div id="top"></div>
<div id="center">
<div id="Seite" >
<div id="flags"><a href="/index.php?lang=1"><img class="imgborder" src="images/ger.png" alt="ger"/></a> <a href="/index.php?lang=2"><img class="imgborder" src="images/uk.png" alt="uk"/></a></div>  
<div id="header" >
...

Ich bitte um eure Hilfe.. Body ist selbstverständlich mit text-align:center;
 
Hi,

entferne hier mal das rotmarkierte Anführungszeichen:
Code: 
<div id="main" ">


mfg Maik
 
Vielen vielen Dank...

man dass ich das selber nicht gesehn habe.. habe alle möglichen postion:relative und float:left; hizugefügt rausgenommen etc.

Flaggen komplett raus etc. pp aber dieser " nicht gesehn...

DANKE..

kannste mir noch sagen, warum beim ie 7 Standart modus die flaggen neben dem Main container sind?

hier nochmal die CSS:



Code: 
div#flags {
	position: absolute;
	margin-top: 5px;
	margin-left: 5px;
	width: 74px;
	height: 26px;
	z-index: 99;
}

nach meinem verstädnis ist doch postion absolute absolute und hat nix mit dem Div #Seite zu tun oder?
also müsste er margin-top: 5px von oberen Rand des Browsers machen tut er aber nicht sondern vom div Seite..
 
Formatier mal #Seite mit position:relative, damit sich darin die absolute Positionierung von #flags relativ verhält.

mfg Maik
 
tut sich nichts..

irgendwie verstehe ich den unterschied zwischen realtive und absolute irgedwie nicht..

und da gibt es noch float wann macht man das float wann nicht?

Aber das mit dem postion:relative ; bei#seite hat nichts gebracht..

kann ich nciht den div#flaggs außerhlb des div#main im html schreiben und dann trozdem zentriert, links oben mit position absolute machen
 
Zuletzt bearbeitet:
HI,
also float entspricht dem Umfließen eines DTP-Programmes. Vielelicht verdeutlicht dir der Vergleich das Ganze besser. Du hast doch bestimmt schon mal in einem Magazin gesehen das ein Bild komplett von Text umgeben ist. Wenn du kein Umfließen einstellst dann geht der Text über das Bild drüber. Bei CSS würde das Bidl bis an das Ende des Textes verschoben.
Auch wenn der Vergleich etwas im Endergebnis hinkt verstehst du den Sinn vielleich tetwas besser.
Hier auch nochmal eine Seite mit Erklärungen und Beispielen.

Absolut und Relative verändern die Abhängigkeit eines Elementes vom Elternelementen. Heißt Absolut bezieht sich nicht mehr auf das übergeordnete Element sondern direkt auf das HTML-Element.
Der Zeilenfluss geht also verloren.
Also mit der relativen Positionierung habe ich bezüglich des Erklärens so meine Probleme. Aber der Zeilenfluss bleibt erhalten. Heißt das positionierte Element orientiert sich an seinem Elternelement.

Viele Grüße
 
Zuletzt bearbeitet:
Meines Erachtens sollten sich die Flaggen auch ohne die absolute Positionierung an der gewünschten Stelle ausrichten lassen.

Ich hab hier im Büro leider nicht den IE7 u. IE8 zur Verfügung, um mir das in ihnen näher anzuschauen.

Dazu kann ich mich erst näher äußern, wenn ich zuhause bin.

mfg Maik
 
Ich habe auch nur IE 8, aber wenn man f12 klickt kann man zwichen Standard 8, 7 und Quirks umschalten...

wenn ich die Flaggen relative psitioniere verschiebt er die Bilder des Headers nach unten.. ich will aber dass es über die Headerbilder ist. deshalb auch der z-index:99.

@Jan-Frederik Stieler:
Das mit relative verstehe ich immer noch nicht..

Wenn müssen nicht alle Divs innherhalb des divs# main position relative und float:left;. damit sie sich an die anderen divs orientieren (also die margins).

hier mal das boxmodell:

http://img13.imageshack.us/img13/3008/boxes.gif
 
Zuletzt bearbeitet:
Sodele, bin daheim angekommen, und nun im Besitz meiner "Arbeits- u. Testumgebung" :)

IE7 positioniert bei mir die Flaggen wie gewünscht, wenn die beiden margin-Regeln durch die Positionsangaben top und left ersetzt werden:

CSS: 
div#flags {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 74px;
	height: 26px;
	z-index: 99;
}

Vielleicht werden dir die Zusammenhänge von absoluter und relativer Positionierung anhand des Beispiels http://de.selfhtml.org/css/eigenschaften/anzeige/position.htm klarer.

mfg Maik
 
Danke vielen Dank..

Aber warum ist das so?

warum statt margin-top top? was ist denn standartkonform?

Darf ich fragen wie Du das getestet hast? Also welches tool du die Flaggen positioniert hast..
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück