Mise en page CSS avec KompoZer

Mise en boîte des images

Nous allons probablement vouloir insérer des images dans le document dont nous construisons le modèle. Certaines images seront calées sur la marge gauche, d'autres sur la marge droite. Voyons comment les styles CSS vont nous permettre d'optimiser le processus.

Insertion d'image sans CSS

Je trouve ce titre tout à fait à propos. Il n'y a pas besoin de CSS pour insérer les images. Pourquoi faire compliqué ?

Je vous propose donc d'essayer de voir en quoi les styles CSS sont intéressants. Ce sera une forme de révision.

Dites, je ne veux pas faire le difficile, mais ce n'est pas de la plus grande élégance, ce texte collé à mon image.

Eh bien, une solution simple serait d'utiliser au mieux nos connaissances pour corriger ce petit défaut.

Je vois que vous avez un certain sens de l'humour ! Ca n'arrange rien du tout votre système. L'image est bien séparée du texte, mais qui demandait cette marge à gauche ?.

C'est donc le moment d'appeler les styles CSS à l'aide.

Insertion d'image avec CSS

Pour que l'image soit parfaitement positionnée sur le bord gauche du bloc et que le texte coule le long de son bord droit, il faut lui attribuer un style flottant.

Pour éloigner légèrement le texte de l'image, il suffit d'imposer la marge qui convient à l'image.

• Supprime la marge imposée dans la boîte de dialogue des Propriétés de l'image.

Dans l'éditeur de style, nous allons faire flotter l'image à gauche et imposer une marge droite de 20 px.

• Ouvre l'éditeur CSS.
• Crée une nouvelle règle pour le sélecteur <img> réservé aux images.
• Dans l'onglet Boîte, définis l'image
  • flottante à gauche
  • avec une marge droite de 20 px.
• Ferme l'éditeur CSS.
• Vérifie l'effet obtenu dans la page.

Quand tu as obtenu la mise en forme correcte pour l'image flottante à gauche, passe à la page suivante.