Border plus long que le texte

Résolu/Fermé
florire Messages postés 151 Date d'inscription lundi 15 juillet 2013 Statut Membre Dernière intervention 15 juillet 2022 - Modifié par florire le 16/05/2014 à 20:53
florire Messages postés 151 Date d'inscription lundi 15 juillet 2013 Statut Membre Dernière intervention 15 juillet 2022 - 18 mai 2014 à 19:44
Bonjour,
Je suis entrain de faire un menu qui aura différente partie donc plusieurs titre et je voudrais que dessous ces titre il y est un trait qui soit de toute la largeur du fond gris (soit width 100%).

Merci de votre aide !
Résultat actuel:
https://i55.servimg.com/u/f55/16/50/51/32/sans_t16.jpg

Mon html:
<div id="menu_gauche">
<div class="liste">
   <ul>
      <lh>Titre 1</lh>
      <li>Titre 1</li>
      <li>Titre 2</li>
      <li>Titre 3</li>
      <lh>Titre 2</lh>
      <li>Titre 1</li>
      <li>Titre 2</li>
      <li>Titre 3</li>
   </ul>
</div></div>


Mon css:
#menu_gauche{
 width: 100%;
 margin-top: 10px;
}
#menu_gauche .liste ul{
 list-style:none;
}
#menu_gauche .liste ul lh{
 padding-left: 25px;
 border-bottom: 1px solid #115098;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #115098;
 color:white;
}
#menu_gauche .liste ul li{
 margin-left: 45px;
}

2 réponses

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
16 mai 2014 à 23:54
Bonjour

déjà 1ère erreur
<1h> cette balise n'existe pas tu dois confondre avec <h1>
2eme erreur
un <h1> ne se mets jamais dans un <ul>

mets le avant

  <h1>Titre 1</h1>
<ul>
<li>Titre 1</li>
<li>Titre 2</li>
<li>Titre 3</li>
</ul>
<h1>Titre 2</h1>
<ul>
<li>Titre 1</li>
<li>Titre 2</li>
<li>Titre 3</li>
</ul>

#menu_gauche h1{
width: 100%;
padding-left: 25px;
border-bottom: 1px solid #115098;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #115098;
color:white;
}

ou sinon fais un li avec une class comme cela


<ul>
<li class="titre">Titre 1</li>
<li>Titre 1</li>
<li>Titre 2</li>
<li>Titre 3</li>
<li class="titre">Titre 2</li>
<li>Titre 1</li>
<li>Titre 2</li>
<li>Titre 3</li>
</ul>

#titre{
display:block;
width: 100%;
padding-left: 25px;
border-bottom: 1px solid #115098;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #115098;
color:white;
}
1
florire Messages postés 151 Date d'inscription lundi 15 juillet 2013 Statut Membre Dernière intervention 15 juillet 2022 6
17 mai 2014 à 08:58
Je n'est pas fait d'erreur c'est écrit <lh> et non <1h>.

Et merci pour ta parti css sa fonctionne, j'avais oublié de mettre "display:block;" quand j'ai essayer de mettre mon width.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
17 mai 2014 à 11:37
ha ok autant pour moi
lh existe mais uniquement en xhtml 1
0
florire Messages postés 151 Date d'inscription lundi 15 juillet 2013 Statut Membre Dernière intervention 15 juillet 2022 6
18 mai 2014 à 19:44
Ah d'accord, du coup je vais prendre ton html. Je peux mettre le 'h1' avec les 'li' dans '<ul>' ?
0