Absolut mittige Ausrichtung

Stickl · 12.06.2007, 16:13

Hallo Allerseits,

hier kommt mal wieder eine tausendfach gestellte Frage:
Wie bekomme ich meine Seite absolut mittig im Browser angezeigt.

Bitte verweist mich nicht auf irgendwelche Seiten - ich habe schon alles probiert! Schaut euch einfach mal den Quellcode hier an und sagt mir, wo ich was einfügen muß.

http://www.inabauer.de/its/CeBIT_2004.htm

Es ist eine meine ersten Arbeiten in Dreamweaver und ich überarbeite gerade meine alten Schätzchen.

Mein Dank sei euch gewiß! Greetings Ina

Rinaldo · 12.06.2007, 16:38

HTML-Code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Horizontal und vertikal zentriert</title>
 <style>
 html
 {
 	background-color: #FFFFFF;
 	margin: 0px;
 	padding: 0px;
 }
 
 body
 {
 	margin: 0px;
 	padding: 0px;
 }
 
 .box
 {
 	border: thin solid #000000;
 	background-color: #CCCCCC;
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	margin-top: -150px;
 	margin-left: -150px;
 	height: 300px;
 	width: 300px;
 	overflow: auto;
 }
 
 .inhalt
 {
 	width: 100%;
 	margin: auto;
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 12px;
 	color: #000000;
 	text-align: center;
 }
 </style>
 </head>
 <body> 
 <div class="box">
 <div class="inhalt">
 Das ist nun der Inhalt des DIVs
 </div>
 </div>
 </body>

Natürlich musst Du die Breite u. Höhe noch Deiner Seite anpassen - und den Inhalt dort einfügen, wo jetzt "Das ist nun der Inhalt des DIVs" steht

.

Wobei ich ein gutes Ergebnis bezweifle - schließlich ist Deine Seite von den Abmessungen ziemlich groß, das kann man schlecht zentrieren

.

Stickl · 12.06.2007, 17:15

Hallo Rinaldo,

vielen Dank für die wirklich schnelle Antwort. Also die Seite hat nur eine Größe von 960x576px. Das sollte kein Problem sein.

Wenn ich das Maß eingebe, erscheint das Inhaltsfeld nicht mittig.

Auch klappt das mit dem Inhalt einfügen nicht, Dreamweaver verabschiedet sich beim Kopieren. Das ist aber nicht so tragisch, denn wenn ich es soweit schaffe, die 960x576px zentriert auf den Bildschirm zu bekommen, werde ich deine Vorgaben für ein neues Projekt verwenden und die alten Sachen halt so belassen, wie sie sind.

Für deine weitere Hilfe schon jetzt MUCHOS GRACIAS!

rednug · 12.06.2007, 17:36

Vielleicht zum Verständnis;

Du zentriertst einen Container mittig. Und wenn der Inhalt den Container ausfüllt, sollte es auch mittig sein.
Ich arbeite mit "position:absolute;" plus "z-index" und lege die Container bei Bedarf immer übereinander.

position: absolute;
top: 50%;
left: 50%;
margin-top: -150px; /*jeweils die "halbe Höhe"*/
margin-left: -150px; /*jeweils die "halbe Breite"*/
height: 300px;
width: 300px;
z-index:1;

Und damit sollte es an sich immer funzen nach meinem Wissen.
Bitte nicht von der DW-Ansicht irritieren lassen. Prüfe es immer über Browser.

Ob dies jetzt mit Tabellen genau so funzt, weiß ich nicht.

Gunder

Stickl · 12.06.2007, 17:51

Also ich habe das jetzt nach Anweisung gemacht und alles einzeln kopiert. Soweit so gut.

Das ist das Ergebnis: http://www.inabauer.de/its/test.htm

Vielleicht habe ich mich nicht richtig ausgedrückt. Ich hätte jetzt gerne, egal ober jemand vor einem 17", 19" oder 20" Bildschirm sitzt, die Seite immer mittig erscheint.

Was meinen?

Stickl · 12.06.2007, 17:54

Oh je - jetzt wo ich auf die Zahlen unten klicke - tut sich das nächste Problem auf. Versuch's mal - so soll das nicht sein!

Stickl · 12.06.2007, 19:45

OK - Gunder - ich habe es kapiert!
Dann habe ich overflow auto rausgenommen und sieht da
HURRA!

Vielen Dank an Dich und Rinaldo

Stickl · 12.06.2007, 19:55

Noch einmal zum besseren Verständnis, für diejenigen, die sich mit gleicher Fragestellung befassen.

In meine restlichen Seiten habe ich in body dies hier eingefügt
border: thin solid #000000;
background-color: #004884;position: absolute;
top: 50%;
left: 50%;
margin-top: -320px;
margin-left: -480px;
height: 576px;
width: 960px;

So erscheint das Bild etwas höher, also nicht genau in der Mitte, aber es paßt sich dennoch bis zum Rand an einen beliebigen Bildschirm an.

Ich sollte die Profs hier öfter befragen - ihr seid klasse!

rednug · 12.06.2007, 21:16

position: absolute;
top: 50%;
left: 50%;
margin-top: -320px;
margin-left: -480px;
height: 576px;
width: 960px;

Das gehört nicht so einfach in den "body", sondern in den Container (DIV), und wenn es gleich nach dem
"<body>" kommt.

Also

HTML-Code:

<html>
<head>
</head>
<body>
<div>
und dieser div wird jetzt entsprechend formatiert;
position: absolute;
top: 50%;
left: 50%;
margin-top: -320px;
margin-left: -480px;
height: 576px;
width: 960px;
</div>
</body>
</html>

Und nun sollte es passen.

Gunder

Stickl · 12.06.2007, 22:00

Alright!

Ich habe heute viel gelernt! danke . . .

Schöne Grüsse aus Aschaffenburg, Ina

Rinaldo · 12.06.2007, 22:15

Zitat:

Zitat von Stickl

Ich habe heute viel gelernt!

Dafür gibt es das Forum

... Bis bald.