Placer HTML-sidens indhold med float

Indlæs andet indhold på denne side:

En let og fleksibel måde at anbringe elementer på en html-side på er, at man anvender css-elementet float - eventuelt i kombination med elementet clear.

Topbar, menu, indhold og footer

Siden er opdateret 5.4.2007

Skal du placere en sides menu, topbar og indhold 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 (her har jeg desuden tilføjet en footer, så du kan se, hvordan det kan laves):

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 footeren (bundtekst). 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 footeren skal have en bredde svarende til et mønstermodul (her 20 px) og en højde svarende footerens ønskede højde.

Næste skridt bliver at definere body i css:

body{
margin: 0px;
padding: 0px;
color: black;
background: white;
background: 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{
color: black;
background: url(topbg.gif) top left repeat-x;
width: 100%;
height: 20px;
position: relative;
}

Hvorefter topbaren, der inkludereses i html laves som en include-fil topbar.inc:

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

Det er der slet ikke noget hokus pokus i.

Men en lille detalje: skal du have en <hx> stående som header i topbaren, skal denne overskrift indsættes med absolut position. Ellers vil det få topbaren til at rykke nedad på siden svarende til overskriftens margin-top:

h1 {
position: absolute;
top: 20px;
left: 110px; /*Sætter overskriften til at flugte venstre kant på teksten i #indhold*/
}

Tilsvarende topbaren skal vi have lavet en include-fil til menuen:

<div id="menu">Menuens punkter her</div>

Vi skal nu have placeret de to <div></div>'er til menuen og sideindholdet.

Menu-<div></div>'en tildeles float:left og en passende bredde. Den <div></div>, der skal indeholde sidens faktiske indhold, skal tildeles padding-left:110px. Ellers vil sideindholdet brede sig ind under menuen:

#menu{
float: left;
width: 100px;
padding-left: 5px;
}

#indhold{
padding-left: 110px;
padding-right: 20px;
}

Topbaren og menuen indsættes i sidens html:

<!--#include file="topbar.inc"-->
<!--#include file="menu.inc"-->

Læg mærke til, at den komplette topbar og menu skrives ikke, vi kan lige så godt have menuen liggende i selvstændige filer topbar.inc og 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.

Nu indsætter vi sideindholdet i html:

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

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

#footer{
clear: both;
color: black;
background: url(footer.gif) top left repeat-x;
position: relative;
}

#bundtekst {
position: absolute;
left: 110px;

Ved at definere clear:both sikrer vi, at bundteksten lægger sig helt nederst, uanset om menuen eller sideindholdet er længst.

Så laver vi include-filen til footeren:

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

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

<!--#include file="footer.inc"-->

Det gælder for footeren som for topbaren og menuen: Det er standardmoduler, der genbruges på flere sider, hvorfor vi laver det som en selvstændig fil, der inkluderes det rigtige sted i sidens kildekode.

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:

<!--#include file="header.inc"-->
<body>
<!--#include file="topbar.inc"-->
<!--#include file="menu.inc"-->
<div id="indhold">Her indsættes sidens indhold</div>
<!--#include file="footer.inc"-->
</body>
</html>

I modsætning til ved absolut positionering er rækkefølgen på de fire delelementer ikke ligegyldig, når du laver sideopbygningen med float!

knap

Se teknikken vist.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen juli 2003
Hjemmesideskolen
Du er her: Forsiden - html - Placer elementer på siden med float
Brugere lige nu: 1
Home Mail