Discussion :

[cr1ptal]

Hello,

C'est peut être une question bête, mais je ne vois pas l'erreur. Je veux ajouter une marge à gauche et a droite pour le texte de ma page html/php. Pour cela j'ai ajouté ceci dans le "head" de ma page:

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
<style>
 
.code {
    color : blue;
    background-color: lightgrey
}
 
.center {
    text-align: center;
}
 
p {
    margin-left: 120px;
    margin-right: 120px;
}
</style>

Les éléments <p> sont déclarés de manière simple ainsi:

Code HTML :

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

1
2
3
4
5
<a name="hardware"></a>
<h4>Required hardware:</h4>
<p>
I tested this procedure on a Raspberry Pi 3B+, having 1 GB of RAM.
</p>

Aucune marge n'est affichée dans ffox. Quelqu'un aurait une idée svp?

D'avance merci :-)

/cr!ptal

[NoSmoking]

Bonjour,
il te suffit de mettre une couleur de fond à ton élément <p> pour voir que la propriété margin est bien prise en compte, dans ton cas si le contenu ne remplie pas la ligne il est difficile de s'en rendre compte.

Code :

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

1
2
3
4
p {
    margin: 0 120px;
    background-color: #DEF;
}

[cr1ptal]

Je t'assure que ce n'est pas pris en compte, peut être que ça vient de ffox. J'ai ajouté une classe CSS à tous les <p> et là ça marche. Disons que c'est résolu.
/cr!ptal

[Invité]

Bonjour,

de toutes façons, on n'a pas assez d'éléments pour en dire plus.

Il existe certainement d'autres instructions CSS dans ton code, dont tu ne parles pas...

[cr1ptal]

Bonsoir,

Effectivement, il y a d'autres éléments CSS, les voilà. J'ai enlevé la classe de <p>, la margin ne s'appliquait pas. Je l'ai remplacée par la classe.decal, et ça marche ainsi. J'ai aussi essayé de remplacer les px par des %, le texte reste toujours collé au rebord à gauche.
Si vous trouvez pourquoi la margin n'était pas appliquée en premier lieu, c'est toujours intéressant :-)

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<style>
 
.code {
    margin-left: 5%;
    margin-right: 5%;
    color : blue;
    background-color: lightgrey
}
 
.center {
    text-align: center;
}
 
.decal {
    margin-left: 5%;
    margin-right: 5%;
}
 
.decal_left {
    margin-left: 5%;
}
 
.hline {
    border: 1px solid grey;
    margin-left: 5%;
    margin-right: 5%;
}
 
.buttonGreen {
  background-color: #4CAF50; /* Green */
  border: 1px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
}
 
.buttonBlue {
  background-color: #008CBA; /* Blue */
  border: 1px;
  color: white;
  padding: 8px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
}
 
.col_big {
  width: 64%;
/*   border: 1px solid black; */
  padding: 10px;
}
 
.col_small {
  width: 7%;
/*   border: 1px solid black; */
  padding: 10px;
}
 
/* p { */
/*     margin-left: 30%; */
/*     margin-right: 30%; */
/* } */
 
</style>

Exemple d'utilisation d'un paragraphe:

Code HTML :

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

<p class="decal">Table of contents:</p>

Bonne soirée,
cr!ptal

[Invité]

Code :

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

1
2
3
4
.decal {
    margin-left: 5%;
    margin-right: 5%;
}

Code HTML :

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

<p class="decal">Table of contents:</p>

.decal {...} a plus de "poids" que p {...}. Il prend donc l'avantage.

• .decal : (0-1-0)
• p : (0-0-1)

• A LIRE : III-A. Calcul du poids d'un sélecteur

[cr1ptal]

C'etait peut etre pas assez clair: la classe p et .decal ne se superposent pas; soit j'utilise la classe p, soit je la mets en commentaire et j'utilise .decal. Quand seulement la classe p est declaree, le paragraphe reste collé à gauche de l'écran.

[Invité]

Bonjour,

p n'est pas une classe (CSS), mais une balise (HTML).