Mise en page CSS avec KompoZer

Des styles qui ont de la classe

ModèleA 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

  • Propriétés avancéesDans la barre d'état, clique droit sur la balise <img> correspondant à une image.
  • Sélectionne la commande Propriétés avancées.
  • Dans la zone Attribut 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 ".

ImageGauche

  • Clique sur le bouton OK 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.

  • ImageGaucheOuvre 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 Créer la règle de style.
  • 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. Vers la page suivante Page suivante


Dernière modification 01/09/2016 Test dans /info ...