Indlæs andet indhold på denne side:
Som hjemmesideejer vil man gerne have sine sider til at tage sig flot ud. Og man kan bruge lang tid på at få tekst og billeder til at gå op i en højere harmonisk enhed - indtil man ser siden i en anden skærmopløsning eller (især) en anden størrelse browservindue end den, man nu engang har arbejdet ved, da siderne blev lavet.
Men hvis man nu putter sidens indhold ind i en boks med fast bredde og lader denne boks flyde frit i vinduet, med margener som automatisk tilpasser sig størrelsen på det åbne browservindue, så er man ude over problemet.
Siden er opdateret 7. 12. 2011
Du starter med at lave denne definition i css:
body{
background:url(bg.gif);
color:black;
margin:0px;
text-align:center;
}
#indhold{
width:750px;
margin-top:20px;
margin-bottom:20px;
margin-left:auto;
margin-right:auto;
position:relative;
padding:10px;
text-align:left;
color:black;
background:#eef;
border:solid 1px #669;
}
Derefter laver du siderne på denne måde mellem <body> og </body>:
<div id="indhold">Her anbringes sidens indhold</div>
Definitionen text-align:center i body er nødvendig for at få indholdsboksen til at være midt på siden - også i MS IE 5.x
Dette skyldes, at MS IE 5.x ikke forstår margin-left/right:auto. Men vi vil ikke have teksten centreret i indholdsboksen, derfor indsættes text-align:left i #indhold.
Men hvorfor så ikke bare nøjes med text-align:center/text-align:left, hvorfor også margin_left/right:auto? Fordi:
For at gøre det muligt at lave en absolut positionering af sidens indhold inde i #indhold, har jeg tilføjet position:relative;.
For ikke at indholdsboksens indhold skal lægge sig helt ud til kanten af indholdsboksen, tilføjer vi padding:10px;. Hvis du undlader at sætte background og border på #indhold, kan du også undvære padding