Paragraphe sans saut de ligne

**marcel marie** · 10/08/2009, 11h48

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 <p ...> </p> 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 <p>, <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

**tibotibo69** · 10/08/2009, 11h53

tu peux transformer un élément de type block en inline, ce qui empêchera le retour à la ligne :

Code css :

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

1
2
3
4
5
p {
 
    display: inline;
 
}

**Macmillenium** · 10/08/2009, 11h57

Bonjour,

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 ?

**marcel marie** · 10/08/2009, 12h41

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

Code :

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

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

**andry.aime** · 10/08/2009, 12h55

Bonjour,

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.

**tibotibo69** · 10/08/2009, 13h14

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 <br />.

**Macmillenium** · 10/08/2009, 13h28

Envoyé par marcel marie

J'ai aussi essayé

Code :

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

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 css :

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

1
2
 
.paragraphe { padding:0; }

Code html :

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

1
2
 
<p class="paragraphe">....</p>

**marcel marie** · 10/08/2009, 15h27

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

Code :

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

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>
<p>premier paragraphe</p>
<p class="paraph"> deuxième paragraphe</p>
<p>troisième paragraphe</p>
<p>et le fin du fin !! </p>
 
</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

**Macmillenium** · 10/08/2009, 15h39

Enlève :

Envoyé par marcel marie

Code :

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

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

et

Envoyé par marcel marie

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

**marcel marie** · 10/08/2009, 17h13

"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 :

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

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>
<p>premier paragraphe</p>
<p> deuxième paragraphe</p>
<p class="paraph">troisième paragraphe</p>
<p>et le fin du fin !! </p>

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

**Erwan31** · 10/08/2009, 17h28

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 css :

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

1
2
 
.paraph {margin:0;}

**Macmillenium** · 10/08/2009, 17h49

Envoyé par Erwan31

Non pas de padding mais des margin!

Oui en effet, merci

**marcel marie** · 10/08/2009, 18h49

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.

**Macmillenium** · 10/08/2009, 21h38

On peut voir la page en ligne ?

**marcel marie** · 10/08/2009, 22h03

Ma question portait sur la réalisation d'un paragraphe sans saut donc avec <p ..> </p> 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 <br /> 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 <span ...> </span> 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 <p ..> </p> ou <div ..> </div>
A plus tard.
Marcel Marie

**Macmillenium** · 10/08/2009, 23h08

Premier post :

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 <p ...> </p> provoque un saut de ligne, donc fait une ligne vierge.

Ta re-précision donne :

Envoyé par marcel marie

Ma question portait sur la réalisation d'un paragraphe sans saut donc avec <p ..> </p> 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 <p ..> </p> 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 xhtml :

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

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>
 
<p class="paraph">premier paragraphe</p>
<p class="paraph"> deuxième paragraphe</p>
<p class="paraph">troisième paragraphe</p>
<p class="paraph">et le fin du fin !! </p>
 
</body>
</html>

En revanche, quel est l'intérêt d'utiliser P dans ce cas ?

**marcel marie** · 11/08/2009, 08h44

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 :

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

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>
 
<p>premier paragraphe</p>
<p class="paraph"> deuxième paragraphe</p>
<p class="paraph">troisième paragraphe</p>
<p class="paraph">et le fin du fin !! </p>
 
</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

Paragraphe sans saut de ligne

HTML

Discussions similaires

Partager

Partager