2min Devops

How to: Een website maken [Deel 1]

De eerste div maken

Werkwijze


We beginnen met een container voor de layout. Hiervoor gebruiken we:

PHP Code
1
<div id="container"></div>


We gebruiken hier het ‘id’ attribuut omdat we de container maar één maal gebruiken. In de css zet je nu het volgende:

PHP Code
1
#container{}


‘#’ Geeft aan dat het om een ‘id’ attribuut gaat. Als we ‘class’ hadden opgegeven als attribuut dan hadden we hier ‘.container’ neer gezet.

Om te zien wat we precies doen geven we elke div dit mee in de css:

PHP Code
1
border:1px solid #000;


Nu gaan we de uiteindelijke layout maken. Hiervoor gebruiken we drie of vier div’s. Namelijk ‘header’, ‘content’, ‘footer’ en eventueel nog ‘content_rechts’. De laatste kunnen we gebruiken als sidebar (zoals techzine gebruikt voor de laatste berichten).

PHP Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="templates/style.css" type="text/css" />
<title>Untitled Document</title>
</head>
 
<body>
<div id="container">Container
<div id="header">Header</div>
<div id="content">Content</div>
<div id="side_menu">Side Menu</div>
<div id="footer">Footer</div>
</div>
</body>
</html>


PHP Code
1
2
3
4
5
6
7
8
@charset "utf-8";
/* CSS Document */
 
#container{border:1px solid #000;}
#header{border:1px solid #000;}
#content{border:1px solid #000;}
#side_menu{border:1px solid #000;}
#footer{border:1px solid #000;}


Een voorbeeld van deze code kun je hier live bekijken.

Als dit nog niet duidelijk genoeg is kun je alle items ook nog een eigen achtergrondkleur meegeven. Dit doe je door middel van deze code:

PHP Code
1
background-color:#kleurcode;

Table of contents