Les Positionnements

Vous êtes ici : >> HTML-CSS / Les Positionnements
Temps d'étude : 1h. Niveau : Facile.
Tags : Les Positionnements
Fichier(s) utile(s) pour ce cours : /

Centrer son site sur la page

Dans cet exemple, nous allons apprendre à centrer une zone sur une page (1 site est avant tout une zone centrée sur une page, comprenant d'autres zones).

Pour cela, nous allons créer deux nouveaux fichiers : centre.html & centre.css

centre.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Centre</title>
			<link rel="stylesheet" href="centre.css">
		</head>
		<body>
			<div id="conteneur">
				<div class="a">Zone A</div>
				<div class="b">Zone B</div>
			</div>
		</body>
	</html>
	
centre.css
		#conteneur{
		width: 960px; /* largeur */
		background: #F4C400; /* fond */
		margin: 0 auto; /* marges */
		padding:30px; /* espacement interne du conteneur */
		}
		.a, .b{
		height: 150px; /* hauteur */
		width: 450px; /* largeur */
		border: 2px solid; /* bordure */
		margin:0 10px; /* espacement horizontal entre les blocs */
		display:inline-block; /* inline block rend le vertical align possible. */
		vertical-align: middle; /* alignement vertical des zones a et b par rapport à #conteneur.
		}
	
Le Résultat
explications Html / Css

Décryptons le code :
  • #conteneur{ width: 960px; } largeur

  • #conteneur{ background: #F4C400; } fond

  • #conteneur{ margin: 0 auto; } marges

  • #conteneur{ padding:30px; } espacement interne du conteneur


  • .a, .b{ height: 150px; } hauteur

  • .a, .b{ width: 450px; } largeur

  • .a, .b{ border: 2px solid; } bordure

  • .a, .b{ display:inline-block; } dans ce contexte, inline-block rend le vertical align possible

  • .a, .b{ vertical-align: middle; } alignement vertical des zones a et b par rapport à #conteneur.


Qu'est-ce qu'un conteneur (anglais : container, parfois écrit wrap (enveloppe)) ?
Un conteneur permet de contenir !

C'est une pratique régulièrement utilisée pour centrer son site sur une page web. Et, puisqu'on applique un centrage sur le conteneur, par répercussion, tout ce qui se trouve à l'intérieur sera également centré.

Pixels ou Pourcentage ?

Voyons à présent la différence dans les unités de mesure entre les pixels et les pourcentages
Pour cela, nous allons créer deux nouveaux fichiers : pourcentage.html & pourcentage.css

pourcentage.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Pourcentage</title>
			<link rel="stylesheet" href="pourcentage.css">
		</head>
		<body>
			<div class="taillefixe">Fixe</div>
			<div class="taillevariable">Variable</div>
		</body>
	</html>
	
pourcentage.css
	.taillefixe{ width: 1000px; border: 2px solid #cb3d3d; }
	.taillevariable{ width: 100%;  border: 2px solid #336699; }
	
Le Résultat
Zone A
Zone B


Faites le test !

Décryptons le résultat :
  • Dans un cas, la zone 1 (div) fixe rouge prend 1000 pixels de largeur qui est une taille fixe.

  • Dans l'autre cas, la zone 2 (div) variable bleue prend 100% de la largeur, cette largeur est donc variable selon le redimenssionnement de la fenêtre qui la contient.

En responsive design (site adapté aux différentes résolutions et écrans : smartphone, tablette, pc), il peut être intéressant de créer son site en pourcentage ou en pixels en appliquant des cas différents selon les tailles de résolutions d'écran utilisés.

La position absolute

Nous allons étudier la position absolute.
Pour cela, nous allons créer deux nouveaux fichiers : absolute.html & absolute.css

absolute.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Absolute</title>
			<link rel="stylesheet" href="absolute.css">
		</head>
		<body>
			<p class="vert"> Bonjour ! </p>
		</body>
	</html>
	
absolute.css
	p{ margin: 0; }
	.vert{ color: #21c165; position: absolute; top: 50%; left: 0px; font-weight: bold; }
	
Le Résultat

Bonjour !



Faites le test !

Décryptons le code :

La position absolute redéfinit l'emplacement de la zone par rapport à la fenêtre.
Ainsi en utilisant top: 50%; left: 0px; Nous écartons notre zone de 50% du haut de site et de 0 pixel du bord gauche de la fenêtre.

Exercice : Compte tenu de ces informations, pouvez-vous placer cette zone en bas à droite de l'écran ?

Correction :
	p{ margin: 0; }
	.vert{ color: #21c165; position: absolute; bottom: 0; right: 0; font-weight: bold; }
	

La position relative

Nous allons étudier la position relative. Pour cela, nous allons créer deux nouveaux fichiers : relative.html & relative.css

relative.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Relative</title>
			<link rel="stylesheet" href="relative.css">
		</head>
		<body>
			<div id="zone">
				<p> Bonjour tout le monde </p>
				<p class="vert"> Salut! </p>
			</div>
		</body>
	</html>
	
relative.css
	p{ margin: 0; }
	.vert{ color: #21c165; position: relative; top: 1px; left: 30px; }
	#zone{ border: 2px solid #336699; }
	
Le Résultat

Bonjour tout le monde

Salut !



Décryptons le code :

Lorsque la position relative est appliquée sur un élément, cet élément se place ou s'écarte par rapport à lui même, il s'écarte par rapport à sa position initiale (et non pas par rapport à la div dans laquelle l'élément est contenu, ni le bord de la fenêtre).
Ainsi en utilisant top: 1px; left: 30px; Nous l'écartons de 1 pixel du haut par rapport à sa position initiale et de 30 pixels de la gauche par rapport à sa position initiale. Faites des tests !

La position fixed

La position fixed est particulièrement pratique et à la mode sur certains sites. Le plus connu d'entres eux : Facebook.

Vous ne l'avez jamais remarqué ? Lorsque vous naviguez dans les actualités et que vous rentrez dans la profondeur des pages, le menu reste constament affiché en haut de site.

Pour étudier ce cas, nous allons créer deux nouveaux fichiers : fixed.html & fixed.css

fixed.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Fixed</title>
			<link rel="stylesheet" href="fixed.css">
		</head>
		<body>
			<nav>Menu</nav>
			<div id="contenu">
				*** SAISIR (ou copier/coller :p) 100 LIGNES DE TEXTE ICI, CELA EST IMPERATIF POUR CET EXEMPLE ***
			</div>
		</body>
	</html>
	
fixed.css
	nav{
	background: #dea5a5; /* fond */
	position: fixed; /* Le menu a une position fixe lors de la descente dans la page */
	text-align: center; /* alignement du texte centré */
	width: 100%; /* largeur 100% de la fenêtre */
	top: 0; /* aligné à 0px du haut */
	left: 0; /* aligné à 0px de la gauche */
	}
	#contenu{
	border: 2px solid #336699; /* bordure */
	margin: 30px 0 0 0; /* marges haut droite bas gauche */
	}
	
