Nu har du kanske fått en bra känsla för hur man använder HTML och CSS för att skapa fantastiska designer. Det är dags för dig att komma ut i världen och skapa! När du är där ute kommer du garanterat stöta på vissa problem, och många av dessa har redan lösts otaliga gånger. Vi har därför inkluderat detta kapitel som en referens över välkända CSS-problem och dess respektive lösningar, för att du ska slippa uppfinna hjulet (igen).
Att centrera hela sin sida kan ofta vara vettigt, speciellt i de fall då man har en fast eller halvfast layout. Många använder text-align för att centrera, men detta är givetvis helt fel (text- antyder ju att det handlar om text och inte element) — så här gör man det på rätt sätt; för enkelhetens skull väljer vi här att centrera body, som vi har satt en fast bredd på. Den här metoden fungerar dock på alla blockelement vars bredd inte är auto.
body{
width: 40em;
margin: 0 auto;
}
Genom att sätta marginalen till höger och vänster till auto säger vi åt webbläsaren att den ska försöka göra marginalerna till höger och vänster så stora som möjligt. Ni som kan lite matematik och förstår en del om optimering inser givetvis att den bästa lösningen är trivial; båda marginalerna blir lika stora och vårt element kommer att centreras. Vi skulle givetvis kunna byta ut 0 mot en mer lämplig marginal om vi vill ha mer plats under och över vårt element.
Ofta vill man ha en sida som täcker hela höjden på fönstret, men som expanderar när man har tillräckligt mycket innehåll. Om du någonsin försökt åstadkomma detta vet du förmodligen att det här inte är helt trivialt.
Det första man kommer att tänka på är height. Detta är rätt tänkt, men eftersom vi vill att elementet ska expandera när innehållet blir för stort bör vi istället använda egenskapen min-height, och lämpligtvis sätta denna till 100% (en fast bredd kan också vara bra att ha):
#container{
min-height: 100%;
width: 40em;
}
Nu borde väl allt fungera, tänker du kanske? Nja, inte riktigt. Förvisso kommer #container att fylla upp 100% av body; problemet är att body inte täcker hela fönstret. Detta rättar vi enkelt till genom att sätta höjden på body (och html) till 100%. Dessutom måste vin införa ett hack, _height, för att vissa versioner av IE inte hanterar min-height på rätt sätt.
html, body{
height: 100%;
}
#container{
min-height: 100%;
_height: 100%;
width: 40em;
}
Om du vill ha en sidfot som håller sig till bottnen av sidan får du jobba lite till; och vi måste gå in och använda lite positionering. Vi kommer att utnyttja det faktum att absolut positionering alltid räknas från det närmsta föräldrarelementet med relativ positionering (eller fönstret, om inget sådant element finns). Därför sätter vi relativ positionering på vår #container och absolut positionering, med bottom: 0, på vår sidfot:
html, body{
height: 100%;
}
#container{
min-height: 100%;
width: 40em;
position: relative;
}
#footer{
position: absolute;
bottom: 0;
}
Notera att vi inte flyttar #container någonstans, även om den nu har relativ positionering. Vi kommer dock att stöta på ett problem nu; sidfoten kommer att överlappa viss text om den är tillräckligt lång. Detta löser vi genom att sätta en fast höjd på sidfoten, och en padding på #container, som ska vara lika stor som sidfoten är hög, plus den marginal man vill ha mellan innehållet och sidfoten. Vi väljer en höjd på 3em och en marginal på 1em:
html, body{
height: 100%;
}
#container{
min-height: 100%;
width: 40em;
position: relative;
padding-bottom: 4em;
}
#footer{
position: absolute;
bottom: 0;
height: 3em;
}
Vår HTML bör då likna det här:
<body>
<div id="container">
<!-- Innehåll här -->
<div id="footer">
<!-- Sidfot här -->
</div>
</div>
</body>
Man skulle även kunna sätta margin och padding på html och body till 0, för att få sidan att verkligen gå hela vägen ut till kanten. Givetvis är det även vettigt att sätta lite stil på det hela, kanske med en bakgrundsbild eller en minimalistisk variant med endast en enfärgad bakgrund och en kantram? Det är upp till dig.