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 med værdien em

Siden er opdateret 12. 12. 2005

Sidens bredde og fontstørrelser kan defineres med værdien em, det har den effekt, at hvis brugeren ændrer på den viste fontstørrelse, ændres sidens bredde tilsvarende og sidens design er stort set uændret:

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

#indhold{
width:40em;
margin-top:2em;
margin-bottom:2em;
margin-left:auto;
margin-right:auto;
position:relative;
padding: 1em;
text-align:left;
color:black;
background:#eef;
border:solid 1px #669;
}

Eneste forskel fra første eksempel er, at bredden er defineret som et multiplum af bredden på bogstavet m 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.

Desværre er Hjemmesideskolens sidedesign ikke så velegnet til denne demo, det går især galt i Opera og IE. Jeg har derfor til denne demo lavet en 'flad side'.

^ 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