margin:auto hat keine Wirkung. Finde den Fehler nicht

[AlexF]

Hallo,

ich habe bis jetzt beim HP basteln immer wild mit HTML und CSS rumformatiert.
Nun versuche ich gerade eine kleine Homepage für meine Freundin zu schreiben und die möchte ich mal "richtig" mit CSS formatieren.
Vollgendes Problem bekomme ich irgendwie nicht in den Griff.
(Wahrscheinlich irgendwo ein kleiner Flüchtigkeitsfehler?)
Ein Bild soll oben auf der Seite zentriert erscheinen.
Dies habe ich per margin:auto versucht. Hier mal der code:

#menuom {
position:absolute;
top:0px;
height:51px;
width:300px;
margin:0px auto;
border:0px solid #000000;
padding:0;
}

<div id="menuom">
  <img src="../bilder/menu/steckbrief.gif" width="300" height="51" border="0" alt="Steckbrief">
</div>

Das Bild erscheint bei mir immer ganz links im Browser.
Grüße Alex

[Struppi]

Dies habe ich per margin:auto versucht. Hier mal der code:

#menuom {
position:absolute;

Wozu diese Positionierung?

Struppi.

[AlexF]

Dies habe ich per margin:auto versucht. Hier mal der code:

#menuom {
position:absolute;

Wozu diese Positionierung?

Struppi.

Danke erstmal für die fixe Antwort.
Ich muss ehrlich gesagt zugeben, dass ich es nicht weiß.
Ich habe vor ner Woche einen Grundkurs HTML & CSS gemacht
und dort haben wir solche <div> elemente immer so angelegt.
Leider habe ich trotz SELFHTML immernoch nicht wirklich verstanden für was ich position:absolute wirklich brauche.
Gruss Alex

[Struppi]

Leider habe ich trotz SELFHTML immernoch nicht wirklich verstanden für was ich position:absolute wirklich brauche.

in dem Fall gar nicht, dann klappt's auch mit margin: auto

Struppi.

[Der Martin]

Hallo,

Ich habe vor ner Woche einen Grundkurs HTML & CSS gemacht
und dort haben wir solche <div> elemente immer so angelegt.

sag bloß, es wird immer noch so ein Quatsch gelehrt wie Elemente ohne Notwendigkeit in divs zu verpacken?
Der Sinn des div-Elements ist, einen Container zur _Gruppierung von mehreren anderen Elementen_ zu bilden. Ein div mit nur einem Element ist fast immer unnötig oder gar sinnlos; gleiches gilt für komplett leere divs.

Und der Gedanke "Ich brauche ein div, um Elemente mit CSS zu formatieren" hält sich wohl hartnäckig, aber davon wird er nicht richtiger. Man sollte den HTML-Code so schreiben, dass er die Struktur des Dokuments (nicht seine Gestaltung) bestmöglich wiedergibt, und kann CSS-Eigenschaften dann auf jedes beliebige Element direkt anwenden.

Ciao,
 Martin

[AlexF]

Hallo,

vielen Dank für Eure Antworten.
Durch Eure Antworten haben sich zwar ein paar neue Fragen aufgetan,
aber die werden mir warscheinlich beim verstehen von CSS weiterhelfen.
So langsam fällt der Groschen, zwar in Pfennigen aber er fällt ;).
Ich werd jetzt erstmal ein bischen lesen und wenn ich etwas ganz und garnicht auf die Reihe bekomme wieder schreiben.
Gruß Alex

[michaah]

sag bloß, es wird immer noch so ein Quatsch gelehrt wie Elemente ohne Notwendigkeit in divs zu verpacken?
Der Sinn des div-Elements ist, einen Container zur _Gruppierung von mehreren anderen Elementen_ zu bilden.

Danke, das war mir nicht klar. Dieser hinweis hat mir nun weitergeholfen.

[Der Martin]

Hi,

Nun versuche ich gerade eine kleine Homepage für meine Freundin zu schreiben und die möchte ich mal "richtig" mit CSS formatieren.

eine löbliche Absicht. ;-)

Ein Bild soll oben auf der Seite zentriert erscheinen.
Dies habe ich per margin:auto versucht. Hier mal der code:

#menuom {
position:absolute;
top:0px;
height:51px;
width:300px;
margin:0px auto;
border:0px solid #000000;
padding:0;
}

Du hast das Element absolut positioniert und damit aus dem Kontext der restlichen Seite herausgenommen.
Versuche, absolute Positionierung soweit wie möglich zu vermeiden. Das Thema ist nicht trivial zu verstehen; meistens versuchen Anfänger damit, ihre Elemente irgendwo auf der Seite festzukleben, obwohl es sehr viel elegantere und oft auch einfachere Möglichkeiten gibt (z.B. float oder margins und paddings). Absolute Positionierung hat, wenn man sie nicht vollständig versteht, so viele überraschende Nebenwirkungen, dass ich Anfängern grundsätzlich davon abraten würde.

Das Bild erscheint bei mir immer ganz links im Browser.

Richtig. Vermutlich bezieht sich die absolute Positionierung in deinem Kontext auf das Browserfenster. Deine Positionsangabe ist top:0px (ganz oben), aber für left machst du keine Angabe. Es gilt also der Defaultwert 0 (ganz links).

Nebenbei: Wenn du die position-Angabe einfach wieder weglässt, hast du schon beinahe das gewünschte Ergebnis. Die top-Eigenschaft wird dadurch natürlich auch wirkungslos, aber da sie ohnehin als 0 angegeben war, macht das keinen Unterschied.

<div id="menuom">
  <img src="../bilder/menu/steckbrief.gif" width="300" height="51" border="0" alt="Steckbrief">
</div>

Was soll eigentlich das div-Element? Es ist vollkommen überflüssig, wenn es nur dieses eine Bild enthält. Gib stattdessen direkt dem img-Element die ID und lass die CSS-Angaben direkt auf das Bild wirken. Ergänze evtl. ein display:block, wenn es sich wie ein Blockelement verhalten soll.

So long,
 Martin