Centrerad hemsida
Här på denna sidan kommer vi att visa hur man kan centrera en hemsida med hjälp utav olika DIV element. Notera att i har färgat hemsidan så det ska bli lättare att se vilket element som är vilket.
Varför centrerad hemsida?
Många utvecklare idag väljer att göra sina hemsidor centrerade för att att det är så olika skärmupplösningar. Förr brukade man utveckla hemsidan efter en fast bredd och höjd som fungerade bäst för en viss upplösning på skärmarna.
Idag så brukar man oftast utveckla sina hemsidor efter en fast bredd men med en löpande höjd, På så sätt så fungerar hemsidan bra oavsett webbläsare och skärmupplösning, dessutom får man ett mer flytande innehåll på sin hemsida.
Centrerad hemsida (Index.html):
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stilmall.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<title>TITEL</title>
</head>
<body>
<div id="Wrapper">
<p class="text">Grundhemsida</p>
</div>
</body>
</html>
Som ni ser har vi valt att lägga till ett DIV element som vi har tilldelat ID't "Wrapper". Wrapper kommer vara hela sidan där man sedan lägger in andra div element. Men mer om det i nästa del.
Vår stilmall (stilmall.css):
body
{
font-family: Verdana;
background-color: #ffffff;
}
#Wrapper
{
width: 960px;
margin: auto auto;
background-color: #0024ff;
}
.text
{
color: #ffffff;
}Som ni ser så har vi gett vårt div element med id't "Wrapper" en fast bredd, centrerat den och så har vi färgat backgrunden mörkblå.
