✔ Div zentrieren im FF

[NoGFX]

Ich habe ein Problem mit dem erstellen eines Div Layouts in Firefox, wäre nett wenn mir dabei jemand helfen könnte. Das wird so wie es sein soll im IE dargestellt, nur FF macht eben Probleme.

Eigentschaften der Div's:

<style>
body { 
text-align:center;
}
#head_test {
background-color:#009999;
width:500px;
}
#header_test1 {
text-align: left;
}
</style>

HTML Code:

<div id="head_test"><div id="header_test1">Test</div></div>

Das ganze soll also eine Zentrierte Div Tabelle darstellen in der sich ein weiterer Div Befehl befindet der sich links an dem bereits zentrierten Div befindet. Problem ist das FF scheinbar das text-align: left auf alles überträgt und somit nichtsmehr zentriert ist.

Hat jemand vielleicht eine Lösung wie man dieses Problem umgehen kann?

 

[AKrebs70]

Hallo!

Mache es doch so:

   <div align="center"><div id="head_test" align="center"><div id="header_test1">Test</div></div></div>

Axel

 

[27apricot]

Hallo,

gib dem äußeren DIV "#head_test" das Attribut
margin:0 auto;

das bedeutet: oben und unten 0 Pixel Rand (bzw. kannst du natürlich jede beliebige Angabe machen) und rechts und links automatischer Rand, was von allen Browsern als zentrierte Ausrichtung interpretiert wird. Dadurch sparst du dir auch die Angabe des text-align im inneren DIV.

Schöne Grüße
27apricot.

 

[NoGFX]

Mh ja die Methode mit dem margin scheint zu klappen, nur jetzt ist ein neues Problem da, kein Weltbewegendes doch wäre gut wenn man es trotzem noch irgendwie "beheben" könnte. Egal was ich nun eingebe er macht mir immer einen oberen Rand, die Seite soll allerdings keinen oberen Rand besitzen.

 

[27apricot]

Gib mal an den Anfang deines CSS-Codes folgende Zeile ein:
* { border:0; padding:0; margin:0; }

Durch das Sternchen beziehen sich die Angaben auf alles, einschließlich dem html- und dem body-Tag. Das ist das einzige, was mir einfällt, da du ja dem DIV einen oberen Rand von "0" gegeben hast.

Schöne Grüße,
27apricot

 

[NoGFX]

Wer kam eigentlic auf die Idee verschiedene Browser zu erstellen, bah da macht der FF nu was er soll, nu meckert IE aber rum und scheint meinen float: right; zu ignorieren...

Ich sollte mir mal nen Buch oder sonstiges für nen bisschen CSS Training anschaffen...

 

[27apricot]

Hallo nochmal,

poste mal ein bisschen mehr von deinem Code. Das Problem mit dem float:right; kenne ich, wenn das nachfolgende DIV 100% Breite hat, für den doofen IE muss ich immer 96% angeben. Dann isses zwar zu schmal, aber wird wenigstens daneben angezeigt.

Schöne Grüße,
27apricot.

 

[NoGFX]

Naja hab's jetzt etwas anders gelöst, ich habe das mit dem float:right nun erstmal rausgenommen und stattdessen den links nebenliegenden Div einfach padding-right:45px zugewiesen, hat so ziemlich die gleich Wirkung. Aber danke für den Tipp, werd ich mir merken

 

[drathy]

Hallo!

Ich habe ein ähnliches Problem mit der zentrierten Positionierung einer Tabelle. Ich dachte ich poste das mal hier, bevor ich einen neuen Thread zu dem Thema eröffne. Folgender Code in einer externen css-Datei wird für die Positionierung der Tabelle verwendet:

.blockMain           {
width:1004px;
border-style:none;
height:642px;
position:absolute; 
top:50%; 
left:50%;
margin-top:-321px;
margin-left:-502px;}

Die zu zentrierende Tabelle gehört logischerweise der Klasse "blockMain" an.

Nun Folgendes: Im IE und Safari wird die Tabelle, sprich mein eigentliches Layout bei höheren Auflösungen korrekt zentriert angezeigt, nur der Firefox hat irgendwie Probleme damit...folglich erscheint das Layout oben links in der Ecke...

Kann mir jemand sagen, wo das Problem liegt bzw. liegen könnte
Ich habe bereits einige verschiedene Lösungsansätze getestet, wie auch den in diesem Thread, leider ohne Erfolg.