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 indsat med negativ margin

Siden er opdateret 7. 12. 2011

Du kan også lave det sådan, at man starter med at definere, at boksen med sideindhold skal anbringes midt i vinduet. Her tildeler man boksen en negativ margen svarende til halvdelen af boksens bredde plus bredden på boksens kant:

body{
background:url(bg.gif);
color:black;
margin:0px;
}

#indhold{
position:absolute;
top:0px;
left:50%;
width:650px;
margin-top:20px;
margin-bottom:20px;
margin-left:-326px;
padding:10px;
color:black;
background:#eef;
border:solid 1px #669;
}

Læg mærke til, at her har vi ikke defineret text-align:center i body, det er derfor heller ikke nødvendigt at definere text-align:left i #indhold.

I html laves det på samme måde, som i første eksempel.

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