✔ Horizontal zentriertes DIV -> Bin ich blind?

Status
Nicht offen für weitere Antworten.
L

Layna

Erfahrenes Mitglied
Hallo :).
Wahrscheinlich ein ganz doofer fehler den ich einfach nicht sehe, aber:
CSS: 
html {
	min-height: 600px;
	text-align: center;
}

div {
	position: relative;
}


#box {
	width: 816px;
	height: 490px;
	border: 2px inset White;
	margin: auto;
	top:50%;
	margin-top: -245px;
	padding: 20px;
	text-align: left;
}

führt leider zumindest im IE NICHT dazu das hierbei #box zentriert ist:
HTML: 
<body>

<div id="box">
	<div id="navi"><a href="#">A Link</a><a href="#">A Link</a><br />&nbsp;
	</div>
	<div id="content">
		<img src="###img###" alt="Image" height="389" width="290" class="image_right" />
		<div id="cont_right">
			<h1>&Uuml;berschrift</h1>
			<p>Text</p>
		</div>
	</div>
	<div id="footer">Footer-Text, im Moment blind</div>
</div>

</body>

Kann mir jemand sagen an welcher Stelle ich hier total Betriebsblind bin?
Danke :),
Layna
 
Hi,

kann es sein, dass das Dokument derzeit nicht im Standardsmode, sondern im Quirksmode übergeben wird?

Bei ersterem unterstützt der IE das Boxmodell, respektive margin:auto, im Quirksmode hingegen nicht.

Ansonsten sollte bei letzterem

Code: 
body {
        text-align: center;
}
weiterhelfen.
 
Das body wars... ich wusste es ist irgendetwas ganz einfaches dass ich einfach übersehen habe :).
Vielen Dank!
 
Nabend zusammen,

ich benutz mal diesen Thread, um meine Frage zu stellen.
Leider habe ich Probleme mit dem horizontalen Zentrieren meines Divs. So an sich, wäre das ja kein Problem, nur mein Div ist in der Höhe variabel!

Die Seite sieht mittlerweile so aus:
http://teller.xn--urlaub-im-eigenen-krper-qlc.de/main.php?seite=6

Habt ihr da eine Lösung für mich?

Was ich erreichen möchte:
In erster Linie soll die Unausgelichenheit in der Höhe eliminiert werden. Wenn also oben und unten der gleiche Abstand ist, bin ich erstmal zufrieden. Optimal wäre es allerdings, wenn oben und unten noch ein vielleicht 50 Pixel hoher Abstand wäre.

Meine Lösungsansätze:

Komischerweise funktioniert dieser Befehl nicht:
CSS: 
.HauptContainer {
	position: absolute ;
	left: -440px ;
	top: -50% ; /* Dieser hier */
	right: auto ;
	bottom: auto ;
	width: 880px ;
	height: auto ;
	background-color: #000032 ;
	border: 0px solid #FFFFFF ;
	text-align: center ;
	vertical-align: middle ;
	margin: 0 ;
}

Ansonsten funktioniert es auch nicht, in den "HauptContainer" oben und unten zwei DIV's einzufügen, die jeweils 50 Pixel Abstand haben. Irgendwie scheint der erste wie gewünscht oben zu hängen und der andere fehlt komplett!

Und mein Margin, welches ich testweise mal im Body-CSS-Style angegeben hab, gilt seltsamerweise auch nur für den oberen Teil.

Das Ganze scheine ich echt nicht zu durchblicken. Ich hoffe, ihr könnt mir damit helfen.

Ciao:
Adam
 
Hi,

du hast entgegen dem Topic dieses Threads ein Problem mit der vertikalen Ausrichtung des DIVs.

Oder welchen Kontext soll die horizontale Zentrierung eines Elements mit seiner Höhe und der top-Eigenschaft haben?

Ohne Höhenangabe (der Wert auto nützt hier nichts) lässt sich ein DIV im Browserfenster nicht vertikal zentrieren, falls dies dein Versuch sein sollte.

Und welchen Sinn soll diese Positionskombination ergeben?

Code: 
.hor {
        position:absolute;
        top:50%;
        [...]
}
.HauptContainer {
        position: absolute ;
        top: -50% ;
        [...]
}
Code: 
<div class="hor">
        <div class="HauptContainer">
                [...]
        </div>
</div>
 
Hi Maik,

vielen Dank für deine schnelle Antwort.
In der Tat, ich hab mich im Thementitel geirrt -.- Sry, man sollte nicht versuchen zu denken, wenn es leicht in einem brodelt.

Also den Wert "auto" habe ich gewählt, da der Inhalt ja je nach Text unterschiedlich hoch ist.

Die von dir - noch nett - ausgedrückte "Positionskombination" habe ich gewählt, weil ich das mal auf irgendeiner Musterseite gesehen hab. Das ganze nannte sich "Dead Center" oder so und zeigt, dass man eine Horizontlinie anlegen muss, um einen DIV-Container("HauptContainer) vertikal und horizontal korrekt auszurichten.
//EDIT: Genau, hier!

So, das heißt also, dass ich gar keine Chance habe, meinen Container vertikal auszurichten(nicht horizontal -.- :-( ), wenn ich den Aufbau meiner Seite so dynamisch beibehalte?!
Ich dachte man kann mit CSS auch rechnen, aber anscheinend ist CSS wohl eine reine Auszeichnungssprache wie HTML.

Oder bin ich mal wieder falsch unterwegs?

Ciao:
Adam
 
In dem verlinkten Beispiel besitzt das DIV #content eine (absolute) Höhenangabe, ohne die seine vertikale Zentrierung ansonsten nicht möglich ist.
 
Okay, vielen Dank Maik!

Dann werd ich das alles wohl an den oberen Rand "ankleben" müssen.

Ciao und gute Nacht
Adam
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück