Blog ENI : Toute la veille numérique !
Jusqu'à ce soir ! : -25€ dès 75€ sur les livres en ligne, vidéos... code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Dreamweaver CC pour PC/Mac (édition 2018)
  3. Mise en forme CSS des images
Extrait - Dreamweaver CC pour PC/Mac (édition 2018) Concevoir des sites interactifs et attractifs
Extraits du livre
Dreamweaver CC pour PC/Mac (édition 2018) Concevoir des sites interactifs et attractifs
1 avis
Revenir à la page d'achat du livre

Mise en forme CSS des images

Les propriétés CSS utilisées

Pour la mise en forme des images en CSS, nous allons principalement pouvoir travailler sur le flottement, le remplissage, les marges et les bordures.

Le flottement

Faire flotter une image dans du texte permet de la placer sur le côté gauche ou droit dans un paragraphe et de faire passer le texte sur le côté opposé au flottement.

Dans cet exemple, l’image de la fleur flotte à gauche dans le paragraphe, le texte passe alors sur la droite.

images/12sf002.png

 Dans le panneau CSS Designer, dans l’onglet Propriétés, dans la catégorie Disposition se trouve la propriété float, avec deux valeurs possibles : Left (flottement à gauche) et Right (flottement à droite).

images/18C14-001.png

Dans cet exemple, l’image utilise un flottement à droite :

images/12sf003.png

Les autres propriétés

Vous pouvez utiliser les propriétés Padding, Margin (catégorie Disposition) et de Bordure pour mettre en forme vos images.

Un exemple plus complet

Cette image utilise une classe nommée .image. Elle possède un flottement gauche (float: left), des marges hautes à 5 pixels, droite à 30 pixels et basse à 5 pixels (margin-top: 5px; margin-right: 30px; margin-bottom: 5px;), un remplissage à droite de 10 pixels (padding-right: 10px) et une bordure à droite, pleine, d’épaisseur moyenne et grise (border-right: medium solid #666).

images/18C14-002.png

 Sélectionnez l’image et appliquez-lui cette classe.

images/18C14-003.png