Lav en side, der flyder frit i vinduet

... med variabel margenbredde.

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.

Indhold med fast bredde

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:

  1. margin-left/right:auto er den korrekte måde at lave det på.
  2. Netscape, Mozilla og Opera viser det kun rigtigt, hvis det er lavet rigtigt.

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#indhold, kan du også undvære padding

knap  Se teknikken vist.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen april 2003
Hjemmesideskolen
Du er her: Forsiden - html - Flydende indhold - variable margener
Brugere lige nu: 1
Home Mail