Discussion :

[MANU_2]

Bonjour,

Comment fait-on, en CSS, pour mettre une ligne sous un titre ?

exemple :

Titre
---------------------------------------


Merci d'avance

[Peut-êtreUneRéponse]

Une solution consiste en CSS à mettre une propriété border à ton titre.

Code html :

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

<h1>Ton titre</h1>

Code css :

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

1
2
3
h1 {
   border-bottom: 1px solid #808080;
}

Bien sûr tu peux aussi mettre le style inline via l'attribut style de ta balise h1

.

[MANU_2]

Merci pour cette réponse.

Peut-on définir la largeur de la ligne ?

style inline via l'attribut style de ta balise h1

=> je ne comprend pas ce qu'est "inline" ?

[Bisûnûrs]

Peut-on définir la largeur de la ligne ?

En définissant la largeur de la balise <h1>

Code :

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

1
2
3
4
 
h1{
   width:200px;
}

je ne comprend pas ce qu'est "inline" ?

Code HTML :

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

<h1 style="...">Titre</h1>

[MANU_2]

Si je definie la largeur de la balise <h1>, cela modifie aussi la largeur du titre.
Moi je voudrais modifier que la largeur de la ligne sans modifier celle du titre.

[Bisûnûrs]

Code HTML :

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

1
2
<h1>Titre</h1>
<hr />

[MANU_2]

Non, le hr pas pratique et bcp trop d'espace entre le titre et la ligne.
je vais rester sur border-bottom en mettant des titres pas très long.

[Bisûnûrs]

Pas en mettant

Code :

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

1
2
3
4
hr{
   margin:0;
   padding:0;
}

[Orgied]

sans oublier que tu peux aussi définir le padding et le margin pour ton élément H1, ce qui te permettra de "coller" ou de "décoller" ton HR de ton H1.

[Kerod]

Ou si tu préfères, tu pourrais mettre ton <h1> comme tu le fais déjà, en mettant un padding-bottom et margin-bottom à 0 et utiliser un div pour la ligne ce qui fera que sa largeur sera indépendante de ton titre.

Code html :

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

1
2
<h1 class="titre">Titre</h1>
<div class="ligne"></div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.titre
{
   padding-bottom: 0;
   margin-bottom: 0;
}
.ligne
{
   border-bottom: 2px dashed #000;
   width: 100%; /*ou la valeur souhaitée */
   height: 1px;
}

Le 100% fera prendre la largeur du conteneur

[Bisûnûrs]

Pour compléter le post de Kerod, je rajouterais :

Code :

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

1
2
3
4
5
6
7
8
.ligne
{
   border-bottom: 2px dashed #000;
   width: 100%; /*ou la valeur souhaitée */
   height: 1px;
   line-height:1px;
   font-size:1px;
}

Pourquoi ?

Parce que IE6 alloue automatiquement l'espace nécessaire à un texte éventuel dans un div. Donc par défaut, un div sur IE6 fait au minimum 20px de hauteur.
Donc quand vous avez

Code html :

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

<div style="height:10px"></div>

IE6 allouera quand même 20px de hauteur alors que les autres navigateurs appliqueront bien les 10px.

L'astuce est donc d'agir sur la hauteur de la ligne et la taille éventuelles de texte :

Code html :

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

<div style="height:10px;line-height:10px;font-size:1px"></div>