top:0px und zentrieren kombinieren?

1 Pit

Hallo,
ich brauche Eure Hilfe!

Ich möchte eine Header-Grafik mit Null Abstand ganz nach oben haben und gleichzeitig zentrieren.
Es sollte sowohl in Firefox als auch im Internet Explorer funktionieren.
Bisher kriege ich das immer nur in einem Browser hin und im anderen sieht es wieder merkwürdig aus.

So sieht mein aktueller Lösungsansatz aus

<div style="position:absolute; top:0px; left:0px; width:100%" >
<div style="width:962px; padding:0; margin:auto">
<img src="de2.jpg" width="962" border="0">
</div>
</div>

top:0px; ist mir sehr wichtig
aber left:0px; ist ja falsch! Hier will ich ja quasi align=center

Vielen Dank für Antworten
Grüße
Pit

2 Jörg Kruse

Hallo Pit,

dein Lösungsansatz ist schon richtig - beim Internet Explorer 6 kommt es allerdings noch auf die passende Doctype-Angabe am Anfang des HTML-Dokumentes an. Wenn diese z.B. fehlt, befindet sich der IE 6 nicht im standardkonformen Modus und zentriert deswegen nicht mit dem korrekten margin:auto, sondern - genauso wie der IE 5 unabhängig von der Doctype-Angabe - nur über text-align:center. Also entweder so:

<div style="position:absolute; top:0px; left:0px; width:100%; text-align:center" >
<div style="width:562px; padding:0; margin:auto">
<img src="../../archiv/motivsuche.jpg" width="562" height="100" border="0">
</div>
</div>

... oder die Doctype-Angabe wechseln / hinzufügen (was allerdings nichts bei der Version 5 des Internet Explorers ausrichtet)

3 Pit

Ich danke sehr herzlich für Deine Mühe.
Gruß Pit

nach oben

top:0px und zentrieren kombinieren?

Beitrag schreiben (als Gast)

Verwandte Themen