Comment supprimer un saut à la ligne avec un DIV?

Bonjour,
Lorsqu'on a un texte, puis qu'on place un DIV, cela fait automatiquement un saut à la ligne dans la mise en page.
Savez vous comment faire pour qu'il n'y ait plus ce saut à la ligne?


la flêche montre l'interligne que je voudrais supprimer.

<p class="paragraphe"> Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam,
<div class="floatright"><a   title=""><img src="…machine.jpg"/></a>
<p class="paragraphe"> eius uxorem, Constantius ad se tandem desideratam venire multis fictisque blanditiis hortabatur. quae licet ambigeret metuens ?
</div>
</p></p>

Merci pour votre aide!

<p class="paragraphe"> Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam,
<div class="floatright"><a   title=""><img src="…machine.jpg"/></a>
<p class="paragraphe"> eius uxorem, Constantius ad se tandem desideratam venire multis fictisque blanditiis hortabatur. quae licet ambigeret metuens ?
</div>
</p></p>

Salut, faut faire attention, les balises sont mal imbriquées

<p class="paragraphe"> Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam,</p>
<div class="floatright"><a   title=""><img src="…machine.jpg"/></a>
<p class="paragraphe"> eius uxorem, Constantius ad se tandem desideratam venire multis fictisque blanditiis hortabatur. quae licet ambigeret metuens ?</p>
</div>

Il y a un saut de ligne, car il y a une nouvelle balise <p></p>, ce qui implique un nouveau "paragraphe" dans une nouvelle ligne.

JENCAL a écrit :
Il y a un saut de ligne, car il y a une nouvelle balise &lt;p&gt;&lt;/p&gt;, ce qui implique un nouveau "paragraphe" dans une nouvelle ligne.

Jencal a déjà tout dit. Maintenant, si vous voulez tout de même que les paragraphes soient collés (ce qui est dommage à mon sens). Vous pouvez jouer sur les margins et paddings.

Mais la solution la plus sémantique, dans votre cas, serait de mettre en place une <br> plutôt qu'un nouveau paragraphe.

PS : Et attention à ce que vous a dit Jencal sur la mauvaise imbrication des balises. Ce n'est pas la première fois que cela vous arrive.

JENCAL a écrit :

<p class="paragraphe"> Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam,</p>
<div class="floatright"><a   title=""><img src="…machine.jpg"/></a>
<p class="paragraphe"> eius uxorem, Constantius ad se tandem desideratam venire multis fictisque blanditiis hortabatur. quae licet ambigeret metuens ?</p>
</div>

Il y a un saut de ligne, car il y a une nouvelle balise &lt;p&gt;&lt;/p&gt;, ce qui implique un nouveau "paragraphe" dans une nouvelle ligne.

Ok ok, mon erreur est qu'à chaque nouveau paragraphe et donc après chaque DIV, je refais un <p class="paragraphe"> qui définit la police, la taille etc...
Alors que je devrais définir ceci une bonne fois pour toute dans le CSS, puisque j'utilise la même police et la même taille tout le long du document.
Je vais essayer pour voir!
Merci.

Olivier C a écrit :

Jencal a déjà tout dit. Maintenant, si vous voulez tout de même que les paragraphes soient collés (ce qui est dommage à mon sens). Vous pouvez jouer sur les margins et paddings.

Non, je ne colle pas tous les paragraphes! Mais parfois j'ai besoin que deux paragraphes soient collés, comme sur l'image ci dessus.

Olivier C a écrit :

PS : Et attention à ce que vous a dit Jencal sur la mauvaise imbrication des balises. Ce n'est pas la première fois que cela vous arrive.

Olivier m'étonnera toujours avec sa mémoire d'éléphant!

abeille a écrit :

Olivier m'étonnera toujours avec sa mémoire d'éléphant!

Donc en résumé :
- quand je veux faire un saut de paragraphe (balise <p>) : je ferme mon paragraphe actuel et j'en ouvre un nouveau.
- quand je veux simplement revenir à la ligne il s'agit alors de la balise <br>.

A noter cependant que sur le web les retours à la ligne sont souvent remplacés par un nouveau paragraphe. Tout simplement pour une raison de clarté : la lecture sur écran n'est pas la même que sur papier. Ce qui se fait dans le print ne doit pas être transposé pour le web...

Olivier C a écrit :

- quand je veux simplement revenir à la ligne il s'agit alors de la balise &lt;br&gt;.

Et la balise <br />? Je ne sais plus qui m'a dit qu'il fallait l'écrire comme ceci maintenant!

Bonjour,

abeille a écrit :
Et la balise &lt;br /&gt;? Je ne sais plus qui m'a dit qu'il fallait l'écrire comme ceci maintenant!

Tout dépend de ton doctype, c'est vrai en xhtml (je crois), mais pas en html5 par exemple.

SolidSnake a écrit :
c'est vrai en xhtml (je crois)

Oui, sous ce doctype il fallait effectivement l'autofermer, mais ce n'est plus nécessaire en html5.

Il faut évoquer quand même le fait que le décalage vertical des paragraphes est dû aux styles par défaut de ces éléments. Les navigateurs leur applique des marges (margin) qui aboutit au résultat que tu as.
Si tu ne veux plus de décalage, il faut appliquer un

p {margin: 0}