margin-left: auto; margin-right: auto;
Technique des marges negatives pour centrer un bloc dont on connait les dimensions.
Notre bloc conteneur fait 800 pixels de large centré dans le navigateur quelque soit la résolution.
L'astuce est de placé le bloc 50% à left, puis d'ajouter des marges négatives faisant exactement la moitié de la largeur.
/*---------------------------------------------------*/
/*------- le style global qui centre la page --------*/
/*---------------------------------------------------*/
.conteneur {
position:absolute;
left: 50%;
width: 800px;
margin-top:10px;
margin-left: -400px; /* moitié de la largeur */
border: 2px solid #000000;
border-style: dotted; /* Bordure en pointillé */
}
C'est le positionnement par défaut. On crée un div class nommé blocnormal qui n'a aucune propriété de position, il se place donc par défaut à l'intérieur du bloc conteneur. Ici, ce bloc est illustré par une boîte rouge de dimension 150 par 150 pixels.
.blocnormal {
width:150px ;
height:150px ;
background-color : red;
border: 1px solid #000000;
}
code html :
<div class="blocnormal">Bloc de 150x150</div>
<div class="blocnormal2">Second bloc...</div>
Les blocs de type en-ligne sont affichés successivement de façon horizontale. Prenons à titre d'exemple deux boîtes de type image de couleurs différentes pour bien les différencier.
.bloclignejaune {
background-color: #FFFF66;
}
.bloclignevert {
background-color: #00FF66;
}
code html :
<a class="bloclignejaune">texte texte...</a>
<a class="bloclignevert">texte texte...</a>
Boîte de type image qui se place horizontalement Beaucoup d'autres éléments permettent de créer des boîtes en ligne.
Le contenu suivant cette boîte flottante s'écoule le long de celle-ci, dans l'espace laissé libre. Le flux occupe tout l'espace disponible, c'est pourquoi le paragraphe suivant prend le maximum de largeur.
Sous le pont Mirabeau coule la Seine Et nos amours Faut-il qu'il m'en souvienne La joie venait toujours après la peine Vienne la nuit sonne l'heure Les jours s'en vont je demeure Les mains dans les mains restons face à face Tandis que sous Le pont de nos bras passe Des éternels regards l'onde si lasse Vienne la nuit sonne l'heure Les jours s'en vont je demeure L'amour s'en va comme cette eau courante L'amour s'en va Comme la vie est lente Et comme l'Espérance est violente Vienne la nuit sonne l'heure Les jours s'en vont je demeure Passent les jours et passent les semaines Ni temps passé Ni les amours reviennent Sous le pont Mirabeau coule la Seine Vienne la nuit sonne l'heure Les jours s'en vont je demeure
Le contenu suivant cette boîte flottante s'écoule le long de celle-ci, dans l'espace laissé libre.
Sous le pont Mirabeau coule la Seine Et nos amours Faut-il qu'il m'en souvienne La joie venait toujours après la peine Vienne la nuit sonne l'heure Les jours s'en vont je demeure Les mains dans les mains restons face à face Tandis que sous Le pont de nos bras passe Des éternels regards l'onde si lasse Vienne la nuit sonne l'heure Les jours s'en vont je demeure L'amour s'en va comme cette eau courante L'amour s'en va Comme la vie est lente Et comme l'Espérance est violente Vienne la nuit sonne l'heure Les jours s'en vont je demeure Passent les jours et passent les semaines Ni temps passé Ni les amours reviennent Sous le pont Mirabeau coule la Seine Vienne la nuit sonne l'heure Les jours s'en vont je demeure
Il existe un certain avantage à l'utilisation des blocs flottant, comme son imbrication pour placer un menu autour d'un contenu, ou bien pour former des colonnes de contenu.
Pour réaliser 3 colonnes (qui sont en faites des blocs), le contenu de la page est distribué en trois colonnes, chacune dans un bloc indépendant. Ces blocs sont placés côte à côte grâce aux styles. Pour préserver cette disposition qu'elle que soit la taille de la fenêtre du navigateur, toutes les largeurs et les marges internes seront définies en pourcentage.
.Gauche {
width:28%;
float:left;
background:powderblue;
padding-bottom:10px;
padding-top:10px;
padding-left:1%;
padding-right:1%;
}
.Centre {
width:48%;
float:left;
background:blanchedalmond;
padding-bottom:10px;
padding-top:10px;
padding-left:1%;
padding-right:1%;
}
.Droite {
width:18%;
float:left;
background:palegreen;
padding-bottom:10px;
padding-top:10px;
padding-left:1%;
padding-right:1%;
}
Dans cet exemple, on crée 2 boîtes flottantes à gauche. On remarque qu'elle se suivent horizontalement car leurs largeurs permettent cet alignement.
Voici la boîte B défini en float right inclue dans A. Le contenu de B se place bien à droite mais si celui-ci devient trop long il va déborder...
.boiteB {
float:right;
width:50%;
margin:15px;
padding:5px;
background-color:#99CC33;
}
La boîte B déborde de la boîte A et empiète sur la boîte C. Le contenu de la boîte C entoure également la boîte B. Sur IE, ce phénomène ne se produit pas lorsqu'on indique une largeur pour les boîtes A et C.
.boiteA {
margin:15px;
padding:5px;
background-color:#ddd;
}
Enfin on place la boîte C dans la boîte A. Le contenu de la boîte C entoure la boîte B et on remarque bien que c'est la boîte B qui reste au premier plan !
On crée d'abord un bloc global "normal" qui nous servira de conteneur pour les bloc défini en absolus, relatifs ou fixes.
.global {
background-color: #6699FF;
width: 600px;
padding-right: 5px;
}
.jaune {
position: absolute;
top: 1em;
right: 1em;
background-color: #ffff00;
width: 80px;
}
code html :
<div class="global>Voici notre bloc normal...
<div class="jaune"Boîte définie en absolue</div>
</div>
Voici notre bloc "normal", la boîte jaune s'intègre dans ce bloc.
Le bloc est placé par rapport à son parent s'il est lui-même positionné, ou alors par rapport au dernier Ancètre positionné (si aucun Ancètre n'est positionné, il se réfère à la page entière, balise html).
En absolue, le bloc est généralement placé à l'aide des propriétés "top" et "left" par rapport au coin supérieur gauche du parent. Le bloc parent dans notre cas est le conteneur de cette page définie au dessus.
Sous le pont Mirabeau coule la Seine Et nos amours Faut-il qu'il m'en souvienne La joie venait toujours après la peine Vienne la nuit sonne l'heure Les jours s'en vont je demeure Les mains dans les mains restons face à face Tandis que sous Le pont de nos bras passe Des éternels regards l'onde si lasse Vienne la nuit sonne l'heure Les jours s'en vont je demeure L'amour s'en va comme cette eau courante L'amour s'en va Comme la vie est lente Et comme l'Espérance est violente Vienne la nuit sonne l'heure Les jours s'en vont je demeure Passent les jours et passent les semaines Ni temps passé Ni les amours reviennent Sous le pont Mirabeau coule la Seine Vienne la nuit sonne l'heure Les jours s'en vont je demeure
On recrée un nouveau bloc global mais cette fois-ci en position relative centré avec l'astuce des marges négatives, ce sera le bloc conteneur.
Lorsqu'un élément est indiqué position:relative, il est d'abord positionné selon les règles du flux normal. Puis, il est re-positionné en fonction de ses propriétés de décalage (top, right, bottom, left).
On peut maintenant placer aisément une boîte absolue jaune dans ce conteneur, mais sans les correctes définitions de décalage, la boîte jaune recouvre notre paragraphe.
.global_relatif {
position: relative;
background-color: #B5EEFF;
width: 600px;
left:50% ;
margin-left:-300px ;
}
Le texte encadre le bloc dans sa position relative (en haut à droite) sans tenir compte des decalages possibles (top,left,right,bottom),
Le texte encadre le bloc dans sa position relative (en haut à droite) sans tenir compte des decalages possibles (top,left,right,bottom),