Centrer un bloc

Beaucoup de sites ont un contenu placé dans un gabarit fixe (non pas fluide) de 960px. C'est ce que nous allons faire.

Les éléments

Créez un dossier container dans-lequel nous placerons les fichiers de cet exercice.

Créez une page HTML qui contient dans son body une div nommée container

<div id="container">
	<h1>Ma page</h1>
 
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
	eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
	enim ad minim veniam, quis nostrud exercitation.</p>
</div>

A votre fichier HTML, dans la partie head attachez-y un fichier css distant avec un comme

<link rel="stylesheet" href="screen.css" type="text/css" media="screen" charset="utf-8" />

Dans le fichier css (ici screen.css) spécifiez

body{
	background-color:#f2f2f2;
}
#container{
	background-color:#fff;
	width:960px;
}

Centrez

Dans notre cas, nous allons centrer le bloc #container par rapport au bloc body.

Pour centrer un bloc A dans un bloc B, il faut :

que tout ce qui est dans le bloc B soit centré, pour ce faire, utilisez

text-align:center;

Pour que cela fonctionne sur tous les navigateurs (IE6+), il faut que le bloc A soit en marges souples (auto),

margin-left:auto;
margin-right:auto;

Finitions

Appliquez des typos élégantes sur le contenu, veillez à ce que le texte soient ferrés à gauche, etc.

ressources/html/container.txt · Last modified: 2013/06/16 22:51 (external edit)
 
 
Creative Commons License Powered by PHP Valid XHTML 1.0 April