Kantlinjer, border

Den här artikeln bygger vidare på den startsida som vi bygger upp med XHTML och CSS i guiden "Webbsida - praktiska exempel".

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)

Relaterade artiklar

• Webbdesign
• XHTML
• CSS
• Hemsideprogram
• Köp Dreamweaver