Sujet Précédent Sujet Suivant

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;
}
A voir également:

2 réponses

Réponse 1 / 2
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
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
Réponse 2 / 2
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 737
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

Discussions similaires

adele
marine carnet-pantier -
irongege -

2 réponses
3 bip long 2 bip courts
bgielel -
Bgiebgielel -

14 réponses
Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses
copie de texte
jean -
jean -

5 réponses