Container nicht zentriert im IE @ tutorials.de: Tutorials, Forum & Hilfe

mita1982 · 28.04.10 13:03

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-Code:

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;

Maik · 28.04.10 13:09

Hi,

entferne hier mal das rotmarkierte Anführungszeichen:

Code :

1	<div id="main" [B][COLOR="Red"][SIZE="2"]"[/SIZE][/COLOR][/B]>

mfg Maik

mita1982 · 28.04.10 13:22

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..

Maik · 28.04.10 13:27

Formatier mal #Seite mit position:relative, damit sich darin die absolute Positionierung von #flags relativ verhält.

mfg Maik

mita1982 · 28.04.10 13:33

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

**Jan-Frederik Stieler** · 28.04.10 13:45

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

Maik · 28.04.10 13:45

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

mita1982 · 28.04.10 13:59

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

Maik · 28.04.10 15:06

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:

Code 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/eigenscha...e/position.htm klarer.

mfg Maik

mita1982 · 28.04.10 15:40

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..

Maik · 28.04.10 15:45

Frag mich nicht, warum IE7 hier mit den margin-Regeln nicht zurechtkommt, aber ich hab mir grundsätzlich angewöhnt, bei absoluter Positionierung die dazugehörigen Positionsangaben zu nutzen. Damit bin ich in der Vergangenheit browserübergreifend immer gut gefahren

Wie ich getestet habe? Ganz einfach: den Quellcode (HTML + CSS) in einer meiner VMs (Virtual Machine = Virtueller PC) lokal gespeichert, die den IE7 enthält (für IE8 hab ich eine weitere VM), und besagte Änderungen im Stylesheet vorgenommen

mfg Maik

mita1982 · 28.04.10 15:52

ne VM hätte ich auch gerne auf meinen Laptop geht das nicht weil der CPU kein VM unterstützt.

Danke für all deine Hilfe..

kannst du dir mal das Boxmeodell was ich verlkinkt habe anschauen und mir sagen ob ich überall innerhalb des #main position relative, und float:left machen muss/sollte?

Außerdem Du hast ja behaputet es geht auch ohne absolute positionierung der Flaggen wie soll das gehen?

Maik · 28.04.10 16:18

Sorry, in deinem nicht übersichtlich formatierten HTML-Code ist mir heute Mittag nicht aufgefallen, dass in #header einzelne <img>-Elemente eingebunden sind, die dynamisch gewechselt werden. War im Glauben, da wäre ein Hintergrundbild enthalten.

Somit hat sich meine Aussage gerade eben auch in Luft aufgelöst

Wozu du eine float-Regel für die Blöcke #top, #center, #Seite, #content, #header, #divNavi vorsiehst, kann ich nicht nachvollziehen, denn keines von ihnen kann / wird bedingt durch ihre Breitenangaben vom nachfolgenden Element umflossen.

Übrigens hat ein Conditional Comment innerhalb eines Stylesheets nichts verloren, und bleibt daher dort auch wirkungslos:

Code :

<!--
[if lte IE 6]>#extraImage {
    bottom: 0px;
    right: 0px;
    z-index: -100;
    height: 1xp;
    width: 1xp;
}
<!
[
endif
]

Stattdessen wird er im Anschluß des Stylesheets angegeben (siehe http://de.selfhtml.org/css/layouts/b...tm#alternative), und auch ohne diese Zeilenumbrüche, dafür aber mit korrekter Syntax - also:

Code :

1
2
3

[B]<!--[if lte IE 6]>[/B]
 ... 
[B]<![endif]-->[/B]

mfg Maik

mita1982 · 28.04.10 18:14

Du hast es ja echt drauf..
*neidischihbin*

bei mir ist generell das Problem wann ich die position bzw. float ansetzen soll.. und wie ich generel das positionieren der Divs berwerkstelligen soll.. also mit padding oder mit margin zu arbeiten.

Schade, dass es da nicht eine Art styleguide oder Vorlage gibt. Wann setze ich klassen ein wann ids.. das sind meine generelle Probleme.

Zu den oben erwähnten divs: wir haben in der Schule mal einen Webshop programmiert und da haben wir nebeneinanderliegende Divs gehabt. dan haben wir float :left genommen haben abber bei jedem div position:relative und float:left angewendet.. Daher vieleicht. Kannst Du wenigstens das Modell nachvollzeihen warum ich soviele Divs verwenden musste? Oder kann man das auch ein wenig einfacher gestalten?

Apropos im Quirksmodus ist hat nur der Div #top einen Abstand zu Center mit welchen Bug ist das zu erklären?

Maik · 28.04.10 18:19

Im "Quirks Mode" folgt die IE-Familie nicht den CSS-Spezifikationen, und interpretiert u.a. das Box-Modell nicht.

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Div-Zentriert funktioniert nicht

In Container geladener MC immer zentriert darstellen

zentriert ist nicht zentriert?

Tabelle nicht zentriert

Im IE zentriert im FF nicht

Stichworte

E-Mail:

Abonnieren Abbestellen