I CSS behandles elementer grundlæggende som rektangulære kasser eller striber. Til beskrivelse af kasserne bruges følgende - sikkert allerede kendte - egenskaber:
• width - elementets bredde
• height - elementets højde
• left - afstand til venstre
• right - afstand til højre
• top - afstand til toppen
• bottom - afstand til bunden
• margin - ydre margin
• border - rammen om elementet
• padding - indre margin, dvs. afstanden fra rammen til elementets indhold
Disse egenskaber er allerede blevet præsenteret.
Bredden af et element udregnes ved at addere bredden af de enkelte angivelser. (Det samme gælder i øvrigt for højden).
Et eksempel:
div#box {
width: 100px;
padding: 20px; /* hver 20px venstre og højre /
border: 2px solid; / hver 2px venstre og højre /
margin: 0 30px; / hver 30px venstre og højre */
}Hvilken bredde har denne div-område? Lad os se nærmere på de enkelte værdier:
• 100 pixels
• 2 gange 20 pixels
• 2 gange 2 pixels
• 2 gange 30 pixels
Dette giver en samlet bredde på elementet på 204 pixels.
Bredde og højde af elementer afgøres via width og height. Hvis disse angivelser ikke står eksplicit i stylesheetet, gælder følgende:
• Mangler width, vil boksen vises lige så bred som det omgivende element.
• Mangler height, vil elementet vises så højt som dets indhold.
Et eksempel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* hver 2px venstre og højre */
margin: 0 30px; /* hver 30px venstre og højre */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
I browseren ser det således ud:
Det overordnede element for div-elementet er body. Derfor vil elementet faktisk vises lige så bredt som body-elementet. Hvad højden angår, vil den derimod tilpasse sig indholdet.
Alt på nul
Hver browser har sit indbyggede stylesheet. I disse stylesheet er der defineret nogle standardværdier. Dette gælder fx også for padding og margin. Og disse standardværdier varierer desværre i de forskellige browsere. Dette aspekt gør det vanskeligt at opnå identiske resultater i de forskellige browsere, blandt andet i forbindelse med boxmodellen. Derfor anbefales det at nulstille margenerne og paddingen, som er foruddefineret i browserne. Dette kan gøres på følgende måde:
* { padding: 0; margin: 0; }
Tilføj denne linje øverst i dit stylesheet. På denne måde kan du begynde at placere boksene på de ønskede steder.
Boks-typer
Hvordan et element endelig vises og påvirker andre elementer afhænger af typen af elementet. CSS-specifikationen adskiller faktisk mellem blokelementer og inline-elementer. (Der er stadig andre typer, der ikke nævnes her, da de kun spiller en underordnet rolle).
Blokelementer opretter altid en ny linje. Efterfølgende elementer starter også på en ny linje. Typiske blokelementer inkluderer f.eks. p, div, h1, ul osv. For disse elementer gælder de tidligere nævnte egenskaber om ydremargen, indremargen, højde, bredde og ramme.
<h1>Digital Painting & Matte Painting: Definer billedopbygningen</h1> <p>Modul 2 - Del 2: Et billede er altid en helhed. Dog skal man altid overveje, hvor betragteren først skal se hen.</p>
Når man ser på resultatet i browseren, vil h1 og p skabe deres egne linjer.
Inline-elementer opretter derimod ikke deres egen afsnit, de vises snarere i normaltekststrøm. Typiske inline-elementer inkluderer span, em, strong, img, br osv. For inline-elementer gælder ingen vertikale ydremarginer og ingen angivelser af bredde og højde.
<h1><em>Digital Painting & Matte Painting</em>: Definer billedopbygningen</h1> <p>Modul 2 - Del to: <strong>Et billede er altid en helhed</strong>. Dog skal man altid overveje, hvor betragteren først skal se hen.</p>
Og her er et kig på resultatet:
Nu kan I ændre elementer, der normalt er blokkelementer, til inline-elementer.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Del 2: <em>Et billede er altid en helhed</em>. Dog skal man altid overveje, hvor betrachteren først skal kigge hen.</p>
</body>
</html>Se resultatet i browseren.
Baggrundsfarven på h1-overskriften signalerer, at elementet strækker sig over hele bredden. Bredden tilpasses herefter det overordnede body-element.
Nu kommer egenskaben display på banen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Del 2: <em>Et billede er altid en helhed</em>. Dog skal man altid overveje, hvor betrachteren først skal kigge hen.</p>
</body>
</html>
Ved display: inline ændrer elementets bredde sig.
Faktisk tilpasser elementets bredde sig nu til det eksisterende indhold. Her er en oversigt over hvilke værdier display stadig kan tildeles:
• none – ingen visning
• block – elementet vises som et blokkelement, hvilket skaber en ny linje.
• inline – elementet vises som et inline-element, og vises således i den løbende tekststrøm.
• inline-block – skaber eksternt en blok, hvor højde, bredde og ydermargin kan angives. Hvert element forbliver dog i den løbende tekststrøm. Det er derfor en kombination af et blok- og et inline-element.
• list-item – elementet vises som et blokkelement. Der tilføjes dog en opstillingsmarkør foran det.
• run-in – skaber afhængigt af indholdet enten et blok- eller et inline-element.
• table – fungerer som det kendte table-element i HTML.
• inline-table – fungerer som HTML-elementet table, men er inline.
• table-row – elementet indeholder børneelementer arrangeret side om side. Fungerer som HTML-elementet tr.
• table-cell – elementet repræsenterer en tabelcelle og fungerer som de to HTML-elementer th og td.
• table-row-group – elementet indeholder en gruppe elementer med flere side om side arrangerede børneelementer og fungerer som tbody-HTML-elementet.
• table-header-group – elementet indeholder en gruppe elementer med flere side om side arrangerede børneelementer og fungerer som thead-HTML-elementet.
• table-footer-group – elementet indeholder en gruppe elementer med flere side om side arrangerede børneelementer og fungerer som tfoot-HTML-elementet.
• table-column – her beskrives egenskaberne for cellerne i en kolonne. table-column fungerer som HTML-elementet col.
• table-column-group – dette element indeholder en gruppe af elementer, hvor egenskaberne for cellerne i en kolonne beskrives. Det fungerer som HTML-colgroup-elementet.
• table-caption – her defineres tabellen overskriften. Egenskaben fungerer som HTML-elementet caption.
Faktisk tilbyder CSS derfor forskellige visningsoptioner for forskellige elementtyper. Disse spiller en afgørende rolle i forhold til positionering af elementer. Mere om dette i de kommende tutorials.