Le Résultat
explications Html / Css



Faites le test !

Décryptons le code :

La position fixed permet de maintenir une zone toujours affichée !
Ainsi en utilisant position: fixed; top: 0; left: 0; cela permet de « figer » la zone en haut de site en la plaçant à 0 pixel du haut et à 0 pixel de la gauche.
Le contenu est quant à lui écarté de 30 pixels du haut pour éviter qu'il vienne en "collision" et en dessous de notre zone menu.

La propriété float

Nous allons étudier les positions float avec float left, float right, float center ainsi que la propriété clear avec clear left, clear right et clear both.
La propriété float left est particulièrement utile pour placer deux zones côté à côte. (ce qui arrive fréquement dans un site web).
Pour cela, nous allons créer deux nouveaux fichiers : float.html & float.css

float.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Float</title>
			<link rel="stylesheet" href="float.css">
		</head>
		<body>		
			<div class="d1"> 1 </div>
			<div class="d2"> 2 </div>
			<div class="d3"> 3 </div>
			<div class="d4"> 4 </div>
			<div class="clear"></div>
			<div class="d5"> 5 </div>
			<div class="d6"> 6 </div>
			<div class="d7"> 7 </div>
			<div class="clear"></div> 
			<div class="d8"> 8 </div>
			<div class="d9"> 9 </div>
			<div class="clear"></div>
			<div class="d10"> 10 </div>
		</body>
	</html>
	
