2min Devops

How to: Een website maken [Deel 1]

De elementen positioneren

Op deze pagina ga ik jullie wat uitleggen over het positioneren van elementen. Hier een lijstje met attributen die je kunt gebruiken om elemeten te positioneren:
  • Position
  • Margin
  • Padding
  • Top
  • Right
  • Bottom
  • Left

Deze attributen kun je op de volgende manier gebruiken.

PHP Code
1
2
3
4
5
6
7
#element{
	position:fixed;
	top:20px;
	left:20px;
	margin: 1px 5px 6px 7px;
	padding: 6px;
	}

Bij de margin heb ik alle waardes in één string gezet.

PHP Code
1
2
3
4
margin-top:1px;
margin-right:5px;
margin-bottom:6px;
margin-left:7px;

Deze vier regels hebben dus het zelfde effect als die ene regel in het vorige stukje code.

Laten we dit nu eens op onze eigen websit gaan toepassen. We willen onze website graag in het midden van het scherm hebben. Dit kun je heel makkelijk doen door middel van de <center>-tags. Deze kun je om je hele body heen zetten. Echter kun je het veel makkelijker doen met css.

PHP Code
1
2
3
4
5
#container{
	margin:0px auto;
	width:750px;
	border:1px solid #000;
	}

Zoals je ziet hb ik weer alle margin-informatie op één regel gezet. De eerste waarde (0px) geeft aan dat er aan de boven- en onderkant 0 pixels aan margin mag zitten. De tweede waarde (auto) geeft aan dat hij links en rechts automatisch een margin moet geven. Dit zorgt ervoor dat de container div precies in het midden van het scherm komt te staan.

Laten we er nu voor zorgen dat het menu en de content naast elkaar komen te staan. Hiervoor maken we gebruik van het ‘float’ attribuut. We willen de content rechts hebben. Daarom gebruiken voor de content div de volgende css.

PHP Code
1
2
3
4
5
#content{
	width:530px;
	float:right;
	border:1px solid #000;
	}

Voor het menu gebruiken we het zelfde attribuut, maar dan wel een andere waarde.

PHP Code
1
2
3
4
5
#side_menu{
	width:210px;
	float:left;
	border:1px solid #000;
	}

Je zult nu zien dat de footer onder de header is komen te staan. Dit komt omdat het menu en de content nu over de footer heen ‘floaten’. Dit kunnen we oplossen met het attribuut ‘clear’. Dit attribuut bepald of er elementen over het huidige element mogen ‘floaten’. Voor de footer gebruiken we de volgende code.

PHP Code
1
2
3
4
5
#footer{
	width:750px;
	clear:both;
	border:1px solid #000;
	}

Deze code kun je hier live bekijken.

Table of contents