[ Forrige | Indhold | Næste]

Lektion 12: Boks modellen - Højde og bredde

Hidtil har vi ikke bekymret os om dimensionerne af de elementer vi arbejder med. I denne lektion skal vi se på hvordan man helt simpelt definerer højde og bredde på et element.

• Angivelse af bredde [width]
• Angivelse af højde [height]

Angivelse af bredde [width]

Bredden af et element vil alt afhængigt af hvilken browser der anvendes enten fylde 100% i bredden, eller den vil automatisk have den bredde som indholdet fylder. Med width kan man definere en bestemt bredde for et element.

Nedenstående simple eksempel giver os en boks hvor vi f.eks. kan skrive noget tekst:

div.boks  {
	width: 200px;
	border: 1px solid black;
	background: orange;
}

 Vis som eksempel

Angivelse af højde [height]

Lagde du mærke til hvordan højden af vores boks ovenfor blot fyldte indholdet? Det kan du gøre noget ved med egenskaben height, som bestemmer højden på et element. Lad os prøve at gøre den samme boks som ovenfor 500px høj:

div.boks  {
	height: 500px;
	width: 200px;
	border: 1px solid black;
	background: orange;
}

 Vis som eksempel

Browser-kompatibelitet

Stort set alle browsere understøtter det du lige har lært. Hvis du er i tvivl kan prøve dig frem, eller referere til nedenstående tabel:

Tabellen viser fra og med hvilken version browseren understøtter den pågældende egenskab.

Opsummering

Lektion 9, 10, 11 og 12 har givet dig en introduktion til boks modellen i CSS. Som du sikkert kan se giver boks modellen dig mange nye muligheder. Hvor man tidligere i høj grad benyttede tabeller og grafik for at få smarte effekter kan man nu klare det samme mere elegant og præcist med CSS.

[ Forrige | Indhold | Næste]