CSS : titre + ligne

Bonjour,

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

exemple :

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


Merci d'avance

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

Code:

---

<h1>Ton titre</h1>

---

Code:

---

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

.

Merci pour cette réponse.

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

Citation:

---

style inline via l'attribut style de ta balise h1

---

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

Citation:

---

Envoyé par MANU_2

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

---

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

Code:

---

1 2 3 4

h1{ width:200px; }

---

Citation:

---

Envoyé par MANU_2

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

---

Code:

---

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

---

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.

Code:

---

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

---

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.

Pas en mettant

Code:

---

1 2 3 4

hr{ margin:0; padding:0; }

---

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.

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:

---

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

---

Code:

---

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

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

Code:

---

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:

---

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

---

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

---