[Résolu] Affichage d'images non conforme

Bonjour.

Dans une feuille de style, qu'est-ce qui pourrait empêcher d'afficher ces vignettes côte à côte dans la page HTML, qui s'affichent l'une en dessous de l'autre ?

<div align="center">
	<a href="photos/image_01.jpg" width="800" height="1200" title="Mon image"><img src="photos/image_01.jpg" width="200" height="300" class="thumb" alt="Photo" /></a>
	<a href="photos/image_02.jpg" width="800" height="1200" title="Mon image"><img src="photos/image_02.jpg" width="200" height="300" class="thumb" alt="Photo" /></a>
	<a href="photos/image_03.jpg" width="800" height="1200" title="Mon image"><img src="photos/image_03.jpg" width="200" height="300" class="thumb" alt="Photo" /></a>
</div>

Merci.
Modifié par Nerva (24 Sep 2015 - 13:06)

Bonjour,

Les <a> sont des éléments de type "inline", ils se mettent donc naturellement les une après les autres. Ce que tu chercher est un comportement de type block je pense.

Tu peux passer par cet article : http://www.alsacreations.com/tuto/lire/530-structure-balises-css-display-bloc-block-ligne-inline.html notament la partie "Rendu CSS : l'aspect par défaut des éléments".

Attention au petit travers, donner un display:block; directement à tes <a> les fera s’afficher les uns en dessous des autres mais également prendre toute la largeur, le click sera alors effectif sur tout le <a> et non seulement sur l'image.

C'est quand même étrange parce que si j'affiche cette portion dans le navigateur à partir d'une simple page HTML dépourvue de style, les vignettes sont bien côte à côte.

C'est la première fois que j'ai un soucis de ce genre. Là je suis en train de tester les styles d'un blog à moteur Wordpress sur un serveur Free. Pour avoir les vignettes côte à côte, je dois avoir toutes les entrées <a> bout à bout sur la même ligne.

Après réflexion je me demande si Wordpress ne convertit pas automatiquement les sauts de ligne comme tels, même en édition HTML des articles, ce qui correspondrait à ce que j'ai écrit dans le message précédent. Aucune option ne correspond à ça dans le paramétrage général.
Modifié par Nerva (24 Sep 2015 - 17:18)

Ok alors je crois que j'ai mal compris ton problème (j'ai cru qu’elles s’affichaient cote à cote et que tu les voulais les unes en dessous des autres, dans ta réponse je comprend l'inverse ) et tu n'as pas donné tout les éléments (Wordpress peut effectivement interpréter tes sauts de ligne comme des paragraphes et rajouter un <p> autour, jette un œil au code généré).

Désolé, je m'étais mal exprimé...

En examinant le code-source de la fenêtre d'édition de l'article (après enregistrement), l'intégralité du dit article est entre ça :

<div id='editorcontainer'><textarea rows='20' cols='40' name='content' tabindex='2' id='content'>

et ça :

</textarea></div>

Pas de balise <p> générée ou autre jeu de caractères qui indiquerait un retour à la ligne.

Nerva a écrit :
En examinant le code-source de la fenêtre d'édition de l'article (après enregistrement)

C'est plutôt la page affiché du coté du site qu'il faudrait vérifier, pas la page d'édition. Je ne sais pas s'il fait apparaître ces balises en édition.

Ok et effectivement, un <br /> après chaque </a>

Alors j'ai trouvé la solution ici même :

http://forum.alsacreations.com/topic-1-66877-1-Balise-p-automatique-dans-Wordpress.html

A ajouter dans functions.php :

//empêcher l'éditeur wysiwyg d'ajouter des balises <p> et <br> :
//sur les fichiers 'content'
remove_filter( 'the_content', 'wpautop' );
//sur les fichiers 'exerpt'
remove_filter( 'the_excerpt', 'wpautop' );