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.

Indholds bredde defineret som pct. af vindue

Siden er opdateret 7. 12. 2011

Endelig er der en version, hvor boksen med sideindhold altid optager en fast procentandel af bredden på det åbne browservindue. Du laver i css koden sådan:

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

#indhold{
width:90%;
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;
}

Eneste forskel fra første eksempel er, at bredden er defineret som en procentandel af browservinduet i stedet for en pixelfast bredde.

Her har vi igen defineret text-align:center i body, hvorfor vi må tage samme forholdsregel i #indhold som i første eksempel.

I html laves det på samme måde som vist 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