Blogg

Jan

15:36

Div i XHTML

Elementet div är som standard stil lös och används till att bygga upp och designa en hemsida. När man ger arbetar med div’s använder man sig alltid av CSS för att placera och ge div’en det utseende man vill ha och där efter forma designen. Under 90-talet var det populärt att använda tabeller för att designa hemsidor och visst det funkar, men det var inte menat att tabeller skulle användas till det, utan tabeller ska presentera tabulära data, som siffror etc. Man får även onödigt tungladdad kod om man använder tabeller för att designa sina hemsidor därför är det smartare att jobba med div’s, det är även enklare.

Här är ett vanligt exempel hur div elementet kan användas:

<div class="bla-box">Texten som ligger inuti div’en</div>

Nu har vi gett div’en en class som heter ”stilen” och med hjälp av CSS ska vi nu ge den en fin liten stil.

.bla-box {
    Background-color: #84bcdf;
    Border: 2px solid #5e94b6;
    Margin: 10px;
    Padding: 10px;
}

För att vi anropar Class’en ”bla-box” börjar vi selectorn med en . (punkt). Koden ger oss är en box med himmelsblå bakgrund, mörkare blå linje runt boxen som är 2px tjock. Margin ger oss luft runt om boxen, 10 pixlar på alla fyra sidor i detta fall, och Padding ger oss 10 pixlar luft inuti boxen. Kom ihåg det, margin på utsidan, padding på insidan.

Resultat:

Texten som ligger inuti div’en

En enkel layout med div’s

Med div’s och CSS kan man utan bekymmer skapa en enkel layout till en hemsida. Layouten vi ska göra består av en header, två kolumner under samt en footer.

Såhär ser html koden ut:

<div id="wrapper">
    <div id="header"><h1>Header</h1></div>
    <div id="sidebar">En meny här kanske</div>
    <div id="main"><strong>Innehåll</strong><p> En massa text</p>
    </div>
    <div id="footer">copyright text etc.</div>
</div>

Nu har vi XHTML koden för en layout, div’en med id wrapper är där för att hålla om dom andra div’arna så dom inte flyter iväg eller hamnar fel. Resten är inte så klurigt, så nu hoppar vi över till CSS koden.

#wrapper { 
    width: 600px;
    margin: 0 auto;
    border: 1px solid #666666;
}

#header {
    width: 600px;
    border-bottom: 1px solid #666666;
}

#sidebar { 
    width: 149px;
    float:left;
    border-right: 1px solid #666666;
    border-bottom: 1px solid #666666;
}

#main { 
    width: 450px;
    float:left;
}

#footer {
    width: 600px;
    clear: both;
    border-top: 1px solid #666666;
}

För att #sidebar och #main ska lägga sig bredvid varandra använder vi oss av Float:left; som gör att div’arna lägger sig åt vänster. Om man har två div’ar med float:left; lägger dom sig bredvid varandra. När man använder sig av float måste man ”clear:a” dom annars kan innehållet som är under div’arna med float hamna fel. Det har vi gjort vi gjort i #footer med clear:both;

För att layouten ska hamna centrerad i webbläsaren avnänder vi margin: 0 auto; i #wrapper. Har lagt till några borders så det ska vara lättare se hur layouten ser ut.

Så ser det ut att skapa en enkel layout, för att piffa upp den är det bara att leka med CSS'en, lägga till lite färg, margin, padding etc. En mer genomgående artikel om hur man gör en design med div's kommer senare i HTMLskolan