Het gaat niet om de uiterlijk maar om de opbouw van HTML en CSS.
Dit is erg basic heb net alles even zelf gescript.
Hoe het is opgebouwd?
- Header
- 2 Collums
- Footer
index.html(index.php) :
<html> <head> <LINK href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="wrapper"> <div class="header"> De Header!</div> <div class="main"> Het midden stuk! </div> <div class="sidebar"> De sidebar! </div> <div class="footer"> PaintMe Basic CSS TUT! </div> </div> </body> </html>
style.css:
body{
background:#5c5c5c; /* Grijze achtergrond kleur */
}
.wrapper{
margin:0 auto; /* Zorgt er voor dat alles in het midden is */
width:950px; /* De breedte van de minimale scherm (is eigenlijk 960 maar ik vind 950 handiger) */
}
.header{
background:#000; /* zwarte achtergrond kleur */
font-size:30px; /* maken we de text groter */
color:#FFF; /* text geven we een witte kleur */
border: 1px solid blue; /* blauwe rand er om heen */
text-align:center; /* text in het midden */
}
.main{
float:right; /* De midden stuk staat aan de rechterkant */
width:650px; /* De breedte van het midden stuk */
background:#000; /* zwarte achtergrond kleur */
color:#FFF; /* text geven we een witte kleur */
border: 1px solid blue; /* blauwe rand er om heen */
padding-left: 5px; /* om te zorgen dat het niet vast geplakt zit aan de randen */
}
.sidebar{
float:left; /* De sidebar staat aan de linkerkant */
width:280px; /* De breedte van de sidebar 950-650 = 300 300-10(stukje er tussen)= 290 er moet nog wat van af door de padding.*/
background:#000; /* zwarte achtergrond kleur */
color:#FFF; /* text geven we een witte kleur */
border: 1px solid blue; /* blauwe rand er om heen */
padding-left: 5px; /* om te zorgen dat het niet vast geplakt zit aan de randen */
}
.footer{
background:#000; /* zwarte achtergrond kleur */
color:#FFF; /* text geven we een witte kleur */
border: 1px solid blue; /* blauwe rand er om heen */
text-align:center; /* text in het midden */
}Ik heb achter elke css functie een comment geplaatst om een beetje uit leg te geven.
Als je iets toch niet snapt kan je me altijd pm sturen of op google zoeken.
Screentje :
