Een lay-out maken met CSS voor alle resoluties
Artikel details
Share
Soortgelijke artikels
Waarom kiezen we een lay-out met CSS boven een grafische pracht van photoshop?
Een CSS lay-out is vaak web 2.0 en is makkelijker te indexeren door zoekmachines. De lay-out die ik hier zal maken zal bestaan uit 1 enkele afbeelding. (en 1 extra voor het logo maar dat is niet voor dit artikel). Door weinig afbeeldingen te gebruiken zal onze paginagrootte beperkt blijven en zal onze pagina snel laden. De lay-out zal tevens goed weergeven op hoge of lage resoluties.
Wat hebben we nodig
- Een grafisch programma als photoshop (Niet verplicht)
- Wat kennis van HTML en CSS
- Some brains
De header
Laten we beginnen met het maken van de header. Deze zal bestaan uit een gradient van 1pixel breed en 150pixels hoog. Je kan ook gebruik maken van één kleur maar dan verliest de lay-out zijn effect.
Een gradient kan je makkelijk met photoshop maken, maar tegenwoordig kan je dit ook op het internet.
Maak gradients op het internet.
Je kan ook gewoon gebruik maken van deze afbeelding.
Om de header weer te geven gebruiken we een stukje css.
.header{
background-image:url("http://caroes.be/images/header.png");/*Vervang door je gradient*/
position:absolute;
top: 0px;
right: 0px;
left: 0px;
height:150px;
}
De content
Als content kleur heb ik gekozen voor een #fcfdfe witte kleur. Deze komt mooi uit met de donkere achtergrond en lichte header. Hiervoor heb ik tevens een stukje CSS geschreven zodat de content mooi in het midden staat op alle resoluties. Ook zal de tekst niet tot tegen de randen van de content komen.
.content{
position:absolute;
background-color: #fcfdfe;
top: 200px;
left:100px;
right:100px;
padding:5px;
}
Some finishing touches (Achtergrond)
Zoals ik al zei heb ik voor een donkere achtergrond gekozen. (#4b4d4d)
body{
color: #413f3f;
font-family:Verdana, Times, serif;
font-size: 12px;
background-color:#4D4D4D;
}
De pagina
Als we dit allemaal bij elkaar gieten komen we tot een simpele HTML pagina.
<html>
<head>
<title>WEB 2.0 en SEO VALID lay-out</title>
<style type="text/css">
body{
color: #413f3f;
font-family:Verdana, Times, serif;
font-size: 12px;
background-color:#4D4D4D;
}
.header{
background-image:url("http://caroes.be/images/header.png");
position:absolute;
top: 0px;
right: 0px;
left: 0px;
height:150px;
}
.content{
position:absolute;
background-color: #fcfdfe;
top: 200px;
left:100px;
right:100px;
padding:5px;
}
</style>
</head>
<body>
<div class="header">
<!--Logo en navigation komt hier-->
</div>
<div class="content">
<!--De pagina zelf komt hier-->
</div>
</body>
</html>
Het resultaat met nog wat kleine aanpassingen kan je hier bewonderen.
Er zijn nog geen reacties op dit artikel.
Om op dit artikel te reageren dient u een account aan te maken.
