[Codi]

Hallo zusammen,
ich stehe leider vor einem Problem welches ich von alleine nicht lösen kann.

Ich habe eine Webseite mit einer festen Gesamthöhe von 760px erstellt. Der ganze Spaß wird nur mit CSS ohne JS o.ä. immer schön in der Mitte gehalten.

Bei "normalen" Auflösungen ist alles perfekt. Allerdings habe ich bei meinen Counterstatistiken gesehen, dass auch noch Leute mit 1024x768 unterwegs sind. Jetzt habe ich in dieser Auflösung das Problem, dass mein Logo oben aus dem Bild rausrutscht.

Code lautet wie folgt:

#Wrapper {
	position:absolute;
 	width: 100%;
	height:760px;
	background-image:url(images/background.png);
	background-repeat:repeat-x;
	top: 50%;
	margin-top: -380px;
}

Der Fehler entsteht durch das margin-top welches bei der Auflösung den Container oben unter der Menüleiste des Browsers verschwinden lässt.

Gibt es eine Lösung dieses Problem ohne Javascript (mit Auslesen und Anpassen an Bildschirmauflösung) zu lösen? Ich könnte natürlich margin-top auf 350px setzen, dann wäre der Container aber nicht mehr vertikal zentriert.

Im Prinzip würde es mir schon reichen, wenn es einen Befehl gibt der dafür sorgt, das der Container nicht ganz verschwindet sondern Benutzer mit dieser kleinen Auflösung dann halt scrollen müssen.

Vielen Dank!

In Hoffnung auf eure Hilfe,
Codi aka Chris

[take_a_7]

Moin,

vertikale Zentrierung per position:absolute hat diesen Nachteil. Umgehen kann man das, indem man diese Methode verwendet.

gruß,
take

[Codi]

vielen vielen Dank für diese schnelle und hilfreiche Antwort.

Interessante Methode, ist ja fast wie die von mir genutzte. Dementsprechend einfach umzusetzen und hat sofort funktioniert.

Gruß
Codi aka Chris

[cebito]

Zentrieren geht auch, ohne das man die Elementhöhe kennt... zentriert

[paulepulmo]

@cebito - Feine Sache. Ideen muss man haben.

[Codi]

Jap, besten Dank auch für deinen Vorschlag cebito.

[cebito]

Zitat von paulepulmo

@cebito - Feine Sache. Ideen muss man haben.

hier gefunden und angepasst...