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

Rebeka

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>CSS2</title>
         <link rel="stylesheet" style="text/css" href="http://localhost/style.css" />
    </head>


    <body>

            <div id="wrapper">

                    <div id="header">
                        <h1>Seitentitel</h1>
                    </div>

                    <div id="main">

                            <div id="menu">

                            </div>

                            <div id="contempt">

                            </div>

                    </div>

                    <div id="footer">

                    </div>
            </div>

    </body>
</html>

Alles anzeigen

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

Code

body{    background-color:black;
}




#wrapper{
    width:800px;
    margin:0px auto;
}




#header{
    width:800px;
    height:150px;
    background-color:grey;

    border-radius:15px;
}




#header h1{
    text-align:center;
    font-size:60px;
    padding-top:38px;
}




#main{
    width:800px;
}




#menu{
    margin-top:10px;
    width:300px;
    height:400px;
    float:left;
    background-color:grey;
    border-radius:15px;
}




#contempt{
    margin-top:10px;
    width:490px;
    height:400px;
    float:right;
    background-color:grey;
    border-radius:15px;
    margin-bottom:30px; /*<--- Nur hiermit konnte ich den Abstand zwischen main bzw. menu & contempt und footer erreichen*/
}




#footer{
    margin-top:30px;   /*<------- Hier ist der Part der einfach nicht funktioniert*/
    clear:both;
    width:800px;
    height:30px;
    background-color:grey;
    border-radius:5px;
}

Alles anzeigen

z1000

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style>


body{    background-color:black;
}




#wrapper{
    width: 800px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
}




#header{
    width:800px;
    height:150px;
    background-color:grey;

    border-radius:15px;
}




#header h1{
    text-align:center;
    font-size:60px;
    padding-top:38px;
}




#main{
    width:800px;
}




#menu{
    margin-top:10px;
    width:300px;
    height:400px;
    float:left;
    background-color:grey;
    border-radius:15px;
}




#contempt{
    margin-top: 10px;
    width: 450px;
    height: 400px;
    float: right;
    background-color: grey;
    border-radius: 15px;
}




#footer{
    clear: both;
    width: 800px;
    height: 30px;
    background-color: grey;
    border-radius: 5px;
}


</style>
    <head>
        <title>CSS2</title>
    </head>
        <link rel="stylesheet" style="text/css" href="http://localhost/style.css" />

    <body>

            <div id="wrapper">

                    <header id="header">
                        <h1>Seitentitel</h1>
                    </header>

                    <div id="main">

                            <menu id="menu">

                            </menu>

                            <div id="contempt">

                            </div>

                    </div>

                    <footer id="footer">

                    </footer>
            </div>

    </body>
</html>

Alles anzeigen

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

Rebeka

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 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.

z1000

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)

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>CSS2</title>
    </head>
        <link rel="stylesheet" style="text/css" href="style.css" />
    <body>
             <div id="wrapper">

                    <header id="header">
                        <h1>Seitentitel</h1>
                    </header>

                    <div id="main">

                            <menu id="menu">

                            </menu>

                            <div id="contempt">

                            </div>

                    </div>

                    <footer id="footer">

                    </footer>
            </div>

    </body>
</html>

Alles anzeigen

und hier die CSS

HTML

body{    background-color:black;
}




#wrapper{
    width: 800px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
}




#header{
    width:800px;
    height:150px;
    background-color:grey;

    border-radius:15px;
}




#header h1{
    text-align:center;
    font-size:60px;
    padding-top:38px;
}




#main{
    width:800px;
}




#menu{
    margin-top:10px;
    width:300px;
    height:400px;
    float:left;
    background-color:grey;
    border-radius:15px;
}




#contempt{
    margin-top: 10px;
    width: 450px;
    height: 400px;
    float: right;
    background-color: grey;
    border-radius: 15px;
}




#footer{
    clear: both;
    width: 800px;
    height: 30px;
    background-color: grey;
    border-radius: 5px;
}

Alles anzeigen

ich erhalte nun folgendes Bild :

Rebeka

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

[COLOR=#333333]#wrapper{[/COLOR]    width: 800px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px; [COLOR=#333333]}[/COLOR]

Dem Wrapper gibst Du einen margin-top ?

explanator

google mal nach margin collapse, das ist des Rätsels Lösung.

Rebeka

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 ?

explanator

zweimal ja.

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

Tags

Benutzer online in diesem Thema