Homepage Kasten

Hallo,

ich möchte auf meiner homepage einen Kasten machen, der eine bestimmte größe hat, aber immer in der mitte ist. Kann mir da jemand helfen.

Danke schonmal im vorraus

Moin,

Grundlagen von CSS.

Dein Kasten ist vermutlich ein Block-Element (muss kein div sein, div nur, wenn es mehrere Elemente gruppiert).

Feste Breite? Das solltest Du schon hinbekommen haben: width

Zentrieren von Block-Elementen? Indem man den Abstand nach links und rechts gleich groß macht: margin:0 auto

Liebe Grüße,
-Efchen

P.S.: Bzgl. Deiner Stichworte: CSS kennt keine „Befehle“. CSS ist keine Programmiersprache.

Es gibt da noch ne andere Lösung, die funktioniert, egal wie breit die Seite oder das umgebende Element ist:

#align{
width : 1000px;
position: absolute;
left: 50%;
margin-left: -500px;

Das setzt den linken Randabstand auf die Hälfte des umgebenden Elements (z.B. der Seite oder eines div’s) und subtrahiert danach davon die Hälfte der Breite des formatierten Elements. Damit mußt Du nicht wissen, wie breit das umgebende Element ist, was beim Fenster nur über JavaScript in Erfahrung zu bringen wäre.
Viele Grüße,
Thomas

Min,

Es gibt da noch ne andere Lösung, die funktioniert, egal wie
breit die Seite oder das umgebende Element ist:

Meine Lösung ist die reguläre Weise, wie Du ein Block-Element horizontal zentrierst. Deine Lösung funktioniert nicht immer.

Das setzt den linken Randabstand auf die Hälfte des umgebenden
Elements (z.B. der Seite oder eines div’s) und subtrahiert
danach davon die Hälfte der Breite des formatierten Elements.

Und wenn der Viewport kleiner ist, als das Element breit ist, dann rutscht der Inhalt *links* aus dem Bild raus, und wie jeder weiß, gehen Scrollbalken nur nach rechts aber nicht nach links - damit ist der Inhalt in Deiner Lösung unerreichbar - keine Lösung!

Damit mußt Du nicht wissen, wie breit das umgebende Element
ist, was beim Fenster nur über JavaScript in Erfahrung zu
bringen wäre.

Aber eben nicht, wenn Du regulär mit „margin:0 auto“ zentrierst.

Liebe Grüße,
-Efchen

1 Like