Discussion :

[Bisûnûrs]

Bonjour,

Un problème qui survient souvent et que j'aimerais une fois pour toutes éradiquer est l'espacement généré au retour à la ligne dans l'éditeur texte.

Exemple flagrant : http://josselin.willette.free.fr/test/test.html

Dans le premier cas, le code est tel que :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img src="1.gif" />
<img src="2.gif" />
<img src="3.gif" />

Dans le second :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="1.gif" /><img src="2.gif" /><img src="3.gif" />

Evidemment le résultat cherché est le second, mais faut-il délaisser l'indentation et le code propre au détriment de tout le code sur une seule ligne ?

Ceci n'est bien sûr qu'un exemple parmi tant d'autres.

Si vous avez une solution pour garder le code tel qu'il est dans le premier cas, je suis preneur.

Merci de vos réponses.

[MasterOfChakhaL]

Salut,

Les images sont des éléments en ligne...
Le problème que tu décris est je pense, un comportement normal.

Quand tu écris du texte dans ton éditeur et que tu fais un retour chariot, tu t'attends bien à voir un espace qui lui correspond lors de l'affichage html...

Solution... Les passer en bloc via css avec tout ce que ca implique ( un élément par ligne nottament), ou alors conserver le code de ton deuxième exemple...

[Bisûnûrs]

Je dois donc pour chacune de mes images utiliser un float:left dans un div comme :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div style="float:left"><img src="1.gif" /></div>
<div style="float:left"><img src="2.gif" /></div>
<div style="float:left"><img src="3.gif" /></div>

?

J'aurais justement aimé éviter les float ... :/

[MasterOfChakhaL]

J'aurais justement aimé éviter les float ... :/

Tout a fait d'accord,

Les éléments floats réagissent vraiment différement et sont sortis du flux...
Pour moi, c'est écraser une mouche avec une bombe atomique... Attention aux dommages colatéraux et aux retombés radioactives (le positionnement des autres éléments)

Moi, j'assumerais les <img ... /> sur une même ligne...
Avec des éditeurs qui te font un retour à la ligne automatique (juste pour l'affichage du code...), c'est forcément un peu plus fouillis mais ce n'est pas si génant que ça...

Gvim, par exemple, fait parti de ce genre d'éditeur

[Bisûnûrs]

Moi, j'assumerais les <img ... /> sur une même ligne...

Sauf quand tu as une dizaine d'images chacune avec un lien et des attributs onmouseover et onmouseout, ça devient vite une ligne ingérable.

[MasterOfChakhaL]

c'est pour ca que je dis que j'assume et non que je le fais avec joie...

Comme je te l'ai dit dans mon premier post, je considère ceci comme un fonctionnement normal (pas forcément pratique). Je ne crois pas que modifier les propriétés d'affichage pour rendre le code lisible soit une bonne idée.

Rien ne t'empêche d'écrire ta page avec l'indentation qui te plait. Une fois que tes tests sont finis, tu vires les espaces...

Je ne vois pas de réel problème (juste une petite frustration).

[Bisûnûrs]

Comme je te l'ai dit dans mon premier post, je considère ceci comme un fonctionnement normal (pas forcément pratique).

Je sais malheureusement que ce comportement est normal, je sondais juste, peut-être quelqu'un avait-il trouvé la solution (miracle) ?

Rien ne t'empêche d'écrire ta page avec l'indentation qui te plait. Une fois que tes tests sont finis, tu vires les espaces...

Seulement sur une home page en éternelle mise-à-jour je serai obligé de réindenter le code à chaque fois que je veux le modifier.

Je ne vois pas de réel problème (juste une petite frustration).

Certes, mais avoue que trouver une solution pratique à cette frustration pourrait arranger pas mal de choses.

[trotters213]

avec une marge négative de 4 pixels normalement c'est bon.

[Bisûnûrs]

@trotters213 : C'est de la bidouille ça.

Mais ça fonctionne.

Et dans le cas de :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<table>
  <tr>
    <td>
      <img src="1.gif" />
    </td>
  </tr>
</table>

au lieu de :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<table>
  <tr>
    <td><img src="1.gif" /></td>
  </tr>
</table>

?

[MasterOfChakhaL]

si tu ne mets qu'une seule image par cellule, un display:block sur l'image devrait suffire.

[Bisûnûrs]

@MasterOfChakhaL : Et si j'ai du texte et plusieurs images, je dois donc encadrer le tout d'un div ?

Réponse après test : oui.