✔ Page zentrieren - IE ja :: FF nein

[noise]

Hallo Leute,

bitte bitte steinigt mich nicht. Ich hab mir schon die Finger wund gesucht, aber leider nix passendes gefunden.
Wie das Topic schon sagt, meine page ist im IE zentriert (so soll es sein) aber diesmal mag zur Abwechslung der FF nicht.

Hier ein Teil aus meinem CSS

body {
	font-family: verdana;
	font-size: 13px;
	color: #000000;
	text-align: center;
}

#container {
	/*background-color: blue;*/
	border: 1px solid #000000;
	text-align: left;
	width: 760px; 
	overflow: hidden;
	padding: 0px;
	position: relative;
	margin: 0 auto;
}

Hier der Aufbau im HTML

<div id="container">
	<div id="head">
		<div id="top_logo_vito"> 
		</div> <!-- top_logo_vito -->
		<div id="top_right">
			<a class="nav1" href="index.php?id=unternehmen"></a>
			<a class="nav2" href="index.php?id=unternehmen"></a>
			<a class="nav3" href="index.php?id=produkte"></a>
			<a class="nav4" href="index.php?id=sortiment"></a>
			<a class="nav5" href="index.php?id=unternehmen"></a>
			<a class="nav6" href="index.php?id=unternehmen"></a>
			<a class="nav7" href="index.php?id=unternehmen"></a>
		</div> <!-- top_right -->
	</div> <!-- head -->
	
	<div id="main">
	
		<div id="main_top">
		
		</div><!-- main_top -->		
    	
   		<div id="main_content">		
		blub blub
		</div><!-- main_content -->
				
	</div><!-- main -->
	
	<div id="main_bottom">
	
	</div><!-- main_bottom -->

</div><!-- container -->

Was anderes sollte nicht für die positionierung verantwortlich sein.. hoff ich

Live: http://www.vito.at/vorschlag_jan06/

Aja.. noch eine Bitte.. gebt eure Meinung zum Design bitte gleich mit ab

grüße..

 

[sadi]

Hallo auch,
um das Ganze zu realisieren, ist text-align im body tag nicht die beste Wahl, da dieser Befehl sich nur auf Block-Elemente anwenden lässt. Der body-tag ist kein solches Element. Du solltest das container-div direkt positionieren.

<div style="position: absolute; left: 50%; width: 760px; margin-left: -380px;">
Dein Inhalt
</div>

Die Idee dahinter ist wiefolgt. Von dem Div wird standardäßig die linke obere Ecke des Randes zur Positionierung verwendet. Du verschiebst das Div mit dem Left-Befehl auf die Hälfte der Fenstergröße. Um das Div nun an die richtige Position zu bekommen, musst Du für den Rand einen negativen wert eingeben, welcher der Hälfte der Div-Gesamtgröße entspricht. Dadurch verschiebst die den Rand in die Mitte des Divs. Bedenke gleichzeitig noch, wie die Gesamtbreite des Divs ermittelt wird (Box-Modell).

Gruß

Sascha

 

[Maik]

Normalerweise sollte das DIV#container mit margin:0 auto im Firefox horizontal zentriert werden.

 

[sadi]

stimmt, geht auch mit margin: 0 auto. Hab ich nur noch nie so gemacht. Man lernt halt nie aus. Allerdings sollte man berücksichtigen, dass das Attribut auto erst ab Version 6 vom IE unterstützt wird. Gerade für kommerzielle Seiten ist dies auch ein Faktor, der zu berücksichtigen ist.

Gruß

Sascha

 

[noise]

Hallo,

also sadi's Lösung funktioniert.
Nur gibts echt keine andere Lösung?

@michael
Du meinst also, im Endeffekt sollte es so wie es in meinem CSS notiert ist funktionieren?

 

[sadi]

Also ich habe jetzt mal deinen geposteten Code in eine Testdatei kopiert und es funktioniert wunderbar im Firefox. Vielleicht liegt der Fehler auch woanders.

 

[Maik]

Beide Lösungswege funktionieren, um eine DIV-Box horizontal zu zentrieren.

Wie sadi schon andeutete, muß der Fehler in deinem Dokument zu suchen sein.

 

[Maik]

Die Fehlerquelle liegt in der CSS-Datei styles.css.

Kommentare werden in CSS nicht mit dem HTML-Kommentar <!-- -->, sondern mit /* */ maskiert.

Ansonsten führt dies in den Gecko-Browsern (Firefox, Mozilla, Netscape) zu Darstellungsfehlern: in deinem Fall zum nicht-Zentrieren des DIVs

aus

<!-- Navigation -->

wird

/* Navigation */

 

[noise]

Michael! Danke
Immer diese "kleinen" Fehler!