Demandez votre accès à la bêta privée
de la nouvelle version de Martius Web :
vous y découvrirez des articles totalement réecris, plus complets, et surtout une navigation beaucoup plus agréable !
Les tutoriaux
Positionnement "float"
Nous allons entamer la partie la plus difficile de ce tutorial, l'utilisation des balises de positionnement.
// Le flux normal
On appelle flux normal le positionnement par défaut des éléments de la page, comme deux blocs se placeront l'un en dessous de l'autre, et deux éléments en ligne l'un à côté de l'autre.
// Le positionnement "float"
Il existe deux modes de positionnement en CSS, don l'un est appelé positionnement "float".
Il n'y a qu'une propriété à étudier : float, qui permet de
décaler le bloc du flux normal le plus à droite ou le plus à gauche que le permet le bloc
conteneur (<body>, <div>, ...).
Elle admet les valeurs left qui placera le bloc tout à gauche, right qui le placera
tout à droite, et none qui replace le bloc dans le flux normal.
Nous allons étudier plusieurs cas, pour bien savoir utiliser ce mode de positionnement.
// Premier exemple : aligner une image dans un texte.
C'est l'utilisation la plus basique de la propriété float. Elle permet de placer une image
à droite ou à gauche du texte, comme ceci :
Nous allons commencer par créer le code html, pour ne pas surcharger la page, nous n'allons voir que la partie
body, mais je rappelle que le reste est obligatoire.
1 <p> 2 <img src="./images/illustration.png" alt="Description de l'image" class="illustration" /> 3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce magna. Curabitur sagittis porttitor risus. Maecenas tempus. 4 </p>
La feuille CSS sera très simple :
1 .illustration
2 {
3 display: block;
4 float: left;
5 /* nous plaçons l'image à gauche */
6 }
Une propriété doit vous intriguer dans cette feuille : la propriété display.
Elle est très utile car elle permet de donner le comportement d'un bloc à un élément de type inline, et vice-versa. les valeurs courantes sont :
1 display: block: 2 display: inline; 3 display: none;
display: none permet de masquer un élément.
Il existe d'autres valeurs, mais elles ne sont pas utiles actuellement, néanmoins, ces valeurs serviront quand les navigateurs auront implémenté le XML au même titre que le HTML. Mais il n'en sera pas question dans ce tutorial.
Note : Il n'est pas possible de mettre un bloc dans un élément parent inline,
même en utilisant la propriété CSS display.
// Deuxième exemple : mise en page menu vertical, puis contenu
On va créer un cadre div pour le menu, qui lui, sera fait en liste à puce, puis un
dernier cadre div, pour le contenu.
Cette page sera sur le modèle :
Côté HTML, on aura :
1 <body> 2 <div id="menu" > 3 <ul> 4 Menu 5 <li> < Page 1</li> 6 <li> < Page 2</li> 7 <li> < Page 3</li> 8 </ul> 9 </div> 10 <div id="page"> 11 <p>Lorem Ipsus</p> 12 </div> 13 </body>
Nous allons maintenant étudier la feuille de style de cette page. Pour ne pas se perdre et gagner du temps,
je vous recommande d'écrire les propriétés CSS dans un ordre plus ou moins précis,
comme par exemple, commencer par width/height, puis les
margin/padding, la bordure, le fond, et terminer avec le formatage du texte.
1 #menu
2 {
3 width: 100px;
4 float: left;
5 margin: 0px 5px;
6 border: 1px #CCC solid;
7 }
8
9 #page
10 {
11 width: 600px;
12 float: left;
13 margin: 0px 5px;
14 border: 1px #CCC dashed;
15 }
Voir le résultat sur la page d'exemples n°6
// Troisième exemple : un menu horizontal plus évolué
Cet exemple va vous permettre de faire un menu plus évolué, avec un effet "rollover" (changement de couleur du fond du bloc). Il sera fait à partir d'une liste à puce.
1 <ul id="menu"> 2 <li><a href="index.html">Accueil</a></li> 3 <li><a href="nous.html">Qui sommes nous ?</a></li> 4 <li><a href="traveaux.html">Nos travaux</a></li> 5 <li><a href="equipe.html">Notre équipe</a></li> 6 <li><a href="contact.html">Nous contacter</a></li> 7 </ul>
La feuille CSS sera :
1 #menu li
2 {
3 float: left;
4 list-style-type: none;
5 /* rappel : la puce disparait avec list-style-type */
6 }
7
8 #menu a
9 {
10 display: block;
11 width: 100px;
12 height: 20px;
13 margin: 2px;
14 border: 1px #CCCCCC solid;
15 background-color: #FFFFFF;
16 }
17
18 #menu a:hover
19 {
20 background-color: #EEEEEE;
21 }
Nous allons maintenant expliquer comment fonctionne ce menu.
Les pseudo-formats ne sont pas toujours correctement interprétés par Internet Explorer. Pour le cas de
:hover, il n'est pris en charge que pour un élément lien hypertexte
(<a href="">...</a>). Si nous n'avions pas été confronté à ce
problème, nous aurions pu facilement placer ce pseudo-format directement sur l'élément
li.
Le but est de faire un bouton. Il faut donc faire un "cadre" dont la couleur de fond doit changer. On transforme donc
le lien en bloc, avec la propriété display: bloc;. On choisit enfin la taille, le fond,
et on le change avec le pseudo-format :hover.
Pour placer les élément horizontalement, on ajouter un float: left;, tous les boutons seront
placés le plus à gauche possible dans le conteneur, par contre, si la largeur de la fenêtre n'est pas
suffisante, les boutons suivants se placent sur la ligne du dessous.
Vous pouvez voir le résultat sur la page d'exemple n°7
//
La propriété clear
clear est une propriété CSS qui permet de stopper un float.
De cette manière on peut, en prenant le premier exemple traité, forcer le retour en dessous de l'image
d'une partie du texte.
la propriété admet trois valeurs, left, qui annule uniquement un float: left;,
right, qui lui n'annule qu'un float: right;, et la valeur both qui annule un
float à droite ou gauche. Il est courant d'utiliser clear: both; dans une classe
nommée spacer. Biensur, ce n'est pas une obligation.
le code sera :
1 <p> 2 <img src="./images/illustration.png" alt="description" class="illustration" /> 3 <p> 4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce magna. Curabitur sagittis porttitor risus. 5 </p> 6 <p class="spacer"> 7 Vestibulum gravida feugiat diam. Nam molestie elit pulvinar nisl. In arcu est, malesuada in, vulputate commodo, ornare nec, elit. 8 </p>
La feuille de style sera :
1 .illustration
2 {
3 display: block;
4 float: left;
5 }
6
7 .spacer
8 {
9 clear: both;
10 }
Et le résultat :
Il peut aussi parfois arriver que le contenu du flottant soit plus haut que celui du texte, et parfois, le résultat
affiché peut manquer d'rsthétisme.
Il existe pour cela une parade.
On ajoute au code HTML un bloc, généralement une ligne horizontale (<hr />).
1 <div> 2 <img src="./images/illustrion.png" alt="illustration" class="illustration" /> 3 <p> 4 Vestibulum gravida feugiat diam. Nam molestie elit pulvinar nisl. In arcu est, malesuada in, vulputate commodo, ornare nec, elit. 5 </p> 6 <hr class="float_correction" /> 7 </div>
On reprend la feuille de style du premier exemple en ajoutant seulement :
1 .float_correction
2 {
3 visibility: hidden;
4 clear: both;
5 }
On peut aussi profiter de cet exemple pour découvrir la propriété visibility,
qui admet les valeurs visible et hidden qui, comme vous l'aurez surement compris,
permettent de choisir d'afficher ou non un élément.
Note : visbility: hidden et display: none; n'ont pas le même
comportement : en utilisant visbility: hidden, l'élément ne sera pas visible, mais le
comportement qu'il doit avoir reste intact, alors quedisplay: none;, désactive
complétement l'élément, comme s'il n'était pas présent dans le code.
Grâce à cette astuce, l'affichage devient :
Nous pouvons maintenant attaquer le second mode de positionnement dans le prochain chapitre.
N'hésitez pas à poser vos questions sur le forum
© 2004 Martius Web | Some rights reserved |
A propos | Plan du site
