Favoritlayout 1a

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.

Overskriftselementer

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;}

Menu og tekstboks

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.

Retur til foregående

Baggrund

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.

Newsbox

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.