31 juillet 2007

Mieux présenter vos photos avec du CSS

Un tout petit code qui va vous permettre de mieux présenter les photos publiées dans vos billets. Ça affectera toutes les photos postés depuis que vous aillez publié depuis la création de votre blog/site sauf si vous les aviez stylisé autrement en insérant un inline style à chaque fois, mais je sais que ça n'a jamais été le cas :)
L'astuce consiste à créer une marge de chaque côté de la photo pour l'empêcher d'être chevauché par le texte qui doit l'envelopper normalement, puis créer une bordure d'une largeur d'un pixel de chaque côté aussi, enfin ajouter un espace entre bordures et bords de l'image, préférablement ne contenant aucun encadrement, sinon on aurait pas besoin de bordures supplémentaires. Tout celà va se faire à l'aide d'un petit code CSS qui pourrait tenir sur une seule ligne mais que je metterais sur cinq petite lignes pour que ce soit plus claire et meiux présenter.


img{
margin:8px;
border: 1px dashed #666666;
padding: 5px;
}


Décryptage :


img : C'est pour dire que le code contenu entre les accolades '{' et '}' ne va affecter que les images insérées à l'aide de la balise/tag <img> et c'est généralement le cas lorsqu'on inclut une image dans un billet/poste/article, sauf spécification contraire avec du code inline.
margin
: c'est la marge entre image et texte dont je parlais plus haut. Ici j'ai utilisé une marge de huit pixels, mais vous pouvez mettre une autre valeur de votre choix en fonction de vos préférences. Jouez avec!
padding
: c'est l'espacement entre la bordure qu'on vient d'ajouter et les bords de l'image/photo. Encore vous pouvez changer la valeur du padding selon votre guise. Jouez encore!
border
: c'est la bordure extérieure,
  • 1px: c'est l'épaisseur de la bordure. Ajustez la comme vous le voulez.
  • dashed: Indique le nom du style de la bordure. ça peut prendre d'autres valeurs( solid, dotted, double, groove, inset, outset,ridge ..). Testez chacune de ces valeurs pour voir lequel de ces styles vous préféreriez.
  • #666666: C'est le code hexadécimal de la couleur grise utilisée pour les bordures de l'image de ce billet. Choisissez une autre couleur s'il y a lieu, en fonction de la couleur de fond sur lequel repose la photo et/ou selon votre propre goût.

Maintenant il ne vous reste plus que d'insérer le style/code - après y avoir introduit des changements selon vos propres inspirations/besoins - quelque part dans le code source de votre blog/site partie contenant le style CSS ou bien directement dans la feuille de style CSS si celle-ci vient séparée du document HTML, et ce juste après une accolade fermante '}'.

Nota Bene :
- Le code doit être inscrit tout en lettres minuscules.
- N'oubliez surtout pas les point-virgule à la fin de chaque ligne comme dans l'exemple.

Astuce :

Comme signalé précédemment en parlant du sélécteur 'img', ce style serait appliqué partout et affecterait toutes les images cependant et si l'on veut qu'il n'affecte que les images contenues dans un paragraphe ( cas des articles publiés dans un blog/site ) et ne pas toucher aux images figurant dans la sidebar ou le footer/pied de page par exemple, on ajoutra un simple p au début suivi d'un espace pour la séparer de 'img'. On écrirait ainsi:


p img{
margin:8px;
border: 1px dashed #666666;
padding: 5px;
}

Apprenez un peu plus :

Pour en savoir plus sur CSS visiter ce site, vous y apprendrait beaucoup si ça vous tente.


Voilà! J'espère avoir été suffisament explicite sinon vos questions/commentaires sont les bienvenus, je veuillerais à y répondre as soon as possible :)
Bon blogging à tous et à bientôt !

5 Commentaire(s):

Anonyme a dit…

Salut l'ami ;)
Merci pour cet astuce si intéressante ;) quoique je ne peux pas l’appliquer vu que je me contente du modèle par défaut donné par canalblog!! Makanefhem walouuu f le langage html…donc je préfère rester ds des choses primitives ;)))
Merci encore une fois;)
Enjoy,

A to Z a dit…

Salut missarchi :)
Vu ce que t'as pu réussir sur ton blog, je ne pense pas que tu sois aussi nulle en HTML que ça ;). sois pas trop modeste quand même :). C'est aussi simple que de changer une bannière...Sinon je te donnerai un coup de main volontier ;)

Cheers!

Anonyme a dit…

Rah je vais te prendre au sérieux ;) mais entre nous faits gaffe, car je vais te casser la tête par mes questions :))))))))
En tout cas merci à Sidi ;) une fois décidée pour changer d’habits pour mon blog je n’hésiterai pas à faire appel à ta technicité ;)
Enjoy,

A to Z a dit…

Faut toujours me prendre au sérieux missarchi ;)). Tes/vos questions sont toujours les bienvenues.
So you're welcome anytime, je serais ravi de t'apporter mon soutien ;)

Cheers!

Anonyme a dit…

Je suis flattée ;)
Merciiii,