Hvis du vil se html-kildekoden og stylesheet'et for hele siden, må du bruge browserens Vis kilde funktion.
Som du ser i dette eksempel, går spaltestregen fra underkanten af sidehovedet til overkanten af sidefoden, i modsætning til det, vi så i favoritlayout 1.
Grunden til disse tomme stykker var marginen på hhv.
h2
-elementet i toppen af artiklen og p
-elementet
i bunden af artiklen.
Forskellige browsere giver overskriftselementerne h1-h6
forskellig padding
og margin
, og du kan
ikke regne med, at alle browsere gør det ens. Hvis afstanden mellem
elementerne har betydning for dig, er det nødvendigt at du selv
sætter i hvert fald margin-top
, margin-bottom
,
padding-top
og padding-bottom
. På denne
side er der sket det, at jeg har givet h2
-overskriften,
der indleder artiklen, følgende formregler:
#indhold h2 { margin-top:0;padding-top:16px;}
Tilsvarende har jeg for vane at give p
-elementet
følgende egenskaber:
p { margin: 0 auto 0.5em auto;}
For at fjerne margin-bottom
på det nederste
p
-element og alligevel skabe lidt luft mellem det sidste
afsnit og sidefoden har jeg givet det sidste afsnit klassenavnet
last
og oprettet følgende formdeklaration for denne
klasse:
p.last { margin-bottom:0;padding-bottom:1em;}
Menuen er et CSS-menupanel af den slags, jeg skriver om i artiklen Introduktion til stylesheet-formaterede menuer, mere specifikt mit Menu kvikfix nr 1.
Da jeg nu ønsker at placere nogle andre kasser i venstre spalte er
det en stor fordel at kende menuens bredde ganske nøjagtig. Jeg sigter
mod en bredde på 180 pixel, så derfor giver jeg menuen (ul.cssmenu
)
en bredde på 178 pixel, hvortil kommer de 2 gange 1 pixel fra menuens
venstre og højre rammekant (border).
For i Internet Explorer at gøre et menupunkt aktivt i hele menuens
bredde er vi nødt til at give a
-elementet en eksplicit
bredde, der svarer til dette. Det sker i eksemplet med kodelinien:
* html ul.cssmenu li a { width:168px; }
Vil du vide mere om den sag, bør du læse den ovennævnte artikel om stylesheet-formaterede menuer.
div.leftcolbox { border:1px solid black; font-family:arial,sans-serif; font-size:0.9em; width:178px; margin-bottom:1em;}
Nu kan jeg så konstruere en css-kasse, der kan indsættes i venstre spalte og rumme resuméer teasers, links og hvad ved jeg. Formdeklarationen for denne kasse ser du herover.
For at skabe luft mellem kassens rammekanter og teksten giver jeg teksten en lille margin:
.leftcolbox p { margin:0 0.5em 0.5em 0.5em; padding:0;}
Endelig fremhæver jeg overskriften ved hjælp af følgende formdeklaration:
.leftcolbox h3 { font-size:1em; margin:0 0 0.5em 0; padding:3px 0.5em; border-bottom:1px solid black; color:white; background:gray;}
Da #leftcolbox
er en klasse, kan jeg oprette
så mange af dem som jeg vil.
Her er dog en faldgrube: Hvis du bruger linket i kassen baggrund i
venstre spalte, får #leftcol
-elementet en grå baggrundsfarve, der
tydeligt viser elementets udstrækning: En CSS-kasse får den højde,
indholdet tilsiger, medmindre vi giver elementet en eksplicit højde.
Hvis du nu forestiller dig, at du har en mængde kasser og andet i indhold i venstre spalte og ikke ret meget indhold i højre spalte, går det galt, hvad jeg har illustreret i websiden favoritlayout 1b.
Denne layoutkonstruktion duer kun, hvis du altid er sikker på, at højre spalte indeholder en del mere tekst end venstre spalte.
Hvis du ikke er sikker, må du enten kvitte sidefoden eller indsætte den som en smalle sidefod i bunden af højre spalte. Eller du må ty til en af de mere komplicerede konstruktioner, jeg også gennemgår i denne sektion (bl.a Lige høje spalter).
Mit næste favoritlayout er mere af samme skuffe, idet jeg simpelthen spejlvender hele balladen: Favoritlayout 2. I det eksempel eksperimenterer jeg også med at give siden et stærkere visuelt udtryk.
For at vurdere udstrækningen af #leftcol
-elementet
har jeg lavet et link, der gør det muligt for dig at sætte en
baggrundsfarve på elementet:
Baggrund. Klik igen for at
fjerne baggrunden.
Vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.