Fertiges Layout zentrieren

[Tom78]

Hi.

Ich habe mein Layout fertig.

header
menu
content
footer

Mittels top und left hab ich pixelgenau eingestellt, was wo anfängt.
header z.B. top 0px...und ist 120px hoch. -> menu fängt bei 120px an usw.

Ich hab mir mittels divs und pixelgenauen Angaben die Seite zurechtgebastelt. Allerdings möchte ich die fixe Größe zentrieren.
Also, dass header, menu usw. nicht gleich links anfangen, sondern immer zentriert sind. Ich will also nur die fixe Breite und Höhe von header, menu usw. angeben...aber sie sollen immer horizontal zentriert sein.

Wie geht das?
Hab einiges probiert, aber nichts klappt.

[suit]

Wie geht das?

mit den richtigen CSS-Deklarationen

Hab einiges probiert, aber nichts klappt.

das einge war wahrscheinlich alles falsch ;)

zeig mal deinen Code her (Link, Auszüge) sonst wirds etwas schwierig

[Tom78]

Links sind 10px Abstand. Rechts je nach Auflösung...
Ich will aber nicht, dass alles 10px left anfängt...sondern zentriert. Je nachdem, wie halt die Auflösung eingestellt ist...es soll immer zentriert sein.

Momentan ist es so:

xHHHHH
xMMMMM
xCCCCC
xFFFFF

H = header, M = menu, C = content, F = footer
x = 10px Abstand vom Rand -> H, M usw. beginnen jeweils bei 10px mit left:10px

Es soll aber so sein:

xxxHHHHHxxx
xxxMMMMMxxx
xxxCCCCCxxx
xxxFFFFFxxx

H, M, C und F zentriert. Bei eine niedrigeren Auflösung ist halt nur x Abstand links und rechts neben H, M usw. ... bei einer höheren sind es mehrere xs.

Code:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
background-color: #e27201;

}

#top1 {
position:absolute;
left:10px;
top:10px;
width:783px;
height:134px;
background-color: #000099;
background-image: url(design_top.jpg);
background-repeat: no-repeat;
}

#top2 {
position:absolute;
left:793px;
top:10px;
width: 117px;
height: 134px;
background-image: url(bluebackground.jpg);
}

#menu {
position:absolute;
left:10px;
top:144px;
width:900px;
height: 30px;
background-color: #000000;
}

#content1 {
position:absolute;
left:10px;
top:174px;
width:900px;
height: 400px;
background-color: #000099;
}

#content2 {
position:absolute;
left:60px;
top:210px;
width: 800px;
height: 276px;
background-image: url(start.jpg);
background-repeat: no-repeat;
}

#foot1 {
position:absolute;
left:10px;
top:574px;
width: 900px;
height: 30px;
background-color: #000000;
}

#foot2 {
position:absolute;
left:30px;
top:584px;
color: #ffffff;
}

[Kai345]

[latex]Mae  govannen![/latex]

Links sind 10px Abstand. Rechts je nach Auflösung...
Ich will aber nicht, dass alles 10px left anfängt...sondern zentriert. Je nachdem, wie halt die Auflösung eingestellt ist...es soll immer zentriert sein.

Du kannst z.B. ein Div um alles machen, dieses dann zentrieren. Da du alle Bestandteile absolut positioniert hast (was eigentlich fast immer eine sehr schlechte Idee ist), _mußt_ du dieses Wrapper-Div dann noch relativ positionieren, damit das absolute dann relativ wird *G*

Cü,

Kai

[Tom78]

Hi Kai!

Danke. Ich kann aber auch das wrapper div absolut machen und die anderen Divs relativ, oder?

[Kai345]

[latex]Mae  govannen![/latex]

Danke. Ich kann aber auch das wrapper div absolut machen und die anderen Divs relativ, oder?

Natürlich kannst du das. Allerdings wird es dann *garantiert* nicht das Resultat ergeben, das du haben wolltest.
Ein absolut positioniertes Wrapper-div ist logischerweise nicht zentriert.

Wenn du deine (wie schon geschehen) absolut positionierten divs in ein zentriertes, relativ positioniertes Wrapper-div einpackst, wird das position:absolute der einzelnen unter-divs auf das wrapper-div bezogen. Somit ist der Inhalt nicht mehr fest xx px vom Rand sondern xx px vom Rand des Wrapper-divs.

Besser wäre natürlich wie schon geschrieben ein (weitgehender) Verzicht auf (absolute) Positionierung. Dazu müsstest du allerdings vieles mehr ändern, der obige Vorschlag war nur eine schnelle Lösung, wie du den Inhalt zentrieren kannst, ohne ansonsten viel ändern zu müssen.

Cü,

Kai

[Inita_]

hoi,

habe nicht viel von deiner beschreibung verstanden, aber antwort auf topic

Fertiges Layout zentrieren

musst du so machen:

#wrapper{
  margin:0 auto;
  width:800px}

Gruss