✔ Div wird trotz umschließenden Div nicht zentriert.

D

dropdown

Mitglied
Hallo zusammen,

habe folgendes Problem.
Habe ein Container Div das alles umschließt.
Dieses wird zentriert.
Code: 
#cont {
	width: 750px;
	margin: auto;
	text-align:left;
	};

Jetzt sollten doch alle folgenden Divs, die vom "cont" Div umschlossen sind, auch zentriert sein, oder ?

Als Beispiel habe ich einen Header in einem Div, und dann folgt ein Menu.
Der Header ist zentriert, das Menu allerdings nicht mehr.
Ich weiß nicht wieso.

HTML: 
<div id="cont">
	<div id="header"><img id="logo" src="img/xlr.jpg" /></div>
        <div id="menu"><table width="750" border="0" cellspacing="0" cellpadding="0">Tabelleninhalt bla bla </div>
</div>

Und so sieht die CSS aus:
PHP: 
body {
	background-color: #fff;
	font-family: Verdana, Geneva, sans-serif;
	text-align:center;
	};
	
#cont{
	width: 750px;
	margin: auto;
	text-align:left;
	};

#menu {

	};
 
Hi,

entferne als erstes die Semikolons nach den Deklarationsblöcken, also jene im Anschluß an die schliessende }-Klammer, denn die haben dort nichts zu suchen, und führen dazu, dass standardkonforme Browser das Stylesheet ab dem ersten Deklarationsblock body { ... } nicht zu Ende parsen.

Daher wird das Inline-Element <img> auch innerhalb von #cont horizontal zentriert, obwohl du eigentlich für dieses Element text-align:left festgelegt hast, um der Vererbung der text-align:center-Deklaration aus dem ersten Regelblock für <body> entgegenzuwirken.

Und wie soll sich deiner Meinung nach das Menü bzw. die Tabelle im Bezug zu den Boxendimensionen des DIVs #cont horizontal zentrieren, wenn sie dieselbe Breite wie dieser DIV-Block besitzt?

Vermutlich hast du dich hier aber mißverständlich ausgedrückt, und der Fehler, von dem du sprichst, ergibt sich durch meinen eingangs angesprochenen Syntax-Fehler.

mfg Maik
 
Huch, die Semikolons. Das die da nicht hingehören, weiß ich. Ist mir aber nicht aufgefallen. Deshalb hat es auch nicht geklappt. Danke für den Tipp.
Habe vorher noch am PHP Code gearbeitet, da sind mir dann wohl ein paar Semikolons auch in den CSS Code gerutscht ;)

Was ich eigentlich nur machen will, ist die Page zu zentrieren.
Ich dachte, wenn ich das body tag auf "text-align:center" setze, wird automatisch alles zentriert ?
Sprich, alle DIVs.
Anscheinend ist das nicht der Fall.
 
dropdown hat gesagt.:
Was ich eigentlich nur machen will, ist die Page zu zentrieren.
Ich dachte, wenn ich das body tag auf "text-align:center" setze, wird automatisch alles zentriert ?
Sprich, alle DIVs.
Anscheinend ist das nicht der Fall.
Zum Vergrößern anklicken....
Diese "Methode" funktioniert nur im IE. Alle übrigen Browser (FF, Opera, Safari, usw.) zentrieren Block-Elemente, wie das DIV, nicht auf diese Weise (text-align:center für <body>) in ihrem Fenster.

Hierfür hast du ja die erforderliche margin:auto-Regel für #cont angegeben, die tadellos funktioniert.

mfg Maik
 
HTML: 
#cont {
	position:relative;
	margin:auto;
        width: 750px;
        text-align:left; 
}

so sollte es klappen.

hab auch ne frage dazu, das ; nach der } ist doch eigentlich unwichtig oder irre ich mich da?
 
Godstyle hat gesagt.:
HTML: 
#cont {
	position:relative;
	margin:auto;
        width: 750px;
        text-align:left; 
}

