Resultat 1 till 2 av 2

float och sidfot

  1. #1
    thatjeevess avatar
    thatjeeves thatjeeves är inte uppkopplad Lär mig SEO
    Reg.datum
    feb 2011
    Inlägg
    40
    Hej.

    Jag planerar att göra en hemsida med vertikal navigering. <div>-taggen med brödtexten ska ha float: left och navigeringen float: right. Jag vill även ha en sidfot. Jag har lärt mig att man ska ha clear: both på sidfoten. Hur exakt ska kodningen se ut? I vilken ordning ska div-taggarna komma i källkoden?

  2. #2
    welanders avatar
    welander welander är inte uppkopplad Kan SEO rätt bra
    Reg.datum
    aug 2011
    Ort
    Märsta / Stockholm
    Inlägg
    249
    Här kommer ett väldigt snabbt men fungerande exempel:

    HTML-kod:
    <div class="wrapper">
        <div class="head">Rubrik</div>
        <div class="content">Content kommer här</div>
        <div class="nav">
            <ul>
                <li><a href="#">Länk 1</a></li>
                <li><a href="#">Länk 2</a></li>
            </ul>            
        </div>
        <div class="footer">Footer</div>
    </div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
    CSS:

    Kod:
    ​.wrapper {
        width: 70%;
        margin: 20px auto;
    }
    
    .head {
        width: 100%;
        height: 20px;
        background: #ddd;
    }
    
    .content {
        background: #333;
        color: #fff;
        float:left;
        width: 70%;
    }
    
    .nav {
        background: red;
        float:left;
        width: 30%;
    }
    
    .footer {
        background: #000;
        color: red;
        clear: both;
    }
    ​
    Du får detta resultat: http://jsfiddle.net/9g2rp/

    Men precis, sätt clear: both; på footern.
    Senast redigerat av welander den 2012-06-25 klockan 23:09. Anledning: Gjorde CSS:en enklare att läsa.

Ämnesinformation

Användare som tittar på det här ämnet

Det är för närvarande 1 användare som tittar på det här ämnet. (0 medlemmar och 1 gäster)