Discussion :

[Gilles_75]

Bonjour

J'ai créé un simple tableau dont voici le code HTML

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h3 class="post_h3">
<ul style="list-style: none;">
     <li> SECTION 1 </li>
               <ul style="list-style: none;">
                  <li> SOUS SECTION 1</li>
        </ul> 
</ul>
<ul style="list-style: none;">
     <li> SECTION 2 </li>
               <ul style="list-style: none;">
                  <li> SOUS SECTION 2</li>
        </ul> 
</ul>
</h3>

Et le code CSS

Code :

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

1
2
3
4
5
6
7
 
..post_h3 {
	font-family: 'Source Sans Pro'  !important;
	font-size:19px !important;
    line-height :27px !important;
    font-weight : 500 !important;
}

Comment serait-il possible de paramétrer le saut de ligne entre SECTION 1 et SECTION 2
pour le diminuer ou l'augmenter ?

Merci pour votre aide

[NoSmoking]

Bonjour,

J'ai créé un simple tableau dont voici le code HTML

Non tu as généré des listes imbriquées, ceci étant pour éloigner deux éléments l'un de l'autre on utilise la propriété CSS margin.
↪ II-B. Marges extérieures

[Gilles_75]

Merci pour l'info

J'ai essayé ces 2 types de code pour supprimer complétement l'espace entre les lignes
Mais cela ne fonctione pas

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h3 class="post_h3">
<ul style="list-style: none;   margin-top: 0px ; margin-bottom: 0px ;">
     <li> SECTION 1 </li>
               <ul style="list-style: none;">
                  <li> SOUS SECTION 1</li>
        </ul> 
</ul>
<ul style="list-style: none;   margin-top: 0px ; margin-bottom: 0px ;">
     <li> SECTION 2 </li>
               <ul style="list-style: none;">
                  <li> SOUS SECTION 2</li>
        </ul> 
</ul>
</h3>

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h3 class="post_h3">
<ul style="list-style: none;   margin-top: 0px ; margin-bottom: 0px ;">
     <li> SECTION 1 </li>
               <ul style="list-style: none;   margin-top: 0px ; margin-bottom: 0px ;">
                  <li> SOUS SECTION 1</li>
        </ul> 
</ul>
<ul style="list-style: none;   margin-top: 0px ; margin-bottom: 0px ;">
     <li> SECTION 2 </li>
              <ul style="list-style: none;   margin-top: 0px ; margin-bottom: 0px ;">
                  <li> SOUS SECTION 2</li>
        </ul> 
</ul>
</h3>

[NoSmoking]

J'ai du mal à comprendre ce que tu appelles «  supprimer complétement l'espace entre les lignes ».

Pour commencer il serait bon que tu arrêtes de mettre du style inline pour le mettre dans la partie style de ton document, cela t'éviteras de faire des réécritures.

Pour bien te rendre compte de la place qu'occupent tes différents éléments affectes leurs une background-color, cela ne modifie pas les dimensions de leur boîte.

Enfin un dernier point, on n'utilise pas les balises <hx> pour faire de la mise en forme, il existe un arsenal de propriétés CSS pour cela.
De plus c'est non conforme

Element ul not allowed as child of element h3 in this context.

Un ultime dernier point je ne saisie pas trop la construction de ta liste qui traditionnellement ne s'articule pas comme cela.
C'est également non conforme

Element ul not allowed as child of element ul in this context.

Quel est le but final recherché pour ta mise en page ?

[Gilles_75]

Je vais essayé d'être plus précis
J'ai créé une page d'exemple
https://guideyourtrip.com/blog-voyag...classe/exemple
avec le code html suivant

Code html :

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

1
2
3
4
<h3> SECTION 1</h3>
<h4> SOUS SECTION 1</h4>
<h3> SECTION 2</h3>
<h4> SOUS SECTION 2</h4>

Ce que j'aimerais c'est définir les espaces entre les Hn
Simple saut de ligne entre H3 ET h4 en décalant un peu le H4 vers la droite
Et saut de ligne plus important entre chaque H3

[NoSmoking]

Dans ta page de test il te faut commencer par supprimer les éléments <br> qui n'ont pas lieu d'être dans ce cas.

Concernant le CSS, il faut faire un « reset » sur les margin de tes <hx>

Code :

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

1
2
3
4
h1, h2, h3, h4, h5, h6 {
  color: #0c376c;
  margin: 0;
}

il te faut faire de même pour tes éléments <p> et mettre en place les margin « d'écartement »

Code :

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

1
2
3
4
5
6
7
p {
  margin: 0;
  margin-bottom: 1em;           /* plutôt que le padding */
/*  padding-bottom: 1em;        /* OUT */
  min-height: 5em;              /* juste pour visualiser */
  background-color: #DEF;       /* juste pour visualiser */
}

enfin pour décaler les <h4> il te suffit d'un

Code :

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

1
2
3
h4 {
  margin-left: 1em;             /* par exemple */
}

Peut être devrait tu envisager d'utiliser des balises plus sémantiques comme <section> justement.