Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Webseiten/HTML

Webseiten/HTML

Fragevon Jessica vom 25.07.2019, 10:24 Options

Webseit zentrieren (trotz absoluter und relativer Bezüge)

Hallo zusammen,
ich habe eine Website, deren Inhalte v.a. mittels DIVs und CSS positioniert sind (Link) . 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 schreiben

Antwort 1 von kicia vom 25.07.2019, 15:00 Options

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 vom 25.07.2019, 15:04 Options

Hallo Kicia,
vielen Dank erst mal für deine Hilfe.

Wie frage ich denn diese Werte ab?

Viele Grüße

Jessica

Antwort 3 von kicia vom 25.07.2019, 15:22 Options

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_...

<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>

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Tipp einschicken

News einschicken