Mise en page CSS avec KompoZer
Des styles qui ont de la classe
A
la page
précédente, nous avons résolu le problème
de la mise en page pour une image calée sur le bord gauche du
bloc Texte. Mais nous voulions aussi insérer
des images sur le bord droit, selon le même principe.
Pas grave, on a déjà la solution : il suffit d'attribuer un " id " à chacune des images. Ensuite, on définit un style pour chaque " id ". J'y cours.
Attendez, malheureux. Vous oubliez une petite chose.
Si vous souhaitez introduire de nombreuses images, vous devrez
définir un " id " -puis un style- pour chaque image.
Ce qui n'est pas très rationnel.
Pour résoudre le problème, nous allons faire appel aux classes plutôt qu'aux identifiants.
Différence entre classe et identifiant
Lorsque nous avons introduit la notion d'identifiant (" id "), nous avons précisé qu'un " id " ne peut être utilisé qu'une seule fois sur une page.
Les classes reposent sur un principe similaire. Cependant, celles-ci peuvent apparaître à plusieurs reprises dans la page.
Identifiant : " id "
<div id="entete">En-tete</div>
<div id="menu">Menu</div>
<div id="texte">Le texte</div>
<div id="pied">pied</div>Classe : " class "
<div id="texte">
<h2>Le titre</h2>
<img class="image" alt="Caesar" src=
...
<img class="image" alt="Cicero" src=
...
</div>Pour le reste, on peut " styler " une classe comme on le fait pour un identifiant.
Comment introduire un nouveau sélecteur de classe
Dans la barre d'état,
clique droit sur la balise <img> correspondant
à une image.- Sélectionne la commande .
- Dans la zone de la boîte de dialogue des propriétés avancées, indiquer ou sélectionner " class "
- Dans la zone Valeur, indiquer le nom de la " classe ". Ici, nous indiquerons " imageGauche ".
- Clique sur le bouton pour terminer la définition de la classe.
Nous avons maintenant défini une classe pour l'image qui devra se trouver sur le bord gauche de la zone de texte.
Ouais, mais ça ne nous met toujours pas l'image proprement entourée par le texte.
Ceci est bien sûr l'objet du point suivant où nous allons attribuer des directives de style à cette nouvelle Classe.
Styler une classe
Attribuer des directives de style à une Classe se fait exactement de la même façon que l'on attribue des directives de style à un identificateur " id ".
Il faut toutefois veiller à indiquer clairement qu'il s'agit d'une classe et non d'un identificateur.
Ouvre l'éditeur CSS.- Crée une nouvelle règle de style. Celle-ci prend le même nom qu'une classe existante.
Le nom de la "classe" est précédé d'un point et non du symbole #.
- Clique sur le bouton .
- Définis les styles nécessaires pour obtenir une image flottante à gauche avec une marge droite de 20 px.
Clôture
Il n'y a maintenant plus aucune difficulté pour construire une nouvelle classe imageDroite dont les styles imposeront un flottement à droite et une marge gauche de 20px.
- Dans le document en cours, inclus du texte et plusieurs images.
- Attribue la classe imageGauche à certaines images et imageDroite à d'autres.
- Vérifie que les images se disposent comme indiqué dans l'illustration du haut de cette page.
Quand tu as obtenu la mise en forme correcte pour les deux
dispositions d'images, passe à la page suivante.
Dernière modification 02/11/2007
