28220 sujets

CSS et mise en forme, CSS3

[Résolu] transformer un élément de list en block [Ie]

Bonsoir,

Pour indiquer la page courante de mon menu construit en liste, je voulais insérer un bloc qui fasse toute ma div qui contient.
Sous firefox ça marche très bien, encore que j'ai du faire un truc peut être pas très élégant en html, à savoir mettre ma balise <span> et ensuite mes balises <li>

Allez, j'ose vous montrer la chose...

html:
<body>
<div class="menu_local">
	<span class="titre_rubrique">Ma rubrique</span>
	<ul>
	<li> Ss_menu1</li>
	<span class="current_local"><li>page en cours</li></span>
	<li> Ss_menu3</li>
	<li> Ss_menu4</li>
	<li> Ss_menu5</li>
	<li> Ss_menu6</li>
	<li> Ss_menu7</li>
	</ul>
</div>

</body>


et ma css :
.titre_rubrique{
	font-weight:bold;
	padding-left:23px;
}
.menu_local {
      height: auto;
      width: 215px;
	  padding-top:5px; padding-bottom:2px;
      background : #EFE9DE;
	  	 }
.menu_local ul{
		list-style:none;
		padding-left:0px;
}
.menu_local li{
		padding-top: 0.35em;
		margin-left:45px;

	}
.current_local{
	display:block;
       background-color:#FFF;
		}


Le pb, c'est qu'avec Ie, il ne prend pas toute la largeur de la div, mais il démarre à 45px (à cause du margin-left:45px je suppose...)

Si quelqu'un à une solution ou une remarque à faire sur la propreté de cette petite chose, c'est parfait !
merci beaucoup

ps: je rend mon projet demain, ensuite je vous embeterais moins, je tenterais d'aider Smiley ravi
Modifié par Thinkedou (15 Nov 2005 - 11:14)
Hihi
J'ai trouvé toute seule comme une grande : 

.current_local{
	display:block;
    background-color:#FFF;
    margin-left:-45px;
    padding-left:45px;
  		}


comme ça j'ai enlevé le <span> avant le <li>

MAIS Smiley decu

J'ai un écart de 4-5 px en hauteur entre la ligne où le span est appliqué et la ligne d'en dessous (sur Ie toujours).
Ah !

Pourquoi avoir utilisé un <span> ? voilà la question !

avec un div ça fonctionne très bien.
Je ne met pas résolu tout de suite parce que -si possible- j'aimerais bien que quelqu'un en profite pour me dire si ce code est propre.

Merci, allez hop, au lit.
Bonjour,

Quelques erreurs dans ton code html et tes propriétés CSS :

1.Tu ne peux pas encapsuler un li dans quoi que ce soit.
2. Un élément de liste est une boite de type block, sa largeur est donc de 100% de son contener pondérée des marges affectée par défaut aux listes pour respecter le code typographique.

Donc ton soucis se résoud en annulant la marge par défaut affecté à la boite ul et en utilisant un padding au lieu d'un margin pour le texte des éléments de listes et en créant une simple classe qui affecte la couleur à la boite li dont tu veux modifier l'apparence :

Pour CSS


.titre_rubrique{
  font-weight:bold;
  padding-left:23px;
}
.menu_local {
  height: auto;
  width: 215px;
  padding-top:5px; 
  padding-bottom:2px;
  background-color: #EFE9DE;
}
.menu_local ul{
  list-style-type:none;
  padding-left:0;
  margin-left:0;
}
.menu_local li{
  padding-top: 0.35em;
  padding-left:45px;
}
.current_local{
   background-color:#FFF;
}


Note: Corrigé des approximations sur les noms des propriétés CSS

Pour Html


<div class="menu_local">
  <span class="titre_rubrique">Ma rubrique</span>
  <ul>
     <li> Ss_menu1</li>
     <li class="current_local">page en cours</li>
     <li> Ss_menu3</li>
     <li> Ss_menu4</li>
     <li> Ss_menu5</li>
     <li> Ss_menu6</li>
     <li> Ss_menu7</li>
 </ul>
</div>


Jean-pierre
Merci !
C'est désormais limpide jpv ! Ce forum est décidement un rêve...

Et non Igor cette entrée ne m'as pas échappé Smiley cligne , mais dans ce cas c'est un developpeur qui fera ça comme il l'entend, moi je dois juste prévoir l'habillage.
Sujet clos
Aller à