✔ Layout mit zentrierter Mitte

Status
Nicht offen für weitere Antworten.
I

illuminatus26

Erfahrenes Mitglied
Hallo zusammen.

Habe mir folgendes Layout zusammen geschustert.
Es ist 1024x768 px gross und hat in der Mitte eine Box mit 760x500 px.
Das ist soweit auch alles nicht das Problem.
Ich würde jetzt gerne hingehen und die Box "mitte" im Browserfenster zentrieren.
Wird das Layout z.B. mit einer Bildschirmauflösung von 800x600 aufgerufen soll die Box "mitte" angezeigt werden.
Hoffe es war verständlich.
Abschliessend noch der Code:

Code: 
<html>
<head>
<style type="text/css">
<!--
#kopf {
	position: absolute;
	background-color: #FFFF00;
	left: 0px;
	top: 0px;
	height: 134px;
	width: 1024px;
}
#links {
	position: absolute;
	background-color: #FF0000;
	left: 0px;
	top: 134px;
	height: 500px;
	width: 132px;
}
#rechts {
	position: absolute;
	background-color: #00FF00;
	top: 134px;
	height: 500px;
	width: 132px;
	left: 892px;
}
#fuss {
	position: absolute;
	background-color: #0000FF;
	left: 0px;
	top: 634px;
	height: 134px;
	width: 1024px;
}
#layout {
	height: 768px;
	width: 1024px;
}
#mitte {
	position: absolute;
	left: 132px;
	top: 134px;
	background-color: #CCCCCC;
	height: 500px;
	width: 760px;
}
-->
</style>
</head>

<body>

<div id="layout">

<div id="kopf">kopf</div>
<div id="links">links</div>
<div id="rechts">rechts</div>
<div id="fuss">fuss</div>
<div id="mitte">mitte</div>

</div>


</body>
</html>
 
Erweiter mal den Selektor #layout mit den folgenden CSS-Eigenschaften, um das Layout in der Horizontalen und Vertikalen zu zentrieren:

Code: 
#layout {
        height: 768px;
        width: 1024px;
        position: absolute;
        left: 50%;
        margin-left: -512px; /* negative Hälfte von width:1024px */
        top: 50%;
        margin-top: -384px; /* negative Hälfte von height:768px */
}
 
Wunderbar.
Hat geklappt, dass sich das Layout in der Mitte befindet. Es ist ja 1024x768px gross.
Wird es nun mit kleinerer Auflösung aufgrufen (z.B. 800x600) werden Scrollbalken angezeigt.
Wie kann ich das verhindern? Natürlich so, dass alles zentriert bleibt?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück