28172 sujets

CSS et mise en forme, CSS3

Styler une suite d'images

Bonjour,

Dans certains billets de mon blog, j'ai une suite d'images qui se présente comme ceci :
<p>
	<a href="url1" title="titre1"><img src="img1.jpg" alt="img2.jpg" style="display: block; margin: 0pt auto;" title="titre_img1"></a>
	&nbsp;<a href="url2" title="titre2"><img src="img2.jpg" alt="img2.jpg" style="display: block; margin: 0pt auto;" title="titre_img2.jpg"></a>
	&nbsp;<a href="url3" title="titre3"><img src="img3.jpg" alt="img3.jpg" style="display: block; margin: 0pt auto;" title="titre_img3.jpg"></a>
	&nbsp;<a href="url4" title="titre4"><img src="img4.jpg" alt="img4.jpg" style="display: block; margin: 0pt auto;" title="titre_img4.jpg"></a>
	&nbsp;<a href="url5" title="titre5"><img src="img5.jpg" alt="img5.jpg" style="display: block; margin: 0pt auto;" title="titre_img5.jpg"></a>
</p>


Le résultat, bien entendu, c'est que les images se trouvent centrées, mais collées les unes en dessous des autres. Ce code est ajouté par le moteur de blog (dotclear, en l'occurrence).
Etant donné que la marge est fixée à "0pt" dans le code, je ne parviens pas, dans ma CSS, à séparer les images les une des autres (c'est-à-dire à ajouter quelques pixels entre chacune d'elle) tout en les entourant d'un bord.
Actuellement, le code CSS ressemble à ceci :
img { padding: 3px; margin: 0 20px 10px 0; border: 1px solid #FFF; }

Autre problème : les images n'occupent qu'une petite largeur au centre du billet (elles font environ 150 pixels de large, mais certaines, au format paysage, font 250 pixels... malheureusement je ne peux pas savoir dans la CSS lesquelles sont en portrait, et lesquelles sont en paysage), tandis que les liens sur ces images occupent, eux, la totalité de la largeur (soit 730 pixels !)
Comment faire en sorte que les liens ne correspondent qu'aux images elles-mêmes ?

J'espère avoir été compréhensible... Merci pour votre aide !
Bonjour,

Si ta marge est fixée dans le code directement tu ne peux rien faire dans la css car le code a la priorité.

Ensuite si les liens sur tes images occupent toutes la largeur au lieu de celle de l'image c'est probablement qu'ils sont en display:block.
Il suffit de mettre une marge sur les liens et pas sur les images. Tu peux cibler avec un div conteneur pour ne pas impacter tous les liens de la page. Smiley smile
Merci pour vos réponses. Le problème, c'est que l'on se situe dans le contexte d'un billet. Dans ce contexte, le conteneur (#post) est le même pour tous les liens du billet, qu'ils contiennent ou non une image.

Néanmoins, il me semblait qu'il existait une syntaxe CSS pour cibler "tous les liens contenant une image" : pourtant un code comme #post a > img { margin-bottom: 10px; } n'a aucun effet...
Tu n'as pas accès au code html d'un billet ?

Sinon la syntaxe que tu donne est correcte est fait bien normalement ce que tu veux, sauf que les images en question ont "margin:0;" dans le code.
#post a > img { margin-bottom: 10px; } là tu cible les images qui sont dans les liens, et le style déjà en inline est 100 fois plus puissant que ta ligne de CSS donc ca c'est mort.
Je crois pas qu'il soit possible de cibler "les liens qui contiennent une image" en CSS, en javascript par contre y'a moyen.

Et sinon si ton post est sur fond uni tu peux peut être appliquer un border à tes images.
L'ennui, c'est justement que mes images ont déjà un border, sinon je leur aurais simplement ajouté un padding-bottom, puisque seul le margin est spécifié "en dur" dans le code Smiley cligne

J'aurais justement aimé garder ce border, tout en séparant mes images...
J'ai quand même un autre problème : c'est cette histoire de lien sur les images qui occupe toute la largeur de la page, alors que l'image elle-même ne fait que 200 pixels de large...
keyraw a écrit :
Ensuite si les liens sur tes images occupent toutes la largeur au lieu de celle de l'image c'est probablement qu'ils sont en display:block.

Du coup j'ai ajouté un #post a { display: inline; } à ma CSS... sans aucun résultat ? Pourtant (cf. mon code html dans le premier billet) aucun style n'est ajouté "en dur" pour les liens ?
J'ai appris un truc grace à toi => le comportement de tes liens est issu du display:block sur les images. Tu peux ptet essayer de dimensionner les liens.
Modifié par keyraw (30 Aug 2010 - 18:08)
... sauf que je ne sais pas si mes images sont en "portrait" ou en "paysage", donc dimensionner les liens n'est pas possible...

Bref, ce que je voulais n'a tout simplement pas l'air d'être possible... Merci quand même à vous tous qui avez essayé de m'aider !
C'est une idée comme une autre, et je te remercie de te pencher sur mon problème... mais c'est pour moi hors de question Smiley biggrin En effet, ce sont des aperçus des images en assez grande taille, je me vois mal en couper ou en masquer un tiers dans un sens ou dans l'autre Smiley eek
Tu peux uniformiser la taille du canevas avec une taille identique pour toutes les images et remplir les espaces vides avec la couleur de fond de la page si elle est unie. Tu intègres les bordures directement dans l'image, comme ça tu peux te servir des bordures pour espacer les images comme suggéré précédemment.

Sinon je ne vois pas d'autres solutions ! ^^
Modifié par keyraw (31 Aug 2010 - 10:58)
Perso je créerais une liste d'image dans un div conteneur, ce qui en wiki donnerait:



///html 
<div class="liste_images">
///

#[((/all-blogs/public/galeries/Debutant/.DSC_0015_m.jpg|DSC_0015.jpg||DSC_0015.jpg, nov. 2008))|/all-blogs/public/galeries/Debutant/DSC_0015.jpg||DSC_0015.jpg]
#((/all-blogs/public/galeries/Debutant/.DSC_0046_m.jpg|DSC_0046.jpg||DSC_0046.jpg, nov. 2008))

///html 
</div>
///


Puis dans la css :


.liste_images {text-align: center}
.liste_images ul {margin: 0; padding: 0}
/*espacement entre les images*/
.liste_images ul li {margin: .5em}
.liste_images ul li img {padding: 10px; background-color: #fff; border: #000 solid 1px;}


Attention, il ne faut pas donner un alignement à l'image au moment de l'insertion dans le billet. Smiley cligne
Modifié par Patidou (01 Sep 2010 - 10:15)
Sujet clos
Aller à