Zur Navigation

Zentrierungen in jeder auflösung

1 Hagen (Gast)

hallo,

ich bastel an einer seite, die sich immer genau in der bildschirmmitte befinden soll. ich habe sie für 1024x768 entworfen und mit einem 10px-abstand von oben

{margin: 10px auto auto auto}

definiert. unter dieser auflösung ist alles super, wenn ich jedoch auf 1280x1024 mir die seite anschaue, ist natürlich alles viel zu weit oben.

(wenn ich alles auf "auto" stelle, was logisch wäre, klebt die seite leider am oberen bildrand)

jemand ne idee?
vielen dank!

09.10.2006 15:47

2 Jörg

Hallo Hagen,

vertikales Zentrieren von Blockelementen ist in CSS leider nicht so einfach umzusetzen wie horizontales Zentrieren. Auf der folgenden Seite ist ein Lösungsweg beschrieben:

Vertical Centering in CSS

09.10.2006 17:00 | geändert: 09.10.2006 17:01

4 Rudy

Ich nehme dazu immer folgenden float-Trick (habe ich vor Urzeiten mal irgendwo gefunden, funktioniert immer noch gut):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Bildschirm-Mitte</title>
</head>
<style type="text/css">

html, body {
  height:100%;
  margin:0;
  padding:0;
}

div#spacer { 
  width:1px;
  height:50%;
  margin-bottom:-300px; /* halbe container-hoehe */
  float:left;
}

div#all {
  margin:0 auto;
  position: relative; 
  text-align: left;
  clear: left;
  background: black;
  height: 600px;
  width: 750px;
  color:white;
  font-size:160px;
}
</style>
<body>
  <div id="spacer"></div>
  <div id="all">
    :) <!--hier den content rein -->
  </div>
</body>
</html>

09.10.2006 19:44

Beitrag schreiben (als Gast)





[BBCode-Hilfe]