28112 sujets

CSS et mise en forme, CSS3

[Résolu] Menu rollover CSS et état actif

Bonjour à tous, j'ai crée un menu en CSS en suivant vos tuto dont voici le code source : 
<div id="gauche">       
<ul id="menu_gauche">
	<li id="<?php echo $menu1 ; ?>"><a  href="../">+ accueil</a></li>
	<li id="<?php echo $menu2 ; ?>"><a href="hotline.php" >+ hotline</a></li>
	<li id="<?php echo $menu3 ; ?>"><a href="recup_donnee.php" >+ sauvegarde</a></li>
	<li id="<?php echo $menu4 ; ?>"><a href="solution_save.php" >+ bixosback</a></li>
	<li id="<?php echo $menu5 ; ?>"><a href="formation.php" >+ formation</a></li>
	<li id="<?php echo $menu6 ; ?>"><a href="location.php" >+ location</a></li>
	<li id="<?php echo $menu7 ; ?>"><a href="gestion_parc.php" >+ gestion de parc</a></li>
	<li id="<?php echo $menu8; ?>"><a href="recup.php" >+ reprise de parc</a></li>
	<li id="<?php echo $menu9 ; ?>"><a href="login.php" >+ espace prive</a></li>
	<li id="<?php echo $menu10 ; ?>"><a href="propos.php" >+ a propos de bixos</a></li>
	<li id="<?php echo $menu11 ; ?>"><a href="contact.php" >+ contact</a></li>
</ul>
</div>


J'ai rajouté mes variable PHP qui mettent l'id de <li> a actif ou inactif et dans la feuille de style.

Qui ressemble donc a ça 


************************************************** début menu gauche*****************************/
#gauche{
 float:left;
 width: 158px;
 border:solid 1px #990000;
 margin-left:2px;
 background: url('../img/pc_bas_gauche.gif') no-repeat bottom center;
 min-height: 768px;
  height: 768px;
  color:#990000;
  background-color:white;
  }

#actif {
background: url(../img/fond_menu.png) no-repeat 0 -33px ;
}
  
#menu_gauche{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	list-style-type: none ;
  }

#menu_gauche li{
	margin: 0 0 1px 0 ;
	padding: 0 ;
	text-transform:uppercase;
	font-weight:bold;
	font-size:8pt;
	}

#menu_gauche li{
	margin: 0 0 1px 0 ;
	padding: 0 ;
	text-transform:uppercase;
	font-weight:bold;
	font-size:8pt;
	}
	
#menu_gauche  li a{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 158px ;
	line-height: 30px ;
	color: white;
	text-decoration: none ;
	background: url(../img/fond_menu.png); /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	}

#menu_gauche li a:hover{
	background: url(../img/fond_menu.png) no-repeat 0 -33px ; /* Et ici on décale l'image du background de 30px vers le haut*/
	}
	

  
/************************************************** fin menu gauche*******************************/


J'ai essayé plusieurs chose pour réussir a changer l'image de fond quand <li> id est actif mais rien n'y fait je reste coincé qqpart Smiley ohwell , pouvez vous m'aidez s'il vous plait Smiley ohwell

Le but du menu est donc que l'image du roll over du menu reste "active" quand on se trouve sur la page en question mais Smiley ohwell

Merci d'avance pour votre aide !!
J'ai lu mais j'ai bien compris le truc entre plusieurs feuille mais entre les balises je galère Smiley ohwell

Le code généré correspond à ce que j'ai besoin je pense 

<div id="gauche">       
<ul id="menu_gauche">
	<li id="actif"><a  href="../">+ accueil</a></li>

	<li id="inactif"><a href="hotline.php" >+ hotline</a></li>
	<li id="inactif"><a href="recup_donnee.php" >+ sauvegarde</a></li>
	<li id="inactif"><a href="solution_save.php" >+ bixosback</a></li>
	<li id="inactif"><a href="formation.php" >+ formation</a></li>
	<li id="inactif"><a href="location.php" >+ location</a></li>
	<li id="inactif"><a href="gestion_parc.php" >+ gestion de parc</a></li>

	<li id="inactif"><a href="recup.php" >+ reprise de parc</a></li>
	<li id="inactif"><a href="login.php" >+ espace prive</a></li>
	<li id="inactif"><a href="propos.php" >+ a propos de bixos</a></li>
	<li id="inactif"><a href="contact.php" >+ contact</a></li>
</ul>
</div>


Mais cssment parlant j'arrive pas appliquer un style différent sur les id actif Smiley ohwell
Premier problème: un identifiant doit être unique dans ta page! Lorsque tu veux attribuer une même propriété à plusieurs éléments HTML dans la même page, tu peux utiliser des classes.

