Alle DIVS auf Homepage mittig

[Sonja]

Hallo ihr,

also ich bastel gerade eine Homepage und möchte das alle Divs mittig sitzen. Natürlich sollen die Divs IMMER mittig sitzen, auch wenn man die Fenstergrösse ändert.

www.antonfischer.de/test

Kann mir einer weiterhelfen? geht das nur mit Javascript (zuerst Fenstergrösse ermitteln, dann neu positionieren)?

über Tipps würde ich mich sehr freuen!

bis dann,

Sonja

[Markus]

Hello,

also ich bastel gerade eine Homepage und möchte das alle Divs mittig sitzen. Natürlich sollen die Divs IMMER mittig sitzen, auch wenn man die Fenstergrösse ändert.

Kein Problem mit CSS.

Kann mir einer weiterhelfen?

Ja.

geht das nur mit Javascript (zuerst Fenstergrösse ermitteln, dann neu positionieren)?

Nein, setze JS nie für derartige Dinge ein.
Da du weißt, wie breit deine Webseite ist, gibt dir das die Möglichkeit diese in ein darüberliegendes <div> zu packen, wobei du die Elternelemente zuerst auf 100% breite setzen musst, also body und html.
Nun richtest du diesen "Container" einfach auf left:50% und margin-left:-HALBE_BREITE_DES_CONTAINERS aus.

Markus.

[Markus]

Oh, noch ein Markus...
jetzt kommts zu verwechselungen ?!

[Markus]

Oh, noch ein Markus...
jetzt kommts zu verwechselungen ?!

Namen sind nun mal kaum einmalig.

Markus.

[Sonja]

Hallo Markus,

Nein, setze JS nie für derartige Dinge ein.
Da du weißt, wie breit deine Webseite ist, gibt dir das die Möglichkeit diese in ein darüberliegendes <div> zu packen, wobei du die Elternelemente zuerst auf 100% breite setzen musst, also body und html.
Nun richtest du diesen "Container" einfach auf left:50% und margin-left:-HALBE_BREITE_DES_CONTAINERS aus.

Markus.

Ja, toll! Genau das war mein Problem. Jetzt funktioniert´s!!!

Aber mal eine generelle Frage zu den Standarts:

Wie ist das mit den absolut positionierten Divs? Ich persönlich finde es halt eleganter, als tausend tables auf der Seite zu haben.

Sollte man die absolut positionierten Divs wirklich vermeiden?
Wenn ja: Gibt es eine Alternative außer Tables?

Sonja

[Struppi]

also ich bastel gerade eine Homepage und möchte das alle Divs mittig sitzen. Natürlich sollen die Divs IMMER mittig sitzen, auch wenn man die Fenstergrösse ändert.
www.antonfischer.de/test

uiuiui, DIV und SPAN soltest du nur im Zweifelsfall einsetzen wenn dir zum Inhalt kein anderes passendes HTML Element einfällt, das macht a.) den Quelltext besser lesbar b.) Suchmaschinen werden es dir danken und c.) alle Browser die kein CSS können können mehr mir der Seite anfangen.

Ansonsten bekommst du deinen Inhalt mittig einfach in dem du der Seite Links und Rechts einen gleihc Grossen Rand/Abstand zuweist:

body
{
padding-left:5%;
padding-right:5%;
}

Schon ist die Seite mittig.

Struppi.

[Markus]

Hallo,

Ansonsten bekommst du deinen Inhalt mittig einfach in dem du der Seite Links und Rechts einen gleihc Grossen Rand/Abstand zuweist:
body
{
padding-left:5%;
padding-right:5%;
}

Ja, aber wenn man genau psoitionierte Elemente wie Buttons verwendet, kann man das nicht mehr so ohne weiteres, ohne, dass die Buttons bei jeder Bildschirmauflösung wo anders kleben. Zumindest wüsste ich nicht, wie das funktionieren soll.

Markus.

[Struppi]

Ansonsten bekommst du deinen Inhalt mittig einfach in dem du der Seite Links und Rechts einen gleihc Grossen Rand/Abstand zuweist:
body
{
padding-left:5%;
padding-right:5%;
}

Ja, aber wenn man genau psoitionierte Elemente wie Buttons verwendet, kann man das nicht mehr so ohne weiteres, ohne, dass die Buttons bei jeder Bildschirmauflösung wo anders kleben. Zumindest wüsste ich nicht, wie das funktionieren soll.

Doch es gibt einen Trick, aber warum muss hier positioniert werden?
Und was hat die Bildschirmauflösung mit der Position zu tun?

Struppi.

[Markus]

Doch es gibt einen Trick, aber warum muss hier positioniert werden?

Wie sonst sollte man die Elemente pixelgenau positionieren?

Und was hat die Bildschirmauflösung mit der Position zu tun?

