28172 sujets

CSS et mise en forme, CSS3

Problème d'héritage

Bonjour,
J'ai mis en place un menu tout ce qu'il y a de plus simple.
Chaque élément à une bordure épaisse sur la gauche.
J'ai créé un style séparé pour indiquer que l'on est sur la page concernée, avec une bordure d'une autre couleur, mais il conserve la couleur de la règle générale...

.colonne #menu li {
	display:block;
	margin: 10px 0 12px 0;
	border-left: 5px solid #eee;
	text-indent:5px;
}
.page {
	border-left: #000;
	font:bold;
	}

En procédant ainsi, l'élément à qui est appliqué le style .page ne prend que le gras, sans mettre la bordure en noir. Pourquoi ?
Quelqu'un peut-il me mettre sur la piste ? Merci.
Salut à toi,

Essai de mettre :


.colonne #menu li {
	display:block;
	margin: 10px 0 12px 0;
	border-left: 5px solid #eee;
	text-indent:5px;
}

.page {
	border-left: 5px solid  #000;
	font:bold;
	}


Tien moi au courant.

Edit : Peux-tu nous montrer ton code HTML ?
Modifié par Viva25 (14 May 2010 - 13:31)
Le voici, nettoyé:


<body class="2Col">
<div id="container">
  <div id="header">
  <a href="index.html"><img src="image.png" alt="legende" width="140" height="190" border="0" /></a>
  </div>
  <div id="sidebar">
    <ul id="menu">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li  class="page">item</li>
    <li>item</li>
    <li>item</li>
    </ul>
  </div>
  <div id="mainContent">
  <p>texte</p>
  </div>
  <div id="footer">
  </div>
</div>
</body>

Modifié par the_man-machine (14 May 2010 - 14:06)
Alors pour le HTML :


<body class="2Col"> 
<div id="container"> 
  <div id="header"> 
  <a href="index.html"><img src="image.png" alt="legende" width="140" height="190" border="0" /></a> 
  </div> 
  <div id="sidebar"> 
    <ul id="menu"> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li  class="page">item</li> 
    <li>item</li> 
    <li>item</li> 
    </ul> 
  </div> 
  <div id="mainContent"> 
  <p>texte</p> 
  </div> 
  <div id="footer"> 
  </div> 
</div> 
</body>


et pour le CSS :


#container #sidebar ul#menu li {
	display:block;
	margin: 10px 0 12px 0;
	border-left: 5px solid #eee;
	text-indent:5px;
}

#container #sidebar ul#menu li.page {
	border-left: 5px solid #000;
	font:bold;
}


J'ai tester est ça marche !
Modifié par Viva25 (14 May 2010 - 15:34)
Sujet clos
Aller à