✔ Absolut Mittig zentrierte Div Box - Aufbau korrekt oder zu verschachtelt?

Status
Nicht offen für weitere Antworten.
J

julchen

Erfahrenes Mitglied
Hallo,
ich möchte eine Website erstellen, die absolut mittig in alle richtungen platziert ist. Ich habe den Aufbau und css schon erstellt. Irgendwie kommt mir der Aufbau aber etwas zu kompliziert vor. Was meint Ihr dazu, könnt ihr euch mal den Quelltext anschauen?

http://www.assedo.de/login/pbj/index.html

Ich habs bei mir mit meinen installierten Browser versucht, IE7, FF2, Opera9. Wie siehts bei anderen Browsern aus, wirds da auch noch richtig dargestellt? Könntet Ihr das mal testen.

Gruss
Holli
 
Hi,

der Aufbau wäre soweit in Ordnung, nur hast du bei dieser Technik zum Zentrieren der Box das Problem, dass wenn das Browserfenster schmäler oder niedriger als die zentrierte Box ist, der linke und/oder obere Bereich der Box in den nicht-sichtbaren Bereich verschwindet, und dort nicht mehr zugänglich ist.

Eine alternative Technik zum horizontalen und vertikalen Zentrieren kannst du dir in dem Beispiel http://d-graff.de/fricca/center.html anschauen, in dem das beschriebene Problem nicht auftaucht.

mfg Maik
 
Hallo,
danke für den Tipp. Ich habs mal versucht anhand von deinem Beispiel, dass ich dieses auf meine Seite anwende. Leider hab ich es nicht geschafft.

Könntest Du mir sagen, was ich wo genau bei mir ändern muss?

LG
Julchen
 
Die folgenden "Bausteine" sind für dich interessant:

Code: 
* {
		margin:0;
		padding:0;
		}

html, body {
		height:100%;
		}

body {
		text-align:center; /* horizontal centering for IE Win quirks */
		}

#distance { 
		width:1px;
		height:50%;
		background-color:#fc6;
		margin-bottom:-13.75em; /* half of container's height */
		float:left;
		}

#container {
		margin:0 auto;
		position:relative; /* puts container in front of distance */
		text-align:left;
		height:27.5em;
		width:45em;
		clear:left;
		background-color:#ff9;
		border:1px solid #c93;
		border-top-color:#fff;
		border-left-color:#fff;
		}
und der Einbau erfolgt wie in der Vorlage:

Code: 
<body>

<div id="distance"></div>
<div id="container"> ... </div>

</body>
mfg Maik
 
Hallo Maik,
das habe ich auch so gemacht, aber bei mir klebt das ganze am oberen Rand (ich habs mal neu hochgeladen).

LG
Julchen
 
Hier fehlt das Semikolon hinter der height-Eigenschaft:

Code: 
html, body{
height:100%;
font:100.01% "Tahoma", "Verdana", "Arial", Serif;
color:#999;
background-color:#444;
}
und hier musst du noch den Wert der halben Container-Höhe korrigieren:

Code: 
#distance { 
width:1px;
height:50%;
background-color:#fc6;
margin-bottom:-13.75em; /* half of container's height */
float:left;
}
mfg Maik
 
Kann auch nicht, wenn der margin-bottom-Wert für #distance nun positiv ist.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück