Beiträge von Rebeka

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 ?

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 ?

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.

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

Beiträge von Rebeka

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

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

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

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