Placering og design med div og css
Af Allan Vebel
Opdateret: 20-10-2011
Frames, tabeller eller div og css?
Alle snakker om det, men ingen gør noget ved det. Debatten om hvorvidt man skal bruge frames eller tabeller til sit design vil ingen ende tage. Mange siger at du skal bruge <div> til designet, men det er jo ikke nemt - eller er det?
Brug det med forsigtighed
Jeg har imidertid fundet det utroligt nemt at anvende position:absolute; til at placere elementer på siden, præcis hvor jeg vil have dem. Således er topbaren på denne side et eksempel på dette. Søgefeltet og de 4 ikoner er også placeret med en pixelnøjagtighed som man næppe kan lave med en tabelcelle og valid kode, uden at fedte frem og tilbage med cellebredde og så videre.
Det er ikke meningen at alle elementer skal placeres
Som udgangspunkt starter vi i css med:
body{
font-family:verdana,arial,sans-serif;
background-color:#ffff99;
background-image:url(baggrund.gif);
background-repeat:repeat-y;
color:black;
margin:0px;
padding:0px;
font-size:0.8em;
}
De 3 background-egenskaber kan samles på en linje:
background:#ffff99 url(baggrund.gif) repeat-y;
Baggrunden kan naturligvis undværes, men skal menuen skille sig ud fra det øvrige, er det er god ide at lægge en baggrund på <body>, frem for at lave en <div> indeholdende en baggrund. Så er det bedre at positionere en menu oven på denne baggrund.
Baggrunden kan eksempelvis se ud som på nedenstående billede. I dette tilfælde er baggrunden 10 pixels i højden og 150 pixels bred, hvorefter billederne er stablet oven på hinanden med repeat-y.
Lav selv din baggrund i et grafikprogram så den passer til dit formål og i de farver eller mønstre du ønsker.
Det næste vi tager fat på er placeringen af en topbar. Den er defineret i css på denne måde:
#topbar{
position:absolute;
top:0px;
left:0px;
height:40px;
width:100%;
background:url(topbar.gif);
color:black;
}
Den er placeret i html med koden:
<div id="topbar"></div>
Den indeholder således ikke andet end billedet, hvor andre ting så kan placeres oven på dette billede - det er det der er hele fidusen i det. Lav din topbar i et grafikprogram og tilpas din css med height:XXpx; så det passer til billedets højde. Billedet kan ligeledes være 2000 pixels bredt - og da det ligger som baggrund, kommer der ikke en vandret scrollbar som normalt ved indsættelse af brede billeder.
Din topbar kunne se ud som nedenstående:
Den kan også være uden logo eller andre ting - det kan du så placere bagefter. I dette tilfælde er billedet 40 pixels i højden og 2000 pixels i bredden.
Nu er vi klar til tekstområdet, som i css ser sådan ud:
#indhold{
padding-top:60px;
padding-left:170px;
padding-right:20px;
}
Læg mærke til at denne <div> ikke er placeret med position:absolute; - den ligger bare som et flydende lag bag alle de placerede elementer. Det er gjort af hensyn til enkelte browsere, der ellers ville lave en vandret scrollbar, hvis det er placeret med eksempelvis left:170px;. Til gengæld flyttes tekstområdet med padding-left:170px;, så den bliver rykket ind i tekstområdet og padding-top:60px;, så teksten er fri at topbaren, der ellers ville dække teksten.
Den er placeret i html med koden:
<div id="indhold">Tekst og billeder på din side.</div>
Til sidst placeres menuen, som i css ser sådan ud:
#menublok{
position:absolute;
top:50px;
left:20px;
width:120px;
}
Den er placeret i html med koden:
<div id="menublok">
<a href="side1.htm">Side 1</a><br>
<a href="side2.htm">Side 2</a><br>
<a href="side3.htm">Side 3</a><br>
<a href="side4.htm">Side 4</a>
</div>
Juster selv på top:XXpx;, left:XXpx; og width:XXpx; for at få menuen til at stå præcis hvor du vil have den.
Den samlede html-kode kan se sådan ud:
<!Husk en passende doctype...>
<html>
<head>
<title>Sidens titel</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="indhold">
<h1>Overskrift</h1>
<p>Tekst og billeder på din side.</p>
</div>
<div id="topbar"></div>
<div id="menublok">
<a href="side1.htm">Side 1</a><br>
<a href="side2.htm">Side 2</a><br>
<a href="side3.htm">Side 3</a><br>
<a href="side4.htm">Side 4</a>
</div>
</body>
</html>
Læg mærke til at jeg har placeret menuen til sidst i strukturen, og bagefter har jeg flyttet menu-boksen på plads med css. Det er vigtigt af hensyn til søgemaskinerne, der gerne skulle læse indholdet før menupunkternes kode.
Den samlede css-kode i style.css kan se sådan ud:
body{
font-family:verdana,arial,sans-serif;
background-color:#ffff99;
background-image:url(baggrund.gif);
background-repeat:repeat-y;
color:black;
margin:0px;
padding:0px;
font-size:0.8em;
}
#topbar{
position:absolute;
top:0px;
left:0px;
height:40px;
width:100%;
background:url(topbar.gif);
color:black;
}
#indhold{
padding-top:60px;
padding-left:170px;
padding-right:20px;
}
#menublok{
position:absolute;
top:50px;
left:20px;
width:120px;
}
h1{
font-size:1em;
}
a{
font-size:0.9em;
padding:3px;
color:navy;
background:inherit;
text-decoration:none;
font-weight:bold;
}
a:hover{
color:red;
background:inherit;
}
![Retur til [Artikler]](b/pilv.gif)
Retur til [Artikler]
Artikler om CSS
- CSS - Hvad er det og hvordan bruges det?
- Placering og design med div og css
- Avancerede tabeller med css
- Centrering af sideindhold med div
- Farve og baggrund på links
- Printervenlige sider
- Sådan undgår du vandret scrollbar
- Baggrundsbilleder og baggrundsfarver
- Flere css-filer til samme side
- Farvede scrollbarer, nej tak!
- Formatering af links
- Slå en streg i sandet
- Design med flere spalter
FAQ-svar om CSS
Kodebasen om CSS