so sollte es klappen.
Zum Vergrößern anklicken....
Es funktioniert auch ohne deine hinzugefügte position:relative-Deklaration, wie ich in meiner letzten Antwort geschrieben hatte:
Maik hat gesagt.:
Hierfür hast du ja die erforderliche margin:auto-Regel für #cont angegeben, die tadellos funktioniert.
Zum Vergrößern anklicken....


Godstyle hat gesagt.:
hab auch ne frage dazu, das ; nach der } ist doch eigentlich unwichtig oder irre ich mich da?
Zum Vergrößern anklicken....
Deine Frage beantwortet der erste Absatz meiner ersten Antwort:
Maik hat gesagt.:
entferne als erstes die Semikolons nach den Deklarationsblöcken, also jene im Anschluß an die schliessende }-Klammer, denn die haben dort nichts zu suchen, und führen dazu, dass standardkonforme Browser das Stylesheet ab dem ersten Deklarationsblock body { ... } nicht zu Ende parsen.
Zum Vergrößern anklicken....

Stellt sich bei mir abschliessend die Frage, wie aufmerksam du das Thema gelesen hast, bevor du deinen Beitrag verfasst hast.

mfg Maik
 
Maik hat gesagt.:
Diese "Methode" funktioniert nur im IE. Alle übrigen Browser (FF, Opera, Safari, usw.) zentrieren Block-Elemente, wie das DIV, nicht auf diese Weise (text-align:center für <body>) in ihrem Fenster.

Hierfür hast du ja die erforderliche margin:auto-Regel für #cont angegeben, die tadellos funktioniert.

mfg Maik
Zum Vergrößern anklicken....
Bedeutet aber, das ich es trotzdem drin lassen kann/soll, für den IE, oder ?

Wie dem auch sei, die Page ist immer noch linksbündig ausgerichtet.
Klappt irgendwie nicht mit der Zentrierung :(

Gestestet mit dem FF
 
Zeig mal bitte den vollständigen HTML- und CSS-Code der Seite, denn deine vorgestellte CSS-Regel für #cont wird bei mir u.a. vom FF korrekt interpretiert, was die Vermutung zulässt, dass sich da an anderer Stelle ein weiterer (Syntax)Fehler eingeschlichen hat.

mfg Maik
 
Boah, hat sich erledigt.
Man man, ich hatte noch ein Semikolon drin, das ich vergessen hatte zu Löschen :/
Funktioniert jetzt wunderbar. Lag einfach nur an den Semikolon.
Jetzt trotzdem nochmal zu der IE Geschichte.
Soll ich das "text-align:center; " im body tag drin lassen, damits im IE keine Probleme gibt ? Darstellungsprobleme in anderen Browsern gibts deshalb ja nicht.
Muss dann halt nur die Texte auf links stellen im entsprechenden DIV.
 
Wenn du das HTML-Dokument mit einer entsprechenden Dokumenttyp-Deklaration den Browsern im standardkonformen Modus ("Almost Standards Mode") übergibst, ist diese Regel nicht zwingend erforderlich, da in diesem Darstellungsmodus der IE (ab Version 6) ebenso die margin:auto-Eigenschaft unterstützt.

Sollten die Browser aber im "Quirks Mode" laufen, ist sie vonnöten, da der IE (in allen Versionen) in diesem proprietären Darstellungsmodus das CSS-Boxmodell fehlerhaft bis gar nicht interpretiert, worunter auch margin:auto fällt.

Wenn du sogar den IE5.x berücksichtigen willst, wird text-align:center in jedem der beiden Fälle benötigt, da er mit margin:auto grundsätzlich nicht umzugehen weiß.

Mit der Angabe text-align:left für #cont hebst du eine mögliche Vererbung von text-align:center auf, und darin enthaltende Elemente und Texte werden linksbündig ausgerichtet. Eine weitere text-align:left-Deklaration für Elemente mit Text innerhalb von #cont ist somit nicht erforderlich.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück