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.

**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

**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

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

Paragraphe sans saut de ligne

HTML

Vue hybride

Discussions similaires

Partager

Partager