- Forsiden
- » Design
- » CSS layout
Autocentrering
Centrering af en webside i browservinduet beror i (næsten) alle tilfælde på, at alt websidens indhold indkapsles i en eller flere CSS-kasser, som er det eller de elementer, vi dernæst centrerer.
Der er forskellige metoder til centering, midtstilling, autocentrering eller hvad du nu fortrækker at kalde det. Jeg gennemgår disse i en håndfuld eksempler. På denne side gengiver jeg kun de vigtigste dele af de stylesheets, der knytter sig til de enkelte eksempler. Ønsker du at se stylesheet for hele eksempelsiden, må du bruge browserens Vis kilde funktion.
Autocentrering med lige brede
marginer: Denne metode består meget enkelt i at give body
-elementet
en højre og venstre margin, der er lige store. Dette vil så at sige
skubbe websidens indhold ind mod midten. Websidens bredde bliver
elastisk, det vil sige den ændrer sig med browservinduets bredde.
Marginernes bredde kan fastsættes med de mål, der passer dig og dit
formål. Det mest populære er nok brugen af procenter, som i eksemplet:
body { margin:1em 5%;padding:0; font-family:georgia,arial,sans-serif; background-color:rgb(245,245,255); color:#000; }
Autocentrering med auto-marginer:
Hvis din side har et overordnet element, der omfatter alt indhold
på siden, og hvis dette element har en bredde, kan du fordele den
overskydende plads ligeligt mellem venstre og højre side ved at
sætte de repektive marginbredder til auto
:
html, body { margin:0; padding:0; font-family:georgia,arial,sans-serif; background-color:rgb(245,245,255); color:#000; } #page { width:45em; margin:1em auto;}
Du behøver strengt taget ikke et overordnet element, der omfatter alt på siden. Har du for eksempel et banner, en indholdsdel og en sidefod, kan du lave det samme trick på hver af disse.
Autocentrering med negativ margin:
Her er tale om en lidt fiffig metode, hvor vi først flytter
#side
-elementet 50 procent ind på siden og dernæst
sætter en negativ margin på det halve af elementets bredde.
Derved centreres det midt på siden (midtstilling, er der nogle, der kalder det).
html, body { margin:0; padding:0; font-family:georgia,arial,sans-serif; background-color:rgb(245,245,255); color:#000; } #page { position:absolute; top:1em; left:50%; margin-left:-23.5em; width:45em;}
Hvis du vil sikre dig centrering også i Internet Explorer 5, er du nødt til at tilføje nogle ekstra formregler af hensyn til denne browser:
html, body { margin:0; padding:0; font-family:georgia,arial,sans-serif; background-color:rgb(245,245,255); color:#000; text-align:center; } #page { position:absolute; top:1em; left:50%; margin-left:-23.5em; width:45em; text-align:left;}
Autocentrering både vandret og lodret
Lodret centrering har jo kun mening, hvis alt websidens indhold kan være inden for en højde på browservinduet på 440 pixel. (Det er indholdsrudens højde i et browservindue, der er maksimeret til at fylde hele arealet af en 800*600 pixel monitor. Ved 1024 * 768 er det tilsvarende mål 605 pixel.)
#page {
position:absolute;
left:50%;
top:50%;
margin-left:-22.5em;
width:45em;
height:400px;
margin-top:-200px;
background:#dedede;
border-width:1px 0 1px 1px;
border-style:solid;
overflow:auto;}
Det tilsiger os, at vi er nødt til at operere med absolutte mål på det indhold, der skal centreres. Eksemplet Autocentrering både vandret og lodret viser en sådan webside, der er lavet med det stylesheet, du ser herover
Du kan sikkert genkende teknikken fra websiden om
Autocentrering med negativ margin.
Indholdskassen div#page
positioneres absolut med kassens
overkant 50% af browservinduets højde fra browservinduets overkant
og tilsvarende for kassens venstre kant. Dernæst gives
indholdskassen en negativ margin-top
på det halve
af kassens højde og en negativ venstre margin på det
halve af kassens bredde. “
Keine Hexerei, nur Behändigkeit”, som
tryllekunstnerne siger.
Du bemærker sikkert i eksemplet (medmindre du har en
meget stor monitor), at der er en lodret rulleskakt i
indholdskassen, idet det indhold jeg har, fylder mere i højden
end der er plads til inden for de 400 pixel. Denne rulleskakt
fremkaldes af overflow
-attributten, der er markeret
med rødt i stylesheet-kildekoden.
Overflow-attributten
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
div.box { float:left; width:210px; height:50px; margin:10px 0; padding:5px 10px; background:#c8d8e8; border:1px solid #000;} div#ex1 { overflow:hidden;} div#ex2 { clear:left; overflow:auto;}
Herover til venstre ser du et par kasser med
blå baggrund.
Kasserne, der har det samme tekstmæssige indhold, er lavet
med det stylesheet, du ser til højre for kasserne. Forskellen på
de to kasser skyldes de værdier, jeg har givet
overflow
-attributten.
Denne attribut tager følgende værdier: visible,
hidden, scroll, auto
og inherit
. I den øverste
kasse er værdien hidden
, i den nederste auto
.
Det vil føre for vidt her at gå i detaljer med de forskellige
virkninger, der fremkommer ved brug af de forskellige værdier -
især da browserunderstøttelsen og måden, hvorpå
attributten fortolkes i de forskellige browsere, er en noget indviklet
affære. Der er nok at vide, at værdien auto
sætter en lodret rulleskakt, hvis indholdet er for meget til
kassen (undtagen i Opera-browseren, der også sætter en
vandret rulleskakt), samt at værdien hidden
skal
bruges, hvis du ikke ønsker det overskydende indhold
vist.
Til mit formål, nemlig at lave en webside, hvor alt indholdet
er centreret, også lodret, kan jeg nøjes med at bruge
overflow:auto
. Det er værd at bemærke, at
jeg skal have en absolut højde på kassen
div#page
, for at overflow-attributten kan gøre
sit kunststykke.
Relativ bredde
Den absolutte højde på indholdskassen er ikke til at komme uden om, hvis du vil have lodret centrering. Men kan vi ikke lave det sådan, at indholdskassens bredde øges, hvis browservinduets bredde øges - altså ala det, jeg demonstrerede på websiden Autocentrering med relative marginer.
#page { position:absolute; left:50%; top:50%; margin-left:-40%; width:80%; height:400px; margin-top:-200px; overflow:auto; background:#dedede; border-width:1px 0 1px 1px; border-style:solid;}
Jo, med lidt omtanke kan vi jo erstatte nogen af værdierne i stylesheet'et ovenfor, så vi får det stylesheet, der ses herover.
Eksemplet præsenteres på websiden Vandret og lodret centrering - relativ bredde.
Joe Gillespie på http://www.wpdfd.com rapporterer, at Opera browseren har problemer med denne løsning. Jeg har ikke kunnet duplikere dette problem. Støder du på det, foreslår Gillespie en workaround på ovennævnte webadresse.
Konklusion
I denne har jeg givet forskellige CSS-løsninger på opgaven at centrere et element i browservinduets indholdsrude. Til vandret centrering foreslå jeg Centrering med automarginer, til både vandret og lodret centrering foreslår jeg brugen af en absolut højde på elementet og relativ bredde af elementet: Autocentrering både vandret og lodret – relativ bredde
Denne side er senest opdateret: February 25, 2006
Artikler om CSS-layout
- Noter om websidelayout
- Nogle argumenter for CSS-baseret layout fremfor layout baseret på tabeller. Links til mange eksempler, hvor jeg demonstrerer et antal modeller til layout ved brug af position-egenskaben.
- Kvikguide til eksemplerne
- Vil du hellere ha’ en hurtigt læst oversigt over (alle) mine eksempler, skal du gå til denne side.
- Fra tabellayout til CSS-layout
- Demonstration af, hvorledes nogle typiske tabelbaserede layout-modeller omsættes til CSS.
- Grafik i sidehovedet
- Links til et par eksempler på et sidehoved med grafik
- Autocentrering
- Forskellige metoder til at centrere en websides indhold i browservinduet.
- Websidelayout med float
- En diskussion af fordele og ulemper ved de to layout-principper.
float-metoden er uundværlig, når du skal skabe indtryk af lige høje kolonner eller spalter. - 3 lige høje spalter med CSS
- Denne artikel beskriver hvordan du kan lave et 3-spaltet layout, hvis højde indretter sig efter den spalte, der har det meste indhold.
- Gelé-layout
- En brillant idé, der gør det muligt at arbejde med minimums- og maksimumsbredder på websiden, og tillige opnå en variabel øgning af bredden.
- Layout med “Det gyldne snit”
- Duer det gyldne snit som forlæg til websidelayout?
Webdesign – illustreret håndbog
– er i løbet af kort tid slået igennem som grundbogen for dem, der ønsker at lære sig websidekonstruktion, og tillige ønsker at gøre det på en håndværksmæssig solid måde. Køb den hos forlaget Globe.
Online support
Hvis du bliver abonnent på mit nyhedsbrev får du øjeblikkelig e-mail opdatering i tilfælde af rettelser eller uddybende forklaringer til eksempler og beskrivelser mine bøger.
Samtidig får du også gennem disse nyhedsbreve besked om nye og opdaterede artikler på dette websted.
Du kan læse mere om denne sag på websiden Nyhedsbrev.