Den här artikeln bygger vidare på artikelserien "Skapa webbsida" som visar hur du bygger upp en webbsida i praktiken.

Skapa kantlinjer

Låt säga att du vill skapa en heldragen svart linje som omsluter navigationsmenyn/ sidhuvudet, en annan heldragen linje som omsluter huvudtexten och en tredje streckad linje som omsluter alla sidor utom toppsidan på sidfoten.

Lägg till följande kod i stilmallen, markerat med rött, för deklarationerna div#sidhuvud samt div#huvudtext.

div#sidhuvud {
margin: 0;
padding: 20px;
background-color: white;
border: solid 1px;
}

div#huvudtext {
margin: 50px 0 0 0;
padding: 20px;
background-color: white;
border: solid 1px; }

För att du ska få se några fler möjligheter så väljer vi att skapa en border till sidfoten som är öppen upptill. Vi väljer också att göra kantlinjen punktad.

Lägg till följande kod, markerat med rött:

div#sidfot {
text-align:center;
background-color: #CCCCCC;
color: #444444;
font-size: 9px;
border-style: none dotted dotted dotted;
border-width: 0 1px 1px 1px;

}

Det går dock lika bra om du istället för ovanstående kod lägger till:

div#sidfot {
text-align:center;
background-color: #CCCCCC;
color: #444444;
font-size: 9px;
border-right: dotted 1px;
border-bottom: dotted 1px;
border-left: dotted 1px;

}

För att du ska lära dig ännu en grej så byter vi färg på kantlinjen genom att lägga till följande:

div#sidfot {
text-align:center;
background-color: #CCCCCC;
color: #444444;
font-size: 9px;
border-right: dotted 1px;
border-bottom: dotted 1px;
border-left: dotted 1px;
border-color: #444444;
}

Detta ger kantlinjen samma färg som texten i sidfoten.

Slutresultat

Så här bör din webbsida se ut nu: HTML-version
Filer för nedladdning: XHTML (.txt) CSS (.txt)

Hitta ett billigt webbhotell för din hemsida

12:-/mån
One Webbhotell Betyg
15:-/mån
Web10 Webbhotell Betyg
36:-/mån
Host Gator Webbhotell Betyg
36:-/mån
Surftown Webbhotell Betyg

Snabbguider

Nedanför finns information för dig som vill komma igång med en hemsida på snabbast möjliga sätt - utan fokus på webbspråk.

Ett litet "gilla" är också ett sätt att hjälpa sajten. =)