Gestion des retours à la ligne

Bonjour,

J'ai un texte précédé d'une image, à l'intérieur d'un div, trop long et j'ai donc un retour à la ligne. Du coup le retour chariot commence à aligner avec la première ligne.
C'est exactement comme une liste de puce en terme d'affichage. Je n'ai pas la main sur le code html (c'est généré dynamiquement), seulement sur le css.

Du coup j'ai quelque chose comme cela :

> Mon texte bla
bla bla

Alors que je souhaiterai avoir quelque chose comme cela :
> Mon texte bla
bla bla

">" représente mon image
Avez vous une piste pour faire cela avec CSS ?
Merci.

Salut,

max-mag a écrit :
> Mon texte bla
bla bla

Alors que je souhaiterai avoir quelque chose comme cela :
> Mon texte bla
bla bla

C'est quoi la différence ?

Un screenshot sera sans doute plus parlant.

Si au moins j'avais regardé l'aperçu du post ...
Merci de la remarque et voici une capture.

C'est mieux.

Tu connais la largeur de l'image ? Elle est fixe ou peut varier ? Je peux voir le code HTML également ?

Si je te demande tout ça, c'est pour te donner la solution la plus adaptée à ton problème.

je suggère d'utiliser un backgroung à ta div et un padding-left :

div{
   background:#FFF url(tonImg.png) left top no-repeat;
   padding-left:10px;
}

Les décalages sont à régler manuellement... et cette solution ne fonctionnera que si tu n'as pas besoin de répéter l'image de fond...

Merci de vos idées. Voici les dimensions de l'image 8x10 pixel, et un bout de mon code html (désolé, je n'ai pas d'url publique pour le moment, ce qui aurait été plus simple )

<div id="categories">
&nbsp;&nbsp;<a href="#"><img src="images/pointer.gif" border="0" alt="">Mon texte bla bla bla</a><br>
&nbsp;&nbsp;<a href="#"><img src="images/pointer.gif" border="0" alt="">Mon texte bla </a><br>
</div>

C'est nimp ce code.

- Mise en page avec des &nbsp,
- Images décoratives en durs via <img>,
- Balises <br> obsolètes,
- Balises <img> mal fermées,
- Structure sémantique douteuse,
- Attributs border inutiles

Et tu ne peux pas toucher la boucle qui génère ça ?

spiral123 a donné la solution.
Par contre, ton code HTML n'est pas adapté. Si tu veux un retrait à gauche, il ne faut pas utiliser deux espaces insécables (&nbsp;) mais utiliser des marges ou padding. De plus, séparer tes éléments en mettant des <br> ça fleure bon les années 90.

Pour une liste de lien, on utilisera plutôt ce type de structure HTML:

<ul id="categories">
  <li><a href="#">Premier lien</a></li>
  <li><a href="#">Deuxième lien</a></li>
</ul>

À noter:
- Pas de &nbsp; parasite.
- Pas d'élément <img> de décoration parasite, les puces peuvent être ajoutées en CSS comme images de fond (solution donnée par spiral123).
- Les éléments LI te fournissent une structure de base souple pour la mise en forme de ta liste de liens. Tu peux placer l'image de ta puce en fond de ces éléments LI, ou éventuellement en fond des éléments A (liens, à passer en display:block dans ce cas).

BeliG a écrit :
C'est nimp ce code.

C'est pas faux.

Sauf sur ces quelques points:

BeliG a écrit :
- Balises <br> obsolètes,

L'élément BR n'est pas obsolète, que ce soit en HTML4, XHTML1 ou HTML5. Il n'est pas adapté ici, mais le manque de pertinence ce n'est pas l'obsolescence.

BeliG a écrit :
- Balises <img> mal fermées

Uniquement si le site est en syntaxe XHTML. Autrement (HTML4, HTML5...) on peut tout à fait écrire <img> ou <br> plutôt que <img /> et <br />.

Je note pour ma part que les images décoratives (puces) avaient un alt="" comme recommandé pour ce genre d'images. Ça fait un bon point.
Modifié par Florent V. (26 Apr 2010 - 11:29)

@Florent : Son conteneur est une <div>, pas une <table>, et ses balises / attributs sont écrits en minuscules, donc ça m'a tout l'air d'être de l'XHTML ! Du coup, le "ouais mais nan, <img> et <br> il a le droit s'il bosse avec HTML <= 4.01", pas à moi !

Mais tu as raison, je me suis mal exprimé. Par "obsolète" je voulais dire "syntaxiquement fausse en XHTML".
Modifié par BeliG (26 Apr 2010 - 11:48)

Je vais demander s'il est possible de faire évoluer le code html, mais bon, j'ai peu d'espoir
Sinon, je tenterai la solution de spiral.

Merci à tous.

BeliG a écrit :
@Florent : Son conteneur est une <div>, pas une <table>, et ses balises / attributs sont écrits en minuscules, donc ça m'a tout l'air d'être de l'XHTML ! Du coup, le "ouais mais nan, <img> et <br> il a le droit s'il bosse avec HTML <= 4.01", pas à moi !

OK, là tout de suite je suis sidéré.

Le conteneur est une DIV et pas une TABLE? Tu peux utiliser des tableaux de mise en page en XHTML 1.1 ou XHTML5, et des DIV en HTML5 ou HTML 3.2, c'est valide dans tous les cas et ça n'a strictement rien à voir avec le choix de HTML ou XHTML.

Les balises et attributs sont écrits en minuscule? C'est pas comme si c'était possible en SGML, HTML 1, 2, 3.2, 4 et 5, hein.

Quant à la syntaxe <img> et <br> (sans /), pour info, elle est possible également en HTML5.

Enfin, 99,9% des pages en XHTML 1.0 ou 1.1 sur le Web (et encore, je suis gentil) sont envoyées avec le type MIME text/html, et parsées par le parseur HTML des navigateurs web (plutôt que par le parseur XML). Ce parseur va considérer que les / dans la syntaxe <img /> sont une erreur et va les ignorer. Donc bon, à moins de faire du «vrai» XHTML envoyé en application/xhtml+xml (et pas compatible IE 6, 7 et 8), le fait d'écrire <img> plutôt que <img /> est comme qui dirait inconséquent.

BeliG a écrit :
Mais tu as raison, je me suis mal exprimé. Par "obsolète" je voulais dire "syntaxiquement fausse en XHTML".

Troll du lundÿ: et comme XHTML est obsolète, on peut considérer que la syntaxe <img />, syntaxiquement juste en XHTML, est elle-même obsolète.
Modifié par Florent V. (26 Apr 2010 - 12:28)

max-mag a écrit :
Je vais demander s'il est possible de faire évoluer le code html, mais bon, j'ai peu d'espoir
Sinon, je tenterai la solution de spiral.

La solution de spiral123 exige une évolution du code HTML.

Si tu n'as aucun contrôle sur le code HTML et que ce dernier est de mauvaise facture (comme ça a l'air d'être le cas), tu peux dire non systématiquement à toutes les demandes de modification de la mise en page qui te seront adressées. C'est aussi simple que ça.

Florent V a écrit :
OK, là tout de suite je suis sidéré.

Ton dernier message à mon égard, c'est une blague ?

BIEN SÛR qu'on pourrait utiliser un tableau pour faire une mise en page.
BIEN SÛR qu'on peut écrire les balises en minuscule en HTML <= 4.

Ma phrase était à prendre au 2nd degré. Si je te propose de parier sur le langage utilisé par max-mag pour écrire son document, tu serais réellement prêt à miser sur HTML 1, 2 ou 3.2 ? Dans ce cas préviens-moi par MP, ce sera avec joie que je te transmettrai mon n° de compte Paypal.

Faut arrêter de prendre les gens pour des c***s, c'est pénible franchement...

Hello,

On ne peut pas dire que Florent soit très diplomate, mais on ne peut pas dire non plus que tu sois très clair, BeliG.

Pourquoi parles-tu de HTML 1, 2 ou 3.2 ? Comme l'a souligné Florent, il peut très bien s'agir de HTML 4.01 ou HTML 5 (bien que l'on puisse raisonnablement en douter pour ce dernier).

Bref, je crois que tout le monde est d'accord pour reconnaître que le problème n'est pas ici ces éventuelles erreurs de syntaxes, mais plutôt l'utilisation de <br> et &nbsp; pour gérer le positionnement des éléments graphiques.

P.S. : il y a des gens très bien qui créent des documents en HTML 4.01 aujourd'hui.
Modifié par Julien Royer (26 Apr 2010 - 14:31)

BeliG a écrit :
Ton dernier message à mon égard, c'est une blague ?

Bah non. Je dis qu'on peut écrire <img> ou <br> si on code en HTML4 ou HTML5 (pour prendre les deux versions actuelles), et tu me réponds que le code donné est censé être en XHTML vu qu'il n'y a pas de TABLE de mise en page et que les noms d'éléments et attributs sont en minuscules. Je suis très honnêtement resté sur le cul, d'où ma réponse.
Maintenant, si c'était une blague, autant pour moi.

BeliG a écrit :
Si je te propose de parier sur le langage utilisé par max-mag pour écrire son document, tu serais réellement prêt à miser sur HTML 1, 2 ou 3.2 ?

Je vote HTML 4.01 Transitional.