2min Devops

How to: Een website maken [Deel 1]

Een breedte aan de elementen geven

Nu gaan we eerst de breedte van de website instellen. Dit doen we door een ‘width’ attribuut op de container te zetten. Standaard grotes zijn: 750-780px (800×600 resolutie), 980-1000 (1024×786 resolutie). Omdat wij natuurlijk nog allemaal op 800×600 devven gebruiken we 780px.

PHP Code
1
#container{width:780px;border:1px solid #000;}


het command "width" geeft aan hoe breed het element mag zijn. Dit kun je doen in oa. pixels en procenten.

Dit kunnen we ook met de andere elementen doen. Laten we dit nu even proberen met de overige elementen.

PHP Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@charset "utf-8";
/* CSS Document */
 
#container{
	width:750px;
	border:1px solid #000;
	}
 
#header{
	width:750px;
	border:1px solid #000;
	}
 
#content{
	width:530px;
	border:1px solid #000;
	}
 
#side_menu{
	width:210px;
	}
 
#footer{
	width:750px;
	border:1px solid #000;
	}


Zoals je ziet hebben de Container, header en footer de zelfde breedte. Dit zorgt ervoor dat de header en footer even breed zijn als dee website zelf.

Deze code kun je hier live bekijken.

Wat je meteen zal opvallen is dat het menu nog niet naast de content staat. Daarnaast zul je zien dat er aan de rechterkant van de website twee stukjes uitsteken. Dit zijn de header en de footer. Dit komt omdat deze twee nog een border hebben. En de breedte van een border komt bovenop de reeds opgegeven border. In dit geval dus 750px + (1px links + 1px rechts) = 752px.

Table of contents