float.css
	.d1 ,.d2,.d3,.d4 ,.d5,.d6,.d7 ,.d8 ,.d9 ,.d10 {
	  float: left;
	  width: 170px;
	  height: 170px;
	  text-align: center;
	  border: 1px solid #000000;
	}
	.clear{
	  clear: both;
	}
	
Le Résultat
explications Html / Css



Faites le test !

Décryptons le code :

La propriété float left permet de créer un flux qui va permettre d'empiler les zones côté à côte.
explications Html / Css

Tout ce qui doit être "à côté de" doit possèder la propriété float: left;

Nous attribuons donc la propriété float: left; à toutes les zones ayant besoin d'être à côté l'une de l'autre.

Une fois qu'un flux est ouvert, nous devons l'arrêter avec la propriété clear: both; , cela permet (en quelque sorte) de repasser à la ligne

Notez bien que nous ferons toujours appel à la propriété clear both après un float left pour arreter le flux, cela nous évitera d'avoir des dysfonctionnements d'affichage.


fléche Question : pourquoi on ne met pas un coup float left et l'autre coup float right ?
Lorsqu'on utilise la propriété float, nous ouvrons un flux, nous devons préciser si nous l'ouvrons de la gauche vers la droite (float: left;) ou de la droite vers la gauche.

C'est moins courant mais nous pouvons avoir une zone en float left et une autre en float right aux deux extrimités, cela serait tout à fait valable.

Exemple avec float : left;

float-left.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Float</title>
			<link rel="stylesheet" href="float-left.css">
		</head>
		<body>		
			<div class="d1"> 1 </div>
			<div class="d2"> 2 </div>
			<div class="clear"></div>
		</body>
	</html>
	
float-left.css
	.d1 ,.d2{
	  float: left;
	  width: 170px;
	  height: 170px;
	  text-align: center;
	  border: 1px solid #000000;
	}
	.clear{
	  clear: both;
	}
	
Le Résultat
1
2

Ici les éléments s'affichent correctement, côte à côte et de la gauche vers la droite.

Exemple avec float : right;

float-right.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Float</title>
			<link rel="stylesheet" href="float-right.css">
		</head>
		<body>		
			<div class="d1"> 1 </div>
			<div class="d2"> 2 </div>
			<div class="clear"></div>
		</body>
	</html>
	
float-right.css
	.d1 ,.d2{
	  float: right;
	  width: 170px;
	  height: 170px;
	  text-align: center;
	  border: 1px solid #000000;
	}
	.clear{
	  clear: both;
	}
	
Le Résultat
1
2

Ici les éléments s'affichent correctement, côte à côte mais cette fois-ci de la droite vers la gauche.

Et oui, on voit nettement que les cadres sont le plus à droite de l'écran.

Exemple avec float : left; et float : right;

float-left-right.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Float</title>
			<link rel="stylesheet" href="float-left-right.css">
		</head>
		<body>		
			<div class="d1"> 1 </div>
			<div class="d2"> 2 </div>
			<div class="clear"></div>
		</body>
	</html>
	
float-left-right.css
	.d1{
	  float: left;
	  width: 170px;
	  height: 170px;
	  text-align: center;
	  border: 1px solid #000000;
	}
	.d2{
	  float: right;
	  width: 170px;
	  height: 170px;
	  text-align: center;
	  border: 1px solid #000000;
	}
	.clear{
	  clear: both;
	}
	
Le Résultat
1
2

Dans ce résultat, on voit très nettement la différence ! la 1ère zone se trouve le plus à gauche possible et la 2e se trouve la plus à droite de l'écran.

A moins de vouloir cet affichage pour des besoins particuliers, nous garderons l'utilisation du float left (ou du float right) sur plusieurs éléments d'affilés.

Exemple avec et sans la propriété clear: both;

fléche Question
je n'ai pas bien compris l'utilité de la propriété clear both, a quoi ça sert ?


Sans la propriété clear : both ;
explications Html / Css

Avec la propriété clear : both ;
explications Html / Css

On voit clairement que la propriété clear: both; permet de stopper un flux et de passer à la ligne, il est donc vraiment recommandé de l'utiliser pour éviter des dysfonctionnements d'affichage.