Les positionnements CSS

La mise en page Web n√©cessite une bonne compr√©hension des langages HTML et CSS. Il existe beaucoup de m√©thodes tr√®s diff√©rentes pour positionner des √©l√©ments sur une page. Je conseille d'en ma√ģtriser une ou deux, plut√īt que d'essayer d'effleurer l'ensemble des techniques de positionnement.

Le flux normal : étude du positionnement sans CSS

Nous savons que le navigateur lit le code HTML de haut en bas, et de gauche √† droite sur chaque ligne. A chaque fois que le navigateur va positionner une balise, cette derni√®re comporte naturellement des r√©glages qui influent sur son positionnement : des marges ext√©rieures et int√©rieures (margin et padding), des alignements (text-align), des hauteurs de ligne (line-height), etc. Rien n'est neutre, m√™me quand on √©crit du texte normal avec <p>, le navigateur impose un choix de couleurs de premier plan (noir : #000) et d'arri√®re plan (transparent), une taille de police (16px), un espacement avant et apr√®s chaque ligne, et des dizaines d'autres r√©glages qu'on ne remarque pas.

Pour bien positionner des textes, des images, et tout autre √©l√©ment composant une page, je conseille aux d√©butants de d√©marrer d'une page blanche et de s'entrainer avec quelques balises. Il ne faut surtout pas copier-coller du code tout pr√™t pour apprendre.

Essai sans CSS, 100% HTML

Positionnons pour l'exemple, un titre, un texte, une image et deux liens.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>Mon blog</h1>
		<p>Un texte vraiment intéressant.</p>
		<img src="perroquet.jpg" alt="perroquet">
		<a href="#">Un lien</a>
		<a href="#">Un autre lien</a>
	</body> 
</html>

Ce qui donne :

positionnement1

Le flux normal repr√©sente ici l'ordre naturel de chaque balise, sans sp√©cifier la moindre feuille de style. Les balises se positionnement par rapport √† leur ordre de lecture et par rapport √† leur caract√©ristique.

<h1>

La cr√©ation d'un titre <h1> implique un retour √† la ligne et un espacement vertical. Le Consortium (w3.org) qui donne les sp√©cifications du HTML, s'appuie sur des si√®cles de r√®gles typographiques √©manant des livres et des journaux. L'espacement vertical avant et apr√®s le titre servent √† bien s√©parer le titre du texte qui suit. Le titre est √©galement gras. Tout est fait pour mettre en exergue le contenu de la balise <h1>. N'est-ce pas le but d'un titre ?

<p>

La balise <p> cr√©e √©galement un espacement vertical de mani√®re √† isoler des blocs de texte. En th√©orie, chaque paragraphe exprime une id√©e. Si l'on veut revenir √† la ligne au sein d'un paragraphe, il faudra recourir √† la balise <br> qui reviendra √† la ligne sans produire d'espacement vertical. Tout ceci est logique.

<a>

Les liens sont sur la m√™me ligne, car dans le fondement du web, un lien hypertexte doit √™tre au cŇďur d'un texte sans forc√©ment produire un retour √† la ligne. Observez une encyclop√©die, et vous comprendrez l'int√©r√™t des liens au coeur d'un texte sans retours √† la ligne.

Dans notre menu, les espaces entre les liens sont caus√©s par le retour √† la ligne apr√®s chaque lien dans le code source. Cela peut para√ģtre √©trange, mais la mani√®re dont sont positionn√©es les lignes dans le code source peut influer sur l'affichage du site dans le navigateur. Pour √©liminer certains espaces, il faut parfois √©crire un code sur une m√™me ligne dans votre √©diteur de texte.

<img>

Les images peuvent √™tre habill√©es de texte ou apparaissent parfois en vignettes align√©es sur une m√™me ligne, ce qui explique leur affichage naturel en ligne. L√† aussi, le Consortium a opt√© pour l'affichage de chaque balise en rapport √† son usage le plus fr√©quent et le plus traditionnel dans le web et l'imprim√©.

