Probleme mit DIV-Container

[Hun Jai]

Hallo!

Ich hab einen DIV (markiert die gesamte Seite bzw. derren Inhalt), welcher die DIVs des Seitenaufbaus enthält.

all
|-------------------------------------|
||-----------------------------------||
||navi|          header              ||
||    |------------------------------||
||    |          content             ||
||    |                              ||
||    |                              ||
||    |                              ||
||-----------------------------------||
||                footer             ||
||-----------------------------------||
|-------------------------------------|

Wie kann ich jetzt dem ganzen beibringen immer zentriert auf der Seite zu stehen? Also theoretisch soll der Inhalt vom div 'all', zentriert auf der Page stehen.

header, content, navi und footer sind alle diesem ähnlich:

#content {
 position:absolute;
 left:67px;
 top:253px;
 width:764px;
 height:587px;
}

all ist bei mir wie folgt festgelegt:

#all {
 position:absolute;
 left:0px;
 top:0px;
 width:900px;
 height:986px;
}

Grüße

[Dieter Raber]

Hallo Hun,

Das mit der absoluten Positionierung ist nicht so ideal, einfacher waere

#all {
  width: 900px;
  margin: 20px auto;
}

Gruß,

Dieter

[Gunnar Bittersmann]

Hello out there!

Ich hab einen DIV (markiert die gesamte Seite bzw. derren Inhalt), welcher die DIVs des Seitenaufbaus enthält.

Wozu? Mit 'html' und 'body' hast du bereits zwei Elemente, die du mit CSS formatieren kannst.

Divitis? Gute Besserung.

Wie kann ich jetzt dem ganzen beibringen immer zentriert auf der Seite zu stehen?

Jehova2!!

„Es wird erwartet, dass bei Problemen erst einmal in SELFHTML, der FAQ, […] nach einer Lösung gesucht wird“ hast du überlesen?

#all {
width:900px;
}

Und wenn der Viewport des Nutzers schmaler ist als 900 Pixel? Dann muss horizontal gescrollt werden – äußerst nutzerfeindlich.

Verzichte auf Breitenangaben in Pixel, 'max-width' bietet sich an – vorzugsweise in em.

See ya up the road,
Gunnar

[Hun Jai]

Wozu? Mit 'html' und 'body' hast du bereits zwei Elemente, die du mit CSS formatieren kannst.

Nunja, mich interessiert wie ich body formatieren muss damit das ganze center steht. Mit text-align: center; ist ja nur der Text dann zentriert?

[Gunnar Bittersmann]

Hello out there!

Nunja, mich interessiert wie ich body formatieren muss damit das ganze center steht.

Wenn dein Interesse daran so groß ist, warum liest du dann nicht bei den in den FAQ verlinkten Stellen nach?

Mit text-align: center; ist ja nur der Text dann zentriert?

Wie das "text-" im Namen der Eigenschaft schon vermuten lässt. Browser, die 'text-align' auch auf Block-Boxen anwenden, handeln sittenwidrig.

See ya up the road,
Gunnar

[Hun Jai]

Wenn dein Interesse daran so groß ist, warum liest du dann nicht bei den in den FAQ verlinkten Stellen nach?

Das habe ich doch bereits, allerdings steht dort keine Lösung für Angaben wie diese hier:

#content {
 position:absolute;
 left:67px;
 top:253px;
 width:764px;
 height:587px;
}

[Matt]

Das habe ich doch bereits, allerdings steht dort keine Lösung für Angaben wie diese hier:

#content {
position:absolute;
left:67px;
top:253px;
width:764px;
height:587px;
}

Hi, allerdings.

Löse das ganze so:
Behalte deinen #all container und setze ihn wie folgt.

#all {
 position: absolute;
 width: 900px;
 height: 986px;
 left: 50%;
 margin-left: -450px;
}

margin-left eben die Hälfte von width.

[Jonathan]

Hallo,

Das habe ich doch bereits, allerdings steht dort keine Lösung für Angaben wie diese hier:

#content {
position:absolute;
left:67px;
top:253px;
width:764px;
height:587px;
}

Ja klar, weil man absolute Positionierung nicht gut mit Zentrierung mischen kann. Mach das Position:absolute doch einfach weg.

So sollte es gehen:

#content {
 margin:0 auto;
 margin-top:253px;
 width:764px;
 height:587px;
}

Oder willst du auch noch vertikal zentrieren?

Jonathan

[Hun Jai]

Ja klar, weil man absolute Positionierung nicht gut mit Zentrierung mischen kann. Mach das Position:absolute doch einfach weg.

Ich kann das nicht einfach wegmachen, weil er mir dann mein Layout zerschießt.
Ich habe jetzt die Lösung von Matt genommen, damit klappt es.

Oder willst du auch noch vertikal zentrieren?

Neeee ;-)

Gruß,
Hun

[Gunnar Bittersmann]

Hello out there!

Ich habe jetzt die Lösung von Matt genommen

Von der du behauptet hast, sie stünde nicht an einer der in den FAQ verlinkten Stellen?

See ya up the road,
Gunnar

[Ole]

Hi

Ich kann das nicht einfach wegmachen, weil er mir dann mein Layout zerschießt.

Vermutlich hast du die Kind-Elemente auch alle unsinnigerweise positioniert.

Dein Seitenaufbau lässt sich ganz einfach komplett ohne positionierung der Elemente realisieren.

Btw. Die Lösung von Matt hat den Nachteil, dass der Content bei kleineren Auflösungen oder beim verkleinern des Browserfensters auch links aus dem diesem herausgeschoben wird. Schön ist was anderes.

so long
Ole
(8-)>