Plusieurs gabarits , une seule feuille de style

Dans cette article nous allons mettre en évidence l'intérêt de mettre en œuvre flottants et contextes de formatages .

Cette exemple fixera une hauteur aux éléments utilisés , il ne s'agit pas d'une technique dîtes de fausses colonnes . En enlevant cette hauteur arbitraire vous obtiendrez des gabarits fluides .

Visuels

Ces 6 + 1 gabarits tests reçoivent les mêmes styles , Le contexte de formatage appliqué au conteneur .globale et a l'élément .milieu , permet à ces deux éléments de prendre en compte automatiquement les flottants .

3 éléments , 1 flottant à gauche et 1 flottant à droite .

Zone ou section gauche
Zone ou section droite
Zone ou section milieu

1 elément qui ne flotte pas.

Zone ou section milieu

2 éléments , 1 flottant à droite.

Zone ou section droite
zone ou section milieu

3 éléments , 2 flottant à droite.

Zone ou section droite
Zone ou section droite
zone ou section milieu

2 éléments , 1 flottant à gauche.

Zone ou section gauche
Zone ou section milieu

3 éléments , 2 flottant à gauche.

Zone ou section gauche
Zone ou section gauche
Zone ou section milieu

Les styles mis en œuvre

div {padding:5px;margin:0 5px;height:150px;} .global {width:80%;height:auto; margin:2em auto;background:gray; zoom:1;overflow:hidden;padding:5px 0;} .droite , .gauche {width:80px;display:inline;} .droite {float:right;background:yellow} .gauche {float:left; background:green} .milieu {overflow:hidden;zoom:1;background:purple}

zoom:1; et overflow:hidden; provoque ce contexte de formatage trés utile en présence de flottant : zoom:1; est utiles a Internet Explorer , overflow aux autres navigateurs .

Ces régles ne sont pas les seules à jouer sur ce phénomène , ce sont les plus simple a mettre en œuvre.

La base html

<div class="global"> <div class="droite">droite</div> <div class="gauche">gauche</div> <div class="milieu">milieu</div> </div>

Des éléments : .droite et .gauche , peuvent etre ajoutés ou enlevés selon les besoins .

l'élément .milieu sera relégué en fin de flux pour permettre aux flottants de se positionner , .milieu ira se glisser entre eux .

L'élément , ou plutôt la class="milieu" peut aussi être réutilisée , pour faire un titre ou un pied , exemples:

5 éléments : 1 flottant à gauche et 1 flottant à droite et 3 dans le flux.

titre .milieu

Zone ou section gauche
Zone ou section droite
Zone ou section milieu

paragraphe en pied .milieu

Une légère retouche sur les style pour le titre et le paragraphe (marge externes) et le tour est joué .

le code HTML de ce dernier exemple

<h1 class="milieu">milieu</h1> <div class="global"> <div class="droite">droite</div> <div class="gauche">gauche</div> <div class="milieu">milieu</div> <p class="milieu">milieu</p> </div>

Et la retouche CSS

h1.milieu , p.milieu {margin:5px ;clear:both}

Et un dernier exemple pour le fun

attention , ce ne sont toujours pas de fausses colonnes !

pot-pourri

titre .milieu

Zone ou section gauche
Zone ou section droite
Zone ou section milieu

paragraphe en pied .milieu

Zone ou section gauche
Zone ou section gauche
Zone ou section milieu

paragraphe en pied .milieu

Zone ou section droite
Zone ou section droite
Zone ou section milieu

paragraphe en pied .milieu

Zone ou section milieu

paragraphe en pied .milieu

Zone ou section droite
Zone ou section gauche
Zone ou section droite
Zone ou section milieu

paragraphe en pied .milieu

Ecrire un commentaire




Quelle est la troisième lettre du mot sbwgu ?