Supportnet / Forum / Webseiten/HTML
Webseit zentrieren (trotz absoluter und relativer Bezüge)
Frage
Hallo zusammen,
ich habe eine Website, deren Inhalte v.a. mittels DIVs und CSS positioniert sind ([url=http://neu.jessica-schwinn.de/index.html]Link[/url]) . Die Website ist momentan links oben am Browserrand ausgerichtet.
Ich möchte die Website nun horizontal im Browserfenster zentrieren. Dies stellt normal ja keine Probleme da (ich müsste einfach ein DIV außenrum mit der Eigenschaft align="center" setzen).
Das Problem ist aber, dass einige Elemente auf der Website absolut positioniert werden. D.h. von links oben ausgehend.
Frage: wie löse ich das am Besten, ohne alle absoluten Positionierungen aufgeben zu müssen? Und wie kann ich z.B. den Text dann trotzdem absolut zum Hintergrund ausrichten?
Wäre klasse, wenn jemand helfen könnte. Habe schon so viel probiert :(.
Viele Grüße
Jessica
Antwort 1 von kicia
Du könntest die Werte document.body.clientWidth und document.body.clientHeight abfragen und die absoluten Positionen entsprechend setzen, also zB. zum zentrieren:
yourObject_x_position = (document.body.clientWidth / 2) -(yourObject_width / 2)Antwort 2 von Jessica
Hallo Kicia,
vielen Dank erst mal für deine Hilfe.
Wie frage ich denn diese Werte ab?
Viele Grüße
Jessica
vielen Dank erst mal für deine Hilfe.
Wie frage ich denn diese Werte ab?
Viele Grüße
Jessica
Antwort 3 von kicia
Hallo Jessica,
das geht leider nur mit Javascript, nicht innerhalb der CSS definitionen.
Ich wollte ein Beispiel schreiben, aber es funktioniert nicht, ich hab irgendwas falsch gemacht. Ich schicke es trotzdem. Ich muß jetzt los...
oh, es muß heißen "getElementById" (nicht "Elements")
Vielleicht nochmal schauen:
http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=clien...
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_...
das geht leider nur mit Javascript, nicht innerhalb der CSS definitionen.
Ich wollte ein Beispiel schreiben, aber es funktioniert nicht, ich hab irgendwas falsch gemacht. Ich schicke es trotzdem. Ich muß jetzt los...
oh, es muß heißen "getElementById" (nicht "Elements")
Vielleicht nochmal schauen:
http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=clien...
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_...
<html>
<head>
<script language="javascript">
function init()
{
var x = (document.body.clientWidth / 2) - (document.getElementsById("meineMessageBox").style.width / 2);
var y = (document.body.clientHeight / 2) - (document.getElementsById("meineMessageBox").style.height / 2);
document.getElementsById("meineMessageBox").style.left = x;
document.getElementsById("meineMessageBox").style.top = y;
}
</script>
</head>
<body onLoad="javascript:init()">
<div id="meineMessageBox">hallo Welt!</div>
</body>
</html>