Im Grunde nichts, aber wie soll das Problem mit der pixelgenauen Positionierung von Elementen bewältigt werden, wenn sich die Bildschirmgröße ändert, und ich die Elemente nicht in einen darüberliegenden "Container" packe?
Ich handhabe es stets so, wie ich in meinem ursprünglichen Posting beschrieben habe, aber für neeu Vorschläge bin ich gerne offen.

Markus.

[Struppi]

Doch es gibt einen Trick, aber warum muss hier positioniert werden?

Wie sonst sollte man die Elemente pixelgenau positionieren?

Warum sollte man sowas tun?
Pixelgenauigkeit ist etwas das in einem HTML/CSS Umfeld vermieden werden sollte, da du keinerlei Informationen über die Größe der Darstellungsfläche hast wirst du damit immer Schwierigkeiten bekommen.

aber na gut, in etwa so:

#element
{
position:absolute;
left:50%;
width:500px;
margin-left:-250px;
}

Und was hat die Bildschirmauflösung mit der Position zu tun?

Im Grunde nichts, aber wie soll das Problem mit der pixelgenauen Positionierung von Elementen bewältigt werden, wenn sich die Bildschirmgröße ändert, und ich die Elemente nicht in einen darüberliegenden "Container" packe?

Wie gesagt, das Problem ist die Pixelgenaue Positionierung an sich.

Struppi.

[Markus]

Warum sollte man sowas tun?
Pixelgenauigkeit ist etwas das in einem HTML/CSS Umfeld vermieden werden sollte, da du keinerlei Informationen über die Größe der Darstellungsfläche hast wirst du damit immer Schwierigkeiten bekommen.

Eben, genau das ist auch das Problem. Beispielsweise ist ein Button ist so und so breit, so und so hoch, und soll an dieser oder jener Stelle sein. Wie sollte ich diese oder jene Elemente so positionieren, damit sie in dem von mir vorgesehenen Abstand zueinander stehen, oder auch so und so viel vom linken oberen Eck entfernt, bei mittig ausgerichteter Webseite?

#element
{
position:absolute;
left:50%;
width:500px;
margin-left:-250px;
}

So würde ich es eben auch lösen. Wie sollte man es auch sonst handhaben können?

Wie gesagt, das Problem ist die Pixelgenaue Positionierung an sich.

Wobei ich wieder bei der ersten Frage wäre.

Markus.

[Struppi]

Warum sollte man sowas tun?
Pixelgenauigkeit ist etwas das in einem HTML/CSS Umfeld vermieden werden sollte, da du keinerlei Informationen über die Größe der Darstellungsfläche hast wirst du damit immer Schwierigkeiten bekommen.

Eben, genau das ist auch das Problem. Beispielsweise ist ein Button ist so und so breit, so und so hoch, und soll an dieser oder jener Stelle sein. Wie sollte ich diese oder jene Elemente so positionieren, damit sie in dem von mir vorgesehenen Abstand zueinander stehen, oder auch so und so viel vom linken oberen Eck entfernt, bei mittig ausgerichteter Webseite?

Du musst nichts positionieren, alles fließt in einem CSS Layout.
Die Abstände zueinander werden mit margin beeinflußt.

So würde ich es eben auch lösen. Wie sollte man es auch sonst handhaben können?

Ich würd es nicht so machen, ich würde es so machen:

Entweder:
#element
{
margin:0 2%;
}

oder eben
body
{
margin:0 2%;
}

und alles ist mittig auf der Seite angeordnet.

Wie gesagt, das Problem ist die Pixelgenaue Positionierung an sich.

Wobei ich wieder bei der ersten Frage wäre.

Nicht ganz, die Antwort ist, verzichte auf Pixelgenaue Positionierung.

Struppi.

[Markus]

Hi,

Ich würd es nicht so machen, ich würde es so machen:

Entweder:
#element
{
margin:0 2%;
}

oder eben
body
{
margin:0 2%;
}

und alles ist mittig auf der Seite angeordnet.

Wie das aber mit einzelnen Elementen funktioniert, die zueinander einen von mir erwünschten Abstand haben sollen, verstehe ich noch immer nicht. Ist es desweiteren auch nicht so, dass der IE <= 5.x hier herummotzt? Bei margin:auto tut er es zumindest, da man hier wieder Umwege über text-align:center schaffen muss.

Markus.

[Detlef G.]

Hallo Sonja

www.antonfischer.de/test

Oh!
Schau dir die Seite bitte einmal ohne Grafiken an, oder mit einem Browser, der
kein CSS unterstützt, oder beides.

Schau dir die Seite mal mit vergrößerter Schrift an.
Ich kann den Text ohne Schriftvergrößerung kaum entziffern, nur leider brauche
ich für die Links auch dann noch eine Lupe.

Auf Wiederlesen
Detlef