Ergebnis 1 bis 8 von 8

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

  1. #1
    HTML Newbie
    Registriert seit
    18.02.2014
    Beiträge
    4
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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

    Code:
    <!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>
    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;
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Rebeka (18.02.2014 um 22:42 Uhr)

  2. #2
    Teeny
    Registriert seit
    26.01.2014
    Beiträge
    25
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Margin-Top funktioniert beim Footer nicht - Simples 2-Spalten Layout

    HTML-Code:
    <!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>
    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
    Geändert von z1000 (18.02.2014 um 21:35 Uhr)

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    18.02.2014
    Beiträge
    4
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Margin-Top funktioniert beim Footer nicht - Simples 2-Spalten Layout

    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.

  4. #4
    Teeny
    Registriert seit
    26.01.2014
    Beiträge
    25
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Margin-Top funktioniert beim Footer nicht - Simples 2-Spalten Layout

    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-Code:
    <!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>
    und hier die CSS

    HTML-Code:
    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;
    }
    ich erhalte nun folgendes Bild :

    css2.jpg
    Geändert von z1000 (18.02.2014 um 22:31 Uhr)

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    18.02.2014
    Beiträge
    4
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Margin-Top funktioniert beim Footer nicht - Simples 2-Spalten Layout

    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:
    #wrapper{    width: 800px;
        margin-bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 32px; }
    Dem Wrapper gibst Du einen margin-top ?

  6. #6
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Margin-Top funktioniert beim Footer nicht - Simples 2-Spalten Layout

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

  7. Folgende User finden die Antwort von explanator gut:


  8. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    18.02.2014
    Beiträge
    4
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Margin-Top funktioniert beim Footer nicht - Simples 2-Spalten Layout

    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
    • 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 ?
    Geändert von Rebeka (19.02.2014 um 10:42 Uhr)

  9. #8
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Margin-Top funktioniert beim Footer nicht - Simples 2-Spalten Layout

    zweimal ja.

  10. Folgende User finden die Antwort von explanator gut:


Ähnliche Themen

  1. margin bzw padding wert rechts funktioniert nicht
    Von peerffm im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 18.11.2013, 14:28
  2. Dreispalten-Layout (zwei Spalten sind zu kurz)
    Von anagramm im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 23.12.2010, 22:45
  3. Margin-Top funktioniert nicht
    Von Darkxor im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 01.12.2009, 00:40
  4. Antworten: 10
    Letzter Beitrag: 12.10.2009, 10:06
  5. 2 spalten mit float & footer
    Von phore im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 14.03.2006, 17:04

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •