Alignement horizontal photos et texte

Ma configuration WP actuelle
- Version de WP: 4.0-fr
- Version de PHP/MySQL : 5.1
- Thème utilisé : PhotoStory
- Extensions en place : Akismet, Breadcrumb NavXT 5.0 Migration Compatibility Layer DO NOT ACTIVATE, Easing Slider "Lite", InfiniteWP - Client, Jetpack par WordPress.com, Photo Gallery, WP Super Cache.
- Nom de l'hebergeur : OVH
- Adresse du site : http://photard.fr

Bonjour,
J'ai publié deux articles avec du texte, des liens et des images.
J'ai pas mal galéré sans vraiment réussi à faire ce que je voulais.
En fait je voudrais englober les images dans le texte, et pas aligner comme j'ai péniblement réussi à le faire dans mes différents articles.
Je préviens d'avance que je ne connais rien en php, css ou autre langage html...
alors si vous pouvez m'aider en détaillant clairement...
merci d'avance
Modifié par Photard26 (21 Sep 2014 - 22:14)

Salut Photard26.

Désolé, mais j'ai rien compris à ta demande.
Un petit dessin au pire...

Je vais reformuler ma demande.
Dans mes articles, je voudrais faire en sorte que les photos soient englobées correctement par le texte.
Actuellement, il y a des espaces irréguliers entre le texte et les images. Par ailleurs, je ne parvient pas à positionner les images exactement ou je veux, c'est à dire par ex. alignées horizontalement avec du texte entre les deux, le tout bien cadré. Je suis obligé de jouer sur la taille des images insérées pour obtenir un semblant d'alignement. (voir résultat sur mon site, 2 articles)
Voilà, j'espère que ma requête est plus clairement exposée.
Merci d'avance
Modifié par Photard26 (23 Sep 2014 - 08:09)

En effet, le positionnement flottant a été créé spécialement pour les images dans le texte.

Voici un petit exemple avec ton contenu Photard26 :
http://jsfiddle.net/n70f3p5x/2/

Tu pourras voir dans cet exemple que le plus important est de bien structurer son code.
Un paragraphe est une entité. Il sert à séparer des blocs de texte.
Si une image est liée à un paragraphe, elle doit être DANS ce paragraphe.

Petite explication du style appliqué :
Comme l'a dit K3p', il faut ajouter l'attribut "float" à tes images. Je te laisse juger si cela doit s'appliquer à toutes les images de ton site, celle ayant une certaine classe ou bien juste celle placé dans un paragraphe.

Mais l'attribut float possède un coté pervers : il sort l'élément du flux d'éléments de la page. Autrement dit, il ne se trouve plus sur le même référentiel. Cela se matérialise par des "erreurs" de positionnement des éléments suivants.
Pour contrecarrer cela, j'ajoute deux attributs au conteneur, le paragraphe.
- D'une part "clear : both" qui annulera l'action du flottant pour l'élément qui portera cette valeur. Ainsi, je protège le paragraphe des éléments flottants précédents.
- D'autre part "overflow : hidden" qui permettra de prendre en compte l'élément flottant, pourtant placé hors flux, dans le calcul de dimension du conteneur.
Certains seront tenté de me dire que "overflow : hidden" rendra "clear : both" inutile mais bon, sémantiquement c'est mieux de mettre le deux je trouve.

Avant de tout casser, j'ai bien vu l'exemple proposé par erwan21a mais je n'ai pas compris... ou dois-je insérer le code qui se trouve dans la petite fenêtre en haut à droite ?
Je vous avais prévenu, je n'y connais rien...
Modifié par Photard26 (28 Sep 2014 - 15:36)