Initiation au positionnement CSS : 2.position float

Transcription

Initiation au positionnement CSS : 2.position float - Openweb.eu.org
4/02/09 18:41
INITIATION AU POSITIONNEMENT CSS : 2.POSITION FLOAT
Profil : Expert
Technologie : CSS
Thème : Mise en page
Auteur : Laurent Denis (/openwebgroup/bios/laurent_denis)
Mise à jour : 30/06/2008
En bref
La position float retire une boîte du flux normal pour la placer le plus à droite ou le plus gauche possible dans son
conteneur. Comment l’utiliser dans une mise en page CSS ?
Cet article fait suite à l'initiation au positionnement CSS : 1.Flux et position relative (/articles/initiation_flux/).
Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche
(float: left) possible dans son conteneur. Le contenu suivant cette boîte flottante s'écoule le long de
celle-ci, dans l'espace laissé libre.
Le fonctionnement des flottants
Ajoutons aux styles précédents une règle de positionnement flottant à droite et une mesure de largeur (facultative,
mais utile pour certains navigateurs) :
En HTML:
<p class="jaune">Une boîte jaune flottant</p>
<p class="verte">Une boîte verte doté d'un contenu plus long…</p>
En CSS:
.jaune {
background-color: #ffff00;
float: right;
width: 100px;
margin: 0;
}
.verte {
background-color: #00ff00;
}
http://openweb.eu.org/articles/initiation_float/
Page 1 sur 9
4/02/09 18:41
Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 1
(/IMG/article52/annexe1.html#ex1)
Le navigateur place tout d'abord la boîte jaune, alignée sur le bord droit de cette partie de notre page, puis
reprend le cours normal du flux dans l'espace laissé libre à sa gauche pour afficher la boîte verte. Le flux occupe
tout l'espace disponible: la boîte verte reprend donc toute la largeur de la page sitôt passée la limite inférieure de
la boîte flottante jaune.
Dans les navigateurs n'appliquant pas la feuille de style (navigateurs texte ou non conformes aux standards…), la
boîte flottante sera simplement inscrite en flux normal avant la boîte qui la suit.
Première utilisation : une mise en page à deux colonnes
La combinaison de la position flottante et du flux permet de réaliser aisément une mise en page à deux colonnes
(un contenu et un menu) :
En CSS :
.content {
float: left;
width: 70%;
}
.menu {
margin-left: 80%;
border: 1px solid #000000;
padding: 1em;
}
Et en HTML :
…
<body>
<div class="content">
…
</div>
<div class="menu">
<ul>
<li>lien_1</li>
Page 2 sur 9
4/02/09 18:41
<li>lien_1</li>
<li>lien_2</li>
<li>lien_3</li>
</ul>
</div>
</body>
Le résultat, illustré par la figure ci-dessous, peut être observé également dans la page-exemple 1
(/IMG/article52/annexe2.html)
Seconde utilisation : une mise en page à trois colonnes et plus
Mais on peut tout aussi bien multiplier les flottants pour créer autant de colonnes que voulu :
En CSS :
body {
margin: 0;
padding: 0;
}
.float {
float: left;
width: 25%;
margin: 1em 0;
}
p,h1,h2 {
margin: 1em;
}
Page 3 sur 9
4/02/09 18:41
Et en HTML :
…
<body>
…
<div class="float">
…
</div>
<div class="float">
…
</div>
<div class="float">
…
</div>
<div class="float">
…
</div>
</body>
Le résultat, illustré par la figure ci-dessous, peut être observé également dans la page-exemple 2
(/IMG/article52/annexe3.html) :
Débordement et spacer
Le problème du débordement
Page 4 sur 9
4/02/09 18:41
Reprenons notre exemple, mais inversons les contenus: celui de la boîte flottante jaune est à présent plus long que
celui de la boîte verte :
En HTML :
<p class="jaune">
Une boîte jaune flottant doté d'un contenu plus long…
</p>
<p class="verte">
Une boîte verte
</p>
(/IMG/article52/annexe1.html#ex2) :
La boîte flottante, plus longue que la boîte verte, déborde verticalement plus bas que celle-ci.
La solution : le spacer
Pour éviter cet effet parfois disgracieux, la solution la plus répandue est le spacer de Mark Newhouse
(http://www.alistapart.com/stories/practicalcss/) : elle consiste à inclure dans la boîte verte un élément bloc au
contenu fictif (l'espace insécable ), doté de la propriété clear qui lui interdit d'être adjacent à une boîte
flottante.
En HTML :
<div class="verte5">
<p class="jaune5">
</p>
<p>
Une boîte verte
</p>
<div class="spacer"> </div>
</div>
En CSS :
Page 5 sur 9
4/02/09 18:41
.jaune {
float: right;
width: 100px;
text-align: center;
margin: 0;
}
.verte {
width: 100%;
}
.spacer {
clear: both;
}
Le bloc spacer, ne pouvant se placer à côté du bloc flottant, se trouve décalé plus bas que celui-ci.
Note : —
IE a parfois quelques difficultés à représenter correctement les arrières-plans et les bordures dans les
combinaisons intégrant des boîtes flottantes à droite et des séparateurs dotés de la propriété clear: both.
Les vignettes : une utilisation du spacer et des flottantes
Mark Newhouse (http://www.alistapart.com/stories/practicalcss/) appliquait en particulier cette solution à une série
de boîtes flottantes placées dans une boîte conteneur dont le contenu propre se réduit au spacer : elle ne sert qu'à
créer une boîte délimitant l'espace visuel où s'affichent les boîtes flottantes.
En CSS :
.flottante {
border: 2px dotted #ffff00;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}
Page 6 sur 9
4/02/09 18:41
}
.conteneur {
width: 100%;
}
.spacer {
clear: both;
}
En HTML :
<div>
<p class="flottante">boîte verte 1</p>
…etc…
<div class="spacer"> </div>
</div>
On obtient une série de vignettes pouvant accueillir par exemple des images, les liens d'un menu de navigation,
etc. ou encore permettant de réaliser une mise en page en colonnes… Elle s'adapte automatiquement à la largeur
d'affichage disponible : faute de place à droite, une boîte flottante sera replacée à la ligne.
Une variante du spacer : <hr />
Le défaut du spacer est d'introduire dans le code HTML un contenu fictif à des fins de présentation…
Lorsque la boîte adjacente à la boîte flottante est suivie d'une coupure logique dans votre page (nouvelle section
de texte…), il est préférable d'associer la propriété clear à un contenu réel. La ligne horizontale créée par la
balise <hr /> peut jouer avantageusement ce rôle :
En HTML :
<p class="jaune">
</p>
<p class="verte">
Une boîte verte
Page 7 sur 9
4/02/09 18:41
</p>
<hr />
En CSS :
.jaune {
float: right;
width: 100px;
margin: 0;
}
.verte {
}
hr {
clear: both;
}
La ligne de séparation s'avère très utile pour les utilisateurs de navigateurs qui ne tiendront pas compte de la
feuille de style (navigateurs textes, navigateurs périmés…) Il est possible de leur en réserver l'affichage, en le
supprimant dans les navigateurs qui appliqueront la feuille de style, à l'aide de la propriété visibility:
hidden;: celle-ci rend un élément invisible, tout en le laissant agir sur le flux.
hr {
clear: both;
visibility: hidden;
}
Le résultat (figure ci-dessous et exemple 6 (/IMG/article52/annexe1.html#ex6)) est visuellement identique au
spacer précédent.
Page 8 sur 9
4/02/09 18:41
Et appliqué à la série de vignettes flottantes, le résultat, illustré par la figure ci-dessous, peut être observé
également dans l'exemple 7 (/IMG/article52/annexe1.html#ex7) :
Nous aborderons les derniers types de positionnement CSS dans initiation au positionnement CSS : 3.position
absolue et fixe (/articles/initiation_absolue/).
Une question, une remarque ? Écrivez à l'auteur (/openwebgroup/bios/laurent_denis).
Page 9 sur 9

Initiation au positionnement CSS : 2.position float

Transcription

Documents pareils

Microsoft Office SB 2007 MUI

Un objet adapté à ma peinture :

BHC INOX A2/70

L`association Solidarité Enfants IMC organise une vente de truffes

JEUDI 13 OCTOBRE 2016 EDITION DE LA FETE

4449_leche corporal aclarante 400ml amalfi_fr

4460_insecticida doble accion moscas y mosquitos

Savoir créer un site web (Initiation)

studio - ti6 - Placeman Pascal

consignes à suvire pour remplir votre boîte de cadeaux