Cette constatation nous am√®ne √† classer les balises en 2 grandes cat√©gories : les balises de type boite et les balises en ligne.

Les balises en ligne

Ces balises ne produisent pas de retour √† la ligne et prennent la largeur de leur contenu. En voici quelques unes :

  • <span>
  • <a>
  • <img>
  • <i>, <em>
  • <b>, <strong>
  • <q>

Les balises de type boite ou bloc

Ces balises produisent un retour √† la ligne et prennent la largeur de leur conteneur. En voici quelques unes :

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • <p>
  • <ul>, <ol>, <li>
  • <br>, <hr>
  • <div>
  • <pre>
  • <header>, <main>, <section>, <article>, <footer>

La propriété position

Pour positionner des balises, une technique consiste à utilise la propriété CSS position avec les valeurs relative ou absolute.

Si nous voulons positionner l'image en haut √† droite, √† c√īt√© du titre, on peut utiliser la technique suivante :

position: relative

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img {
				position: relative;
				top: -85px;
				left: 200px;
			}
		</style>
	</head>
	<body>
		<h1>Mon blog</h1>
		<p>Un texte vraiment intéressant.</p>
		<img src="perroquet.jpg" alt="perroquet">
		<a href="#">Un lien</a>
		<a href="#">Un autre lien</a>
	</body> 
</html>

Ce qui donne :

position2

L'image est positionn√©e relativement √† sa position initiale. Sans CSS, dans le flux normal, le perroquet √©tait situ√© dans la page √† 114 pixels du haut de la fen√™tre et √† 8 pixels de la gauche de la fen√™tre (marge de <body>). Pour remonter l'image depuis sa position d'origine, nous utilisons position:relative, puis left:200px, ce qui d√©cale l'image de 200 pixels vers la droite, puis top:-85px, ce qui remonte l'image au m√™me niveau que le titre. Il faut parfois t√Ętonner pour arriver √† ce r√©sultat. On remarque que les liens restent d√©cal√©s par rapport √† la position d'origine de l'image ce qui n'est pas tr√®s √©l√©gant.

position: absolute

On peut positionner ce perroquet de la m√™me mani√®re avec position:absolute. Il faut savoir que la valeur absolute va positionner l'image par rapport au premier conteneur parent positionn√© (en relative ou absolute). Faute de conteneur parent positionn√©, l'image va se positionner par rapport aux bords de la fen√™tre du navigateur.

img {
	position: absolute;
	top: 30px;
	left: 208px;
}
position3

La propri√©t√© top:30px correspond √† la marge de 8px ajout√©e √† l'espacement vertical du titre. La propri√©t√© left s'est vu augment√©e de 8px √©galement √† cause de la marge gauche de <body>

Notez que les liens ont repris leur place, car l'image est positionn√©e relativement par rapport √† la balise <html>, premier conteneur en position relative.

La propriété display: inline-block

La propriété display: inline-block respecte le flux normal et permet un affichage en ligne (inline), tout en conservant les propriétés avantageuses des boites (block).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 200px;
				display: inline-block;
				border: solid;
			}
			
			img {
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		<div>
			<h1>Mon blog</h1>
			<p>Un texte vraiment intéressant.</p>
			<a href="#">Un lien</a>
			<a href="#">Un autre lien</a>
		</div>
		<img src="perroquet.jpg" alt="perroquet">
	</body> 
</html>

Ce qui affiche avec la bordure "pédagogique" :

position9

Pour positionner la boite <div> en haut, nous allons utiliser la propriété vertical-align qui fonctionne très bien avec display: inline-block :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 200px;
				display: inline-block;
				vertical-align: top;
			}
			
			img {
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		<div>
			<h1>Mon blog</h1>
			<p>Un texte vraiment intéressant.</p>
			<a href="#">Un lien</a>
			<a href="#">Un autre lien</a>
		</div>
		<img src="perroquet.jpg" alt="perroquet">
	</body> 
</html>

Ce qui donne :

position10

Cette dernière solution est à mon avis la plus élégante car elle respecte les positionnements des éléments dans un flux normal.

Articles connexes