Si j'ai bien compris, tu souhaites styler différement l'item actif des autres éléments de ta liste, c'est bien ça? Si c'est le cas, il me semble bien plus propre de n'appliquer un identifiant qu'à cet item actif, et de laisser les autres li bruts de toutes classes ou identifiants.

D'autre part, est-ce qu'il faut vraiment créer un lien sur l'onglet actif? Je ne pense pas. By the way, ton div "gauche" est-il réellement nécessaire? À priori, il ne devrait pas l'être...
Benjamin D.C. a écrit :
Premier problème: un identifiant doit être unique dans ta page! Lorsque tu veux attribuer une même propriété à plusieurs éléments HTML dans la même page, tu peux utiliser des classes.

Si j'ai bien compris, tu souhaites styler différement l'item actif des autres éléments de ta liste, c'est bien ça? Si c'est le cas, il me semble bien plus propre de n'appliquer un identifiant qu'à cet item actif, et de laisser les autres li bruts de toutes classes ou identifiants.

D'autre part, est-ce qu'il faut vraiment créer un lien sur l'onglet actif? Je ne pense pas. By the way, ton div "gauche" est-il réellement nécessaire? À priori, il ne devrait pas l'être...




Le liens c'est pour que IE comprenne le rollover CSS dont la balise hover ne fonctionne sous IE que sur un a:

Bon là le code html

<ul class="menu_gauche">
	<li class="actif"><a  href="../">+ accueil</a></li>
	<li><a href="hotline.php" >+ hotline</a></li>
	<li><a href="recup_donnee.php" >+ sauvegarde</a></li>
	<li><a href="solution_save.php" >+ bixosback</a></li>
	<li><a href="formation.php" >+ formation</a></li>

	<li><a href="location.php" >+ location</a></li>
	<li><a href="gestion_parc.php" >+ gestion de parc</a></li>
	<li><a href="recup.php" >+ reprise de parc</a></li>
	<li><a href="login.php" >+ espace prive</a></li>
	<li><a href="propos.php" >+ a propos de bixos</a></li>
	<li><a href="contact.php" >+ contact</a></li>

</ul>


J'ai enlevé la div gaucheet les attribut inactif et mis dans le css : 

/************************************************** début menu gauche*****************************/



  
.menu_gauche{
	margin: 0 0 0 2px;
	padding: 0 0 0 0;
	list-style-type: none ;
	float:left;
	width: 158px;
	border:solid 1px #990000;
	background: url('../img/pc_bas_gauche.gif') no-repeat bottom center;
	min-height: 768px;
	background-color:white;
  }

.menu_gauche li{
	margin: 0 0 1px 0 ;
	padding: 0 ;
	text-transform:uppercase;
	font-weight:bold;
	font-size:8pt;
	}

.menu_gauche  li a{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 158px ;
	line-height: 30px ;
	color: white;
	text-decoration: none ;
	background: url(../img/fond_menu.png); /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	}

.menu_gauche li a:hover{
	background: url(../img/fond_menu.png) no-repeat 0 -33px ; /* Et ici on décale l'image du background de 30px vers le haut*/
	}
	
.menu_gauche.actif  li{
background: url(../img/plus.gif) no-repeat 0 -33px ;
}

  
/************************************************** fin menu gauche*******************************/


Mais toujours rien Smiley ohwell Smiley bawling
Jack O'Neill a écrit :
Le liens c'est pour que IE comprenne le rollover CSS dont la balise hover ne fonctionne sous IE que sur un a:
Je ne vois pas bien ce que tu veux dire? Je disais que le lien n'était pas nécessaire sur l'onglet montrant la page active, un "hover" n'est forcémment pas nécessaire non plus sur ce même item!

Autre chose, j'ai écrit ceci:
Benjamin D.C. a écrit :
un identifiant doit être unique dans ta page! Lorsque tu veux attribuer une même propriété à plusieurs éléments HTML dans la même page, tu peux utiliser des classes.

As-tu bien compris? J'en doute, car tu as remplacé ton identifiant "actif" par une classe du même nom! Si le cœur t'en dit: Quelle est la différence entre une classe et un id ?

Pour en revenir à ton code, il y a des choses qui ne vont pas, notamment au niveau des ciblages de tes éléments html, dont ceci:

.menu_gauche.actif  li{
background: url(../img/plus.gif) no-repeat 0 -33px ;
}

Tu essayes de cibler un élément de liste qui n'existe pas! Il n'y a, dans ton code html, aucun <li> contenu dans des éléments possédant les classes que tu précises. Je crois qu'il serait bon de revoir quelques notions de base, tel que le ciblage des éléments en css.
Pour ton problème, jette un coup d'oeil à la FAQ:
Comment marquer la page en cours comme active dans le menu ?
Sujet clos
Aller à