Les CSS pour présenter vos images

Pour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site.

Utilisation

Mettez les codes désirés dans votre CSS et testez dans votre page en inscrivant un code de ce genre :

<img class="photo" autres attributs...>

et vous pourrez ainsi, mieux comprendre le fonctionnement, tester et ... adopter !

Quelques exemples à placer dans le code CSS

.photo { 
  background-color:#fafbfc; 
  border:1px solid #b0b0b0; 
  margin:0 0 10px 10px; 
  padding:5px; 
}

.photoadroite { 
  border: 5px solid #b0b0b0; 
  margin: 5px 6px 15px 6px; 
}

.photoagauche { 
  border : 5px solid #b0b0b0; 
  float : left; 
  margin : 5px 15px 6px 15 px; 
}

Pour encadrer une image à gauche avec le texte

div#photoflot p{ 
  margin:0; 
  padding:0; 
  text-align:justify; 
} 
div#photoflot img{ 
  float:left; 
  background-color:#fafbfc; 
  border:1px solid #b0b0b0; 
  margin:0 0 10px 10px; 
  padding:5px; 
} 
hr{ 
  clear:left; 
}

A placer ainsi :

<div id="photoflot"><img attributs...> 
<p>Fusce sem turpis, mollis ut, commodo quis, aliquet eget, ipsum. Ut nonummy libero vitae neque. Quisque lacus. Nullam lobortis. Cras quam. Nulla vitae ante nec eros mollis luctus. Vivamus velit. Morbi interdum euismod sapien...</p> 
</div>

Pour encadrer une image à droite avec le texte

/* Encadrer le texte autour d'une image à droite */ 
.rightimg, .leftimg, .centreimg img { 
  border:1px solid #AAAAAA; 
  background-color:#E9E9E9; 
  padding:3px; 
  margin:6px; 
} 
.rightimg {float:right;} 
.leftimg {float:left;} 
div.centreimg { 
 text-align:center; 
}

Exemple de placement du code dans la page:

<img class="rightimg" attributs...>Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis...

si vous avez essayé ... pas mal non ?

Le top !

Mettez dans votre fichier CSS une des présentations qui vous plait sur la balise "img " et d'un coup, TOUTES les images de votre site (si les pages sont liées à votre fichier CSS) se verront immédiatement modifiées et présentées de la manière que vous aurez choisie ... et pourquoi pas varier de temps en temps ... Pratique, non ? Ce document intitulé « Les CSS pour présenter vos images » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.