Hjemmesideskolen
Du er her: Forsiden - html - testsider - Eksempel på float - topbar, menu og indhold
sidens top
Brugere lige nu: 1
Home Mail

Eksempel på brug af float

til indsættelse af elementerne 'topbar', 'menu', 'indhold' og 'footer'

Siden er opdateret 23.1.2008

På denne side er 'topbar' indsat øverst på siden og derunder er elementerne 'menu' og 'indhold' indsat med float:left

Første skridt er, at du laver de to billedfiler, der skal udgøre baggrund i topbar og menu. Filen til topbaren skal (til dette design) have samme højde som topbaren og en bredde svarende til 1 tern. Filen til menuen skal tilsvarende have en bredde svarende til menuen og en højde svarende til 1 tern.

Her til venstre ser du først billedfilen til topbaren og derefter billedfilen til menuen og billedfilen til footer.

For at tydeliggøre grænsen mellem siden og det hvide i billederne har jeg lagt billederne på en grå baggrund.

Derefter skal der i css defineres nul margin og nul padding på body. Det er nødvendigt for at kunne sætte topbaren helt op i øverste venstre hjørne og lade den fylde helt ud til højre kant af browservinduet.

Topbaren skal sættes til en bredde på 100% (hele vinduets bredde) og en højde, svarende til det baggrundsbillede, du har lavet til formålet.

Derudover skal der for menuens vedkommende defineres float:left, så der bliver plads til det egentlige sideindhold til højre herfor. Også sideindholdet skal have float:left, så det ikke smyger sig ind til venstre kant af browservinduet der nede, hvor menuen er slut.

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

#topbar{
color: black;
background: url(topbg.gif);
width:100%;
height:80px;
z-index:3;
}

#menu{
float: left;
width: 150px;
padding-left:5px;
font-family:verdana,arial,sans-serif;
font-size:10px;
}

#indhold{
margin-top:0px;
margin-left:170px;
margin-right:10px;
font-family:verdana,arial,sans-serif;
font-size:12px;
}

#footer{
clear:both;
padding:5px;
text-align:center;
font-size:8px;
color:#000;
background:#f6f6ff;
}

Herover ser du de fundamentale css-koder til sideopbygningen. Læg selv dem til, der skal definere udseendet på sidens enkelte elementer. Husk også at tilrette stien til dine baggrundsbilleder.

Du er nu klar til at indsætte de tre elementer i dit html-dokument mellem <body> og </body>:

<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">Her har vi lidt bundtekst i footer</div>

</body>

^ Tilbage til sidens top