Placer html-elementer med absolut position

Indlæs andet indhold på denne side:

Placering af menu og topbar

Siden er opdateret 12. 12. 2005

Skal du placere en sides menu og topbar absolut, på samme måde som du ser her på Hjemmesideskolen f.eks., er det ikke noget problem. Lad os sige, at du ønsker at skabe dette udseende:

Sidens toptekst

Menupunkt 1

Menupunkt 2

Menupunkt 3

Sidens overskrift


sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst
Bundtekst - info til brugerne

Du starter med at lave de to baggrundsbilleder til toppen og til menuen. Billedet til toppen skal have en højde svarende til den ønskede topbar og en bredde svarende til et mønstermodul (her 20 px) - til en ensfarvet top er 1 px i bredden nok. Billedet til menuen skal have en bredde svarende til den ønskede menu og en højde svarende til et mønstermodul (her 10 px).

Næste skridt bliver at definere body i css:

body{
margin: 0px;
padding: 0px;
color: black;
background: white;
background-image: url(menubg.gif) top left repeat-y;
}

Vi starter med at sætte margin og padding til nul, så vi kan komme helt ud til browservinduets kanter med sidens elementer. I sidste linje indsættes menubg.gif i øverste venstre hjørne og der defineres, at billedet skal gentages lodret i hele vinduets højde.

Derefter skal vi i css lave en definition til sidernes topbar:

#topbar{
position: absolute;
top: 0px;
left: 0px;
color: black;
background-image: url(topbg.gif) top left repeat-x;
}

Topbaren placeres øverst til venstre på siden. I sidste linje indsættes topbg.gif i øverste venstre hjørne og gentaget vandret i hele vinduets bredde.

Vi kan nu i html indsætte sidens topbar. Det gøres på denne måde:

<div id="topbar"><h1>Sidens toptekst</h1></div>

Næste skridt bliver, at definere i css menuens placering på siden:

#menu{
position: absolute;
top: 45px;
left: 5px;
width: 90px;
}

Menuen bliver sat ind 5px under topbaren og 5px fra venstre sidekant. Bredden bliver sat til bredden på menubg.gif minus 10px.

Derefter skal vi i html indsætte menuen på siden:

<div id="menu"><!--#include file="menu.inc"--></div>

Læg mærke til, at den komplette menu skrives ikke, vi kan lige så godt have menuen liggende i en selvstændig fil menu.inc, som så inkluderes på alle sider. Derved er der kun et sted at rette, hvis der senere bliver tilføjet eller slettet en side - eller hvis en side får nyt navn.

Næstsidste skridt er at definere i css selve sideindholdets placering på siden:

#indhold{
padding-top:45px;
padding-left:120px;
padding-right:20px;
}

Indholdsblokken sættes ind 5px under topbaren (der er 40px høj) og 20px til højre for menuen (der er 100px bred). Desuden sættes en padding i højre side på 20px, så teksten ikke risikerer at gå helt ud til browservinduets kant. Det vil se tosset ud. Når jeg ikke sætter 20px i toppen, er det fordi overskriften alligevel har lidt luft foroven, som jeg så udnytter.

Når jeg ikke indsætter sideindholdet med absolut positionering, er det fordi det giver problemer i IE 6. Det er heller ikke nødvendigt med den absolutte positionering her.

Den absolutte positionering af topbaren og menuen gør, at de ikke fylder i flow'et, så indholdet lægger sig bare helt op i venstre hjørne, men det kompenserer vi for med padding til venstre og i toppen.

Vi fortsætter med at definere i html sidens indhold:

<div id="indhold">Her indsættes sidens indhold</div>

Så skal vi have defineret footer (bundtekst) i css:

#footer{
width:100%;
}

... hvorefter vi indsætter footer på siden:

<div id="footer">Bundtekst</div>

Man kan eventuelt fastlåse topbar, menu og footer til deres positioner:

#footer{
position:absolut;
bottom:0;
left:0;
width:100%;
}

body>div#topbar{
position: fixed;
}

body>div#menu{
position: fixed;
}

body>div#footer{
position: fixed;
}

... det fungerer desværre bare ikke i MS IE.

Husk, at alle definitionerne i html - #topbar, #menu, #indhold og #footer - skal anbringes mellem <body> og </body> og at hver af de fire definitioner skal afsluttes, inden den næste sættes ind:

<body>

<div id="topbar"><h1>Sidens toptekst</h1></div>
<div id="menu"><!--#include file="menu.inc"--></div>
<div id="indhold">Her indsættes sidens indhold</div>
<div id="footer">Bundtekst</div>

</body>

Da topbar og menu er indsat med absolut positionering, er det i princippet ligegyldigt, hvor i rækkefølgen af koder, topbar og menu indsættes. Resultatet bliver syns- og funktionsmæssigt det samme.

Man kunne også indsætte #indhold absolut, men det har vist sig at give uheldige virkninger i MS IE 6 i visse tilfælde - og da det ikke er nødvendigt med absolut position her, kan den lige så godt udelades.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen november 2001
Hjemmesideskolen
Du er her: Forsiden - html - Placer html-elementer med absolut position
Brugere lige nu: 1
Home Mail