Positionner des éléments

# Boîte conteneur qui centre la page

## Voir autre solution para1.2 bureau

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é  */
        }

# Positionnement en flux normal

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.

#### Forme Bloc

    .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>

Bloc de 150x150
Second bloc défini en flux normal, il se place directement à la suite !

#### Forme En-ligne

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.

# Positionnement en flottant

On indique à ce bloc la propriété float:left ;

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

On indique à ce bloc la propriété float:right ;

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

#### Mise en page à colonnes avec les flottants

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%;
    }

Voir le résultat ici...

##### Exemple de problème de largeur

Dans cet exemple, on crée 2 boîtes flottantes à gauche. On remarque qu'elle se suivent horizontalement car leurs largeurs permettent cet alignement.

Mais imaginons que ces boîtes aient des largeurs surdimensionnées ! Comment se ferai le placement en flottant ?
Cette boîte bleu fait 400 pixels de large. Elle s'aligne à gauche car elle possède la propriété float:left ; Sachant que la largeur du conteneur fait 800 pixels, comment se placera une boîte flottantes de plus de 400 pixels autour de celle-ci ?
Et bien voilà ce qui se passe lorsque la largeur dépasse !!! La boîte suivante fait 450 pixels de largeur, donc elle vient se placer juste en dessous. Cette caractéristique est intéressante dans certains cas pour obliger un contenu à venir se placer en dessous d'un menu ou d'une image.

##### Autre exemple de débordement

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.

Voici la boîte A défini en flux normal

    .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 !

# Position absolue, relative, fixe

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>

Boîte définie en absolue !

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.

Boîte définie en absolue !

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 ;
    }

# Position relative et float

position:relative; right:400px; float:right;
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 texte encadre le bloc dans sa position relative (en haut à droite) sans tenir compte des decalages possibles (top,left,right,bottom),

# margin et float

position:relative; left:100px; margin-right:400px; float:right;
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 texte encadre le bloc dans sa position relative (en haut à droite) sans tenir compte des decalages possibles (top,left,right,bottom),