Margin-Top funktioniert beim Footer nicht - Simples 2-Spalten Layout

  • Hallo zusammen :)


    Ich bin noch relativ Anfängerin im Webdevelopment und habe gerade angefangen mich mit CSS ein wenig zu beschäftigen.
    Habe also mein erstes 2-spaltiges Grundlayout geschrieben, war auch alles super, aber als ich es einen Tag später nochmal schrieb,
    um es zu wiederholen, da funktionierte plötzlich die margin-top-Anweisung bei Footer nicht. Der Footer hing genau an der Unterkante
    des Menüs und Inhaltsbereichs. Meiner Meinung nach ist der Code vollkommen korrekt.
    Ich konnte das Problem nur auf unschöne Art und Weise bereinigen : ich gab dem Inhaltsbereich eine margin-bottom Anweisung.
    Damit erreichte ich zwar das gewünschte Ergebnis, jedoch verstehe ich nicht, warum die margin-top Anweisung im Footer nicht greift.
    Oder übersehe ich etwas ?


    Bitte um Hilfe.


    Lieb Gruß,


    Beka



    Und hier der Inhalt der dazugehörigen CSS-Datei :



  • Hi,


    ich bins selbst Anfänger im bereich HTML und CSS, anfangs hatte ich den fehler gemacht auch immer Div's zu nehmen. Daraufhin habe ich den Hinweis hier im Forum erhalten mit Main, Nav, Header, Footer etc. zu arbeiten.


    Ich habe grad mal ein paar Div's bei dir umbenant, und dann die Breite des Content-Felder kleiner gemacht. Und schon hat es funktioniert.



    Tut mir leid dass ich es nicht genau erklären kann was bzw. warum ich es so gemacht habe. Wie gesagt, bin noch anfänger und probiere mich einfach nur durch :-)

  • Hmmm bei mir ist immer noch der selbe Fehler. Was für DIV-Container hast Du denn umbenannt ? Soweit ich sehe, hast Du doch die Namen beibehalten oder nicht ? Was mir auffällt ist, dass Du den <style> noch vor und somit außerhalb der <head> Bereichs gesetzt hast.
    Das ist ja nicht so ganz richtig :D Dann der CSS Code im HTML Code, aber den link auf die externe CSS-Bibliothek stehen gelassen hast -
    ist vermutlich kein Fehler, aber fiel mir halt auf ;) Naja, bei mir hat sich am Ergebnis nichts geändert leider :/
    Außerdem denke ich auch nicht, dass die Größe des Inhaltsbereichs eine Rolle spielt, solange es nicht den noch zur Verfügung stehenden Raum
    überschreitet. Die Sache finde ich sehr eigenartig.

  • Habe es soeben nochmals bei mir in DW eingefügt. Diesmal mit ausgelagerter CSS (URL habe ich für mich lokal in der HTML angepasst)


    und hier die CSS



    ich erhalte nun folgendes Bild :


  • Eigenartig - wie schon gesagt : bei mir verändert sich da nichts. Ich kriege den Footer nur mit einem margin-bottom vom Main-Bereich aus.
    Was mich allerdings etwas wundert bei deinem Code :

    Code
    1. [COLOR=#333333]#wrapper{[/COLOR] width: 800px;
    2. margin-bottom: 0px;
    3. margin-left: auto;
    4. margin-right: auto;
    5. margin-top: 32px; [COLOR=#333333]}[/COLOR]


    Dem Wrapper gibst Du einen margin-top ?

  • Oh toll - Vielen Dank explanator :)
    Dementsprechend ist also dann meine Lösung, durch Hinzufügen eines margin-bottom vom Inhaltsbereich ausgehend, eine legitime Variante das Problem zu beheben ?


    Gruß,


    Beka


    PS.: So wie ich gelesen habe

    Zitat
    • Nur die margins von statisch positionierten Elementen können zusammenfallen. Die margins von Elementen, die per float bzw. absolut oder relativ positioniert sind, werden immer dargestellt.


    .... und da mein Main-Bereich, der ja den Menü- und Inhaltsbereich enthält und die beiden jeweils gefloatet sind, nehme ich an,
    dass ich das so ruhigen gewissen machen kann.
    Liege ich da richtig ? :)