Discussion :

[ml1234]

bonjour,
comment définir l'espace entre un titre, éventuellement souligné, et le texte qui le suit sans utiliser de <br/> qui fait un espace trop grand.
j'ai créé une page 3 col fixes header et footer dans dreamweaver (template) et il y a un espace entre chaque titre et ce qui suit mais je ne trouve nullepart cet espace défini. peut-être est-ce caché dans les headers h1,h2,... par défaut ?

dois-je utiliser header avec un style ou un paragraphe ?

j'ai trouvé quelques exemples de titres.
j'ai encore du mal encore à assimiler la cascade de styles (je suppose qu'on les écrit à la queu leuleu et que s'il n'y a aps deux fois la même propriété c'est comme si c'était un style unique ?) et le mélange h1 class="style" et span. pourquoi un span ?

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
.Style1 {
  color: #660000
}
hr {
  color: #F46876;
}
h1 {
  font-weight: 100;
}
 
.Style2 {
  font: italic 28px;
  color: #970000;
}
 
.Style25 {
  color: #d9ad00;
  font-size: 17px;
}
.Style26 {
  color: #000000;
  font-size: 10px;
}
 
.Style27 {color: #000000}
 
 
<h1 class="Style1"><span class="Style2">Situation du man&egrave;ge</span><br />
        <hr size="1" />
 
      </h1>
      <p class="Style1 Style27"><strong>Royal cercle &eacute;questre l'Eperon</strong><br />
        Rue du vieux fr&ecirc;ne, 21<br />
        4031 Angleur</p>
 
 
<p class="Style25">Acc&egrave;s</p>
          <p class="Style26">A 150 m&egrave;tres du carrefour de   Boncelles<br />
 
            direction Tilff<br />
          </p>

merci
marc

[FoxLeRenard]

Le saut de ligne est toujours de la hauteur du texte en cour.
Donc il faut revenir au texte normal et ajouter un espace puis un BR

[ml1234]

salut,
merci pour la réponse mais je ne comprends pas bien comment tu fais.
espace = &nbsp ? comment revenir au style normal ?
tu as un exemple de ligne ?

marc

[FoxLeRenard]

salut,
merci pour la réponse mais je ne comprends pas bien comment tu fais.
espace = &nbsp ? comment revenir au style normal ?
tu as un exemple de ligne ?

marc

Non pas d'exemple juste tu as sur une ligne

Code :

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

1
2
 
<H1>kjhkjhjkhkjh</H1>&nbsp <br />

mais peut importe la balise ça pourait étre FONT etc ...

[ml1234]

merci

j'ai trouvé comment augmenter l'écartement entre le titre et la ligne qui suit :
ajouter un padding-bottom de 5px dans la règle css du header. ok, pour vous c'est évident -)

cependant, je me pose la question :
où est donc cachée DANS DREAMWEAVER le padding par défaut entre un header et les <p> qui le suivent ?
ce qui est incroyable aussi c'est la différence lorsque j'ajoute *{padding:0;margin:0} au début du css alors que ces deux propriétés sont déjà écrites dans le body.
Toutes les lignes de <h> et de <p> s'écartent fortement.
je suppose donc qu'il faut toujours mettre cette ligne au début du css.
j'avais lu cela dans un livre micro-application sur css

Marc

[devyan]

Salut,

bonjour,
comment définir l'espace entre un titre, éventuellement souligné, et le texte qui le suit ... ?

Et bien il suffit d'utiliser une marge basse (margin-bottom) sur ton titre (h1 dans ton exemple) de la hauteur de ce que tu désire comme séparation.

Disons que tu veux une séparation de 20pixels alors tu auras :

Code :

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

h1{ margin-bottom: 20px; }

devyan

[ml1234]

merci pour tes réponses.
pourquoi margin-bottom plutôt que padding-bottom ?
comme ça on est sûr que on ajoute à l'extérieur de la zone texte
plutôt que de gonfler la zone texte ?

Marc

[devyan]

merci pour tes réponses.
pourquoi margin-bottom plutôt que padding-bottom ?
comme ça on est sûr que on ajoute à l'extérieur de la zone texte
plutôt que de gonfler la zone texte ?

Marc

Justement...

De l'extérieur vers l'intérieur tu as :
* outline
* margin
* border
* padding
* zone de texte

De plus les "margin" sont censées se combiner et non s'additionner

Code exemple: :

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

1
2
3
 
<p style="margin-bottom:20px;">toto</p>
<p style="margin-top:10px;">titi</p>

devrait donner toto et titi séparés de 20 pixels et non de 30. (avec padding tu obtiendrais 30pixels)

devyan.

[Erwan31]

merci
j'ai trouvé comment augmenter l'écartement entre le titre et la ligne qui suit :
ajouter un padding-bottom de 5px dans la règle css du header. ok, pour vous c'est évident -)

Un margin-bottom serait plus pertinent, la padding n'étant pas réservé aux espaces verticaux entre des éléments.

cependant, je me pose la question :
où est donc cachée DANS DREAMWEAVER le padding par défaut entre un header et les <p> qui le suivent ?

Ce n'est pas caché dans dreamweaver, ce sont les style par défaut (je te conseil de lire tout l'article) du navigateur qui servent à obtenir un document correctement présenté en cas d'absence de CSS auteur (la tienne). Prise en compte de la hiérarchie des titres dans l'établissement d'une taille logique etc, une raison supplémentaire d'utiliser des éléments sémantiques (Hn, P, UL...)

ce qui est incroyable aussi c'est la différence lorsque j'ajoute *{padding:0;margin:0} au début du css alors que ces deux propriétés sont déjà écrites dans le body.
Toutes les lignes de <h> et de <p> s'écartent fortement.
je suppose donc qu'il faut toujours mettre cette ligne au début du css.
j'avais lu cela dans un livre micro-application sur css

Déclarées au niveau du body, elle ne s'applique qu'à cet élément et non tous les éléments (*)
Dans la majorité des cas le reset CSS *{padding:0;margin:0} est déconseillé car il implique (entre autres) de redéfinir toutes les marges et padding des éléments.
Mieux vaut homogénéiser les marges par défaut comme ceci par exemple:

Code :

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

p {margin: 1.5em 0 0.8em}

et laisse le navigateur faire le reste.
Les valeurs sont en em pour que ces espaces s'agrandissent proportionnellement à la taille du texte (modifiable via le zoom texte du navigateur).

Si tu n'as pas tout saisi, n'hésite pas à demander

[ml1234]

merci beaucoup pour toutes ces explications

Marc