✔ Vertikal zentriertes DIV verschwindet bei kleinem Browserfenster

Status
Nicht offen für weitere Antworten.
Spelmann

Spelmann

Erfahrenes Mitglied
Hallo Zusammen.

Ich habe mir aus diesem Forum folgenden Code gefischt um den Inhalt meiner Seite horizontal und vertikal im Browserfenster zu zentrieren.
Code: 
html, body {
width:100%;
height:100%;
	background-color:#990000;
	margin: 0;
	padding:0;
}
#content{
	position:absolute;
	left: 50%;
	width: 920px;
	margin-left: -460px; /* negative Hälfte von width:920px */
	top: 50%;
	height: 700px;
	margin-top: -350px; /* negative Hälfte von height:700px */
}
Das funktioniert so lange, bis das Browserfenster die Höhe von 700px und/oder Breite von 920px unterschreitet. Dann beginnt der Seiteninhalt je nach Skalierung des Browsers oben und links zu verschwinden.
Gibts da eine Lösung oder ist o.g. Skript nicht geeignet um ganze Seiteninhalte zu positionieren?

Wie immer voller Dank für Hilfe
Der Spelmann
 
Hi,

dieses Browserverhalten ist "normal" und lässt sich in der Horizontalen durch margin:0 auto anstelle von

Code: 
position:absolute;
left: 50%;
margin-left: -460px; /* negative Hälfte von width:920px */
beheben.

Leider gibt es für die vertikale Zentrierung keine Alternative zu der verwendeten Positionierung des Elements.
 
Gibt es denn eine generell andere Lösung für das Zentrieren eines Blockelementes, das den ganzen Seiteninhalt enthält?
 
Die zwei Möglichkeiten für die horizontale Zentrierung kennst du jetzt, und für die vertikale Zentrierung gibt es nur die von dir eingesetzte Technik.

Ansonsten müsstest du eine Tabelle hinzuziehen:

Code: 
html, body {
height:100%;
margin:0;
padding:0;
}

table#wrapper {
width:100%;
height:100%;
text-align:center;
}

div#content {
width:920px;
height:700px;
background:#dadada;
}
Code: 
<table id="wrapper">
     <tr>
         <td align="center">
             <div id="content">content</div>
         </td>
     </tr>
</table>
 
Ich habe das zuvor immer mit Tabellen gelöst. Aber ist es nicht so, daß sich mit der Deklaration:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
eine Tabelle nicht mehr auf 100% der Seitenhöhe strecke lässt?
 
Mit der nachfolgenden Regel lässt sich die Tabelle auch bei Verwendung dieser Doctype-Variante in der Vertikalen auf 100% strecken:

Code: 
html, body {
height:100%;
margin:0;
padding:0;
}
 
Versteeeehe !
Und ich hab mich gewundert warum eine so wichtige Funktion rausfliegt.
Ist sie garnicht.

Danke Maik und einen schönen Sonntag noch.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück