Paragraphe sans saut de ligne

Version imprimable

10/08/2009, 11h48
marcel marie

Paragraphe sans saut de ligne

Bonjour,
Je souhaiterais réaliser des paragraphes sans saut de ligne "avant" le paragraphe proprement dit, donc un saut "à la ligne" et non un saut "de ligne".
La balise provoque un saut de ligne, donc fait une ligne vierge.

En parcourant le site de Mathieu NEBRA j'ai cru trouver la solution en lisant :

<div> </div> : c'est une balise de type block. Comme , <h1> etc... Elle crée un nouveau "bloc" dans la page, et provoque donc obligatoirement un retour à la ligne

Je me suis dit <<voilà la solution>> et effectivement en local, pour mes essais, avec easyphp 1.8.0.1 j'obtiens ce que je souhaite mais sur Internet aussi bien avec IE8 que Firefox, il y a toujours une ligne vierge.

Y a-t-il une combine, une astuce ou tout simplement UNE SOLUTION à mon petit souci?. Bien entendu il est indispensable que LA SOLUTION n'empêche pas l'utilisation de CSS sur le nouveau paragraphe.
MERCI.

Marcel Marie
10/08/2009, 11h53
tibotibo69
tu peux transformer un élément de type block en inline, ce qui empêchera le retour à la ligne :
Code:

1 2 3 4 5 p { display: inline; }
10/08/2009, 11h57
Macmillenium

Bonjour,

Citation:

Envoyé par marcel marie

Je me suis dit <<voilà la solution>> et effectivement en local, pour mes essais, avec easyphp 1.8.0.1 j'obtiens ce que je souhaite

Et comment tu as fais pour obtenir ce que tu souhaites ?
10/08/2009, 12h41
marcel marie

réponses

Je vais essayer le display après une petite restauration personnelle !!.
J'ai aussi essayé

Code:

margin-bottom : none;

qui ne donne rien.
En local, avec easyphp, je ne fais rien de spécial; le module qui donne un résultat correct en local est le même exactement que celui envoyé chez mon hébergeur.

A plus tard.
M M
10/08/2009, 12h55
andry.aime

Bonjour,

Citation:

En local, avec easyphp, je ne fais rien de spécial; le module qui donne un résultat correct en local est le même exactement que celui envoyé chez mon hébergeur.

Les styles css dépendent du navigateur et non pas de l'outil utiliser.
10/08/2009, 13h14
tibotibo69

Citation:

Envoyé par marcel marie

Bonjour,
Je souhaiterais réaliser des paragraphes sans saut de ligne "avant" le paragraphe proprement dit, donc un saut "à la ligne" et non un saut "de ligne".

Dans ce cas, utilise .;)
10/08/2009, 13h28
Macmillenium
Citation:

Envoyé par marcel marie

J'ai aussi essayé

Code:

margin-bottom : none;

qui ne donne rien.
En local, avec easyphp, je ne fais rien de spécial;

Je m'en doutais.
Les navigateurs appliquent par défaut (via une feuille de style par défaut) des marges internes (padding) sur l'élément P.
La valeur none n'existe pas pour margin.
Tu peux faire un reset à 0 (attention, pas de reset sur tous les éléments P de la page) :
Code:

1 2 .paragraphe { padding:0; }
Code:

1 2 ....

le point

J'ai essayé vos conseils.
Voici ce que j'obtiens à partir de cet exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>test saut de ligne</title> <style type="text/css"> .paraph { display: inline; } </style> </head> <body> premier paragraphe deuxième paragraphe troisième paragraphe et le fin du fin !! </body> </html>
1. ce programme tel quel ne fonctionne pas, toujours des sauts de Lignes (SdL); a été essayé (avec class) car je ne souhaite pas que tous les paragraphes soient sans SdL. IL EST CORRECT si on agit sur tous les paragraphes.

2. p.paraph NON CORRECT également

3. p {padding: 0;} C'est BON pour tous les paragraphes

4. p.paraph {padding: 0;} NON CORRECT

Mon écriture de l'identificateur "class" pourrait-elle être incorrecte?

Marcel Marie

10/08/2009, 15h39
Macmillenium
Enlève :
Citation:
Envoyé par marcel marie

Code:

1 2 3 4 5 .paraph { display: inline; }
et

Citation:

Envoyé par marcel marie

3. p {padding: 0;} C'est BON pour tous les paragraphes

Pb toujours en question

"non, tu n'as rien compris ", air connu!, ça s'applique à moi ...
Suis-je vraiment nul? OUI/NON (rayer la mention inutile)
Ce display est-il dans les exceptions? OUI/NON (rayer la mention inutile)
En effet ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <style type="text/css"> .paraph { color : red; display : inline; } </style> </head> <body> premier paragraphe deuxième paragraphe troisième paragraphe et le fin du fin !! 
fournit toujours un résultat correct en ce qui concerne la couleur, mais donne partout un saut de ligne pour les sélecteurs : .paraph et p.paraph alors que c'est correct (aucun saut de ligne nulle part) pour le sélecteur p seul.

Merci encore de bien vouloir aider un NUL comme moi.
Je n'ai pas compris dans votre dernier message, ce qu'il fallait enlever. J'ai donc conservé la façon d'écrire standard.
Ma documentation livresque indique Héritée :NON pour cette propriété, est-ce la raison de cette bizarrerie?
Marcel Marie

10/08/2009, 17h28
Erwan31
Citation:

Envoyé par Macmillenium

Les navigateurs appliquent par défaut (via une feuille de style par défaut) des marges internes (padding) sur l'élément P.

Non pas de padding mais des margin!

Donc ajouter
Code:

1 2 .paraph {margin:0;}
10/08/2009, 17h49
Macmillenium

Citation:

Envoyé par Erwan31

Non pas de padding mais des margin!

Oui en effet, merci ;)
10/08/2009, 18h49
marcel marie

toujours pareil !

Eh OUI, je suis MAUDIT,

Résultats identiques à ceux déjà mentionnés ici.
Que ce soit en local avec easyphp ou chez mon hébergeur, avec les navigateurs IE8 et FireFox.
Bonnet blanc = blanc bonnet = bonnet d'âne (pour moi !!)
A plus tard. Merci
M.M.
10/08/2009, 21h38
Macmillenium

On peut voir la page en ligne ?
10/08/2009, 22h03
marcel marie

re-précision

Ma question portait sur la réalisation d'un paragraphe sans saut donc avec et non sur la réalisation d'un retour à la ligne.

Il peut toutefois arriver qu'une réponse hors sujet proprement dit puisse permettre d'atteindre le résultat souhaité en allant plus à fond dans la littérature.
Pour le moment ce n'est pas le cas, mais je lis malgré tout que l'élément peut avoir les attributs id, class,title, ce que je ne savais pas. Il faudra que je fasse éventuellement des essais car dans la suite du texte à écrire je peux avoir d'autres éléments comme et je me demande comment vont "s'entendre"! hiérarchiquement les différents sélecteurs et propriétés ?.
Donc pour le moment on reste sur le problème à résoudre, si l'on peut : l'absence de saut de ligne avec ou <div ..> </div>
A plus tard.
Marcel Marie

Premier post :

Citation:

Envoyé par marcel marie

Je souhaiterais réaliser des paragraphes sans saut de ligne "avant" le paragraphe proprement dit, donc un saut "à la ligne" et non un saut "de ligne".
La balise provoque un saut de ligne, donc fait une ligne vierge.

Ta re-précision donne :

Citation:

Envoyé par marcel marie

Ma question portait sur la réalisation d'un paragraphe sans saut donc avec et non sur la réalisation d'un retour à la ligne.

[...]

Donc pour le moment on reste sur le problème à résoudre, si l'on peut : l'absence de saut de ligne avec ou <div ..> </div>

Merci d'être plus explicite la prochaine fois, personne n'a envie de jouer aux devinettes ici.

Une boite de bloc (div, p par exemple) génère un retour à la ligne.
Pour modifier son comportement naturel, il faudrait attribuer un display:inline qui surclasse le display:block; appliqué par défaut.

C'est peut-être ce que tu cherches :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>test saut de ligne</title> <style type="text/css"> .paraph { display: inline; } </style> </head> <body> premier paragraphe deuxième paragraphe troisième paragraphe et le fin du fin !! </body> </html>
En revanche, quel est l'intérêt d'utiliser P dans ce cas ?

Merci et réponse à Macmillenium

Bonjour,
Veuillez m'excuser si je n'ai pas été suffisamment clair dans mon post initial.
Votre script ne répond pas vraiment à ma question puisque là il n'y a même plus de retour à la ligne.
MAIS, car il y a un MAIS important j'ai copier-coller votre script pour obtenir celui-ci avec le color en plus pour le fun et margin: 0 au lieu de display: inline .
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>test saut de ligne</title> <style type="text/css"> .paraph { color: red; margin: 0; } </style> </head> <body> premier paragraphe deuxième paragraphe troisième paragraphe et le fin du fin !! </body> </html>
ET le résultat est EXACTEMENT ce que je souhaite. BRAVO ET MERCI.
Par contre et là c'est totalement stupéfiant la combinaison sélecteur-propriété que vous préconisez ne fonctionne pas dans MON script initial, je l'avais essayé et je l'ai réessayé. Mystère de l'informatique !!!.

UN GRAND MERCI, et BONNE JOUNéE même si je n'ai pas dévoilé le "secret" de cet usage, car c'est peut-être stupide effectivement.
Marcel Marie

Eviter un saut de ligne avec P dans HTML

Bonjour ,

je rencontre aussi le soucis, effectivement quand je mets
Code:

1 2 3 p{ display: inline; }
dans CSS cela fonctionne mais ca modifie tout les paragraphes. Je souhaiterais en modifier qu'un seul sans saut de ligne, sinon je vais devoir ajouter des un peu partout et cela m'ennuie un peu j ai deja pas mal de contenu.

Je voudrais que les couleurs se suivent et ne soit pas à la ligne.
Comment faire pour modifier seulement ce paragraphe sans modifier les autres ?

Voici mon code :
Code:

1 2 3 <h1>Color</h1> Cette propriété sert a changer la couleur et s'utilise avec les valeurs; Nom de couleurs en anglais cad :Aqua , Black , Blue , Fuschia , Gray , Green , Lime , Maroon , Navy , Olive , Purple ,Red , Silver , Teal , White ,Yellow.C'est couleur étant limiter on peut aussi utiliser les valeurs hexadécimal plus nombreuses : # ou une valeur RGB
css:
Code:

1 2 3 .p24{ display: inline; }

17/09/2024, 16h23
mathieu

Packmenimoun, il vaut mieux que vous créiez une nouvelle discussion parce que même si vous avez l'impression que le souci est le même, la résolution sera peut-être différente.