18041 sujets

Questions générales et questions de débutants

[RESOLU] Menu css : survol+page en cours (couleurs multiples)

Bonjour,
Je fais mes premières armes dans le "développement web" et me pose quelques questions, ne trouvant les réponses nulle part, je me permets de les poser ici.
Je reformule de manière plus explicite, enfin j'espère.
La question s'applique à un site réalisé en xhtml et css.
Est-il possible d'appliquer une couleur de fond différente sur chaque item (en background) en mode survol et page "en cours". J'ai réussi à faire les deux, mais pas à les combiner.
Est ce possible ou faut-il choisir entre les deux ?
D'avance je vous remercie.
Excellente soirée.
Lucie

Voici mon code : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>xxxxxx</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<link href="styleshonfleur.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="conteneur">
<div id="header">
<div id="titresite"><a href="index.html">Locations d'appartements et de studios à honfleur</a></div>
<div id="zoneheadgauche">
<div id="zoneheadphoto1"><img src="images/bandeau_photo_gauche.jpg" alt="" border="0" /></div>
<div id="zoneheadmenu">
<ul id="menupratique">
<li><a href="situation.html">Situation & accès</a></li>
<li><a href="tarifs.html">Tarifs</a></li>
<li><a href="reservations.html">Réservation</a></li>
</ul>
</div>
</div>
<div id="zoneheadphoto2"><a href="index.html"><img src="images/bandeau_photo_droite.jpg" alt="Le Bassin d'Honfleur" border="0" /></a></div>
</div>
<div id="menuprincipal">
<ul id="menulocations">
<li id="item1"><a href="appartement-renoir.html">Appartement Renoir</a></li>
<li id="item2"><a href="appartement-stecatherine.html">Appartement Ste Catherine</a></li>
<li id="item3"><a href="studio-monet.html">Studio Monet</a></li>
<li id="item4"><a href="studio-boudin.html">Studio Boudin</a></li>
<li id="item5"><a href="studio-sisley.html">Studio Sisley</a></li>
</ul>
</div>
<div id="page">
</div>
</div>

</body>
</html>


----------------------------

body
{
    margin: 10px 0;
    padding: 0;
text-align: center ;
font: 13px "Arial", helvetica, sans-serif ;
background: white ;
color:#464648;
font-size:14px;
}


div#conteneur
{
width: 1000px ;
margin: 0 auto;
position: relative;
background: url("images/fond_page.jpg") repeat-y scroll 0 0 transparent;

}


/*++++++++++++++++++++++++++++++++++++++ header +++++++++++++++*/


div#header
{
width:1000px;
height: 380px;
background:#FFFFFF;
}

div#titresite
{
    color: #646062;
    float: left;
    font-size: 23px;
    height: 32px;
    padding-top: 15px;
    text-align: left;
    text-transform: uppercase;
    width: 1000px;
}

div#titresite a
{
    color: #646062;
}

div#titresite a:hover
{
    color: silver;
}

div#zoneheadgauche
{
    height: 333px;
    width: 226px;    
	float: left;
}

div#zoneheadphoto1
{
    height: 243px;
    width: 226px;    
	float: left;
}

div#zoneheadmenu
{
    height: 89px;
    width: 226px;    
	float: left;
}

div#zoneheadphoto2
{
    float: left;
    height: 333px;
    margin-left: 2px;
    width: 772px;
}


/*-------------menu pratique ------------*/

ul#menupratique
{
    background: none repeat scroll 0 0 #777375;
    height: 87px;
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 2px;
    padding-left: 0;
    text-indent: 26px;
    width: 226px;
}

ul#menupratique li
{
text-align: left ;
}

ul#menupratique li a
{
    border-bottom: 1px solid #FFFFFF;
    color: #FFFFFF;
    display: block;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 28px;
    text-decoration: none;
    text-transform: uppercase;
    width: 226px;
}

ul#menupratique li a:hover, ul#menupratique li a:focus
{
background:#abb47f;
}


ul#menupratique #en-cours a {
background:#abb47f;
}


/*-------------menu locations ------------*/


div#menuprincipal
{
    height: 36px;
    width: 1000px;
	margin-top:15px;
}


ul#menulocations
{
    bottom: 6px;
    float: left;
    font-size: 13px;
    letter-spacing: 1px;
    list-style: none outside none;
    margin: 0 0 32px;
    padding: 0;
    right: 0;
    width: 1000px;	
	background:#777375;
}


#menulocations li {
   display:inline;
   margin:0; padding:0;
}
#menulocations li a {
background:#777375;
display:block;
float:left;
height:24px;
padding-top: 10px;
text-decoration:none;
text-transform:uppercase;
color:white;
}



#menulocations li#item1 a {
border-right:2px solid white;
width: 22%;
}

#menulocations li#item1 a:hover,
#menulocations li#item1 a:focus
{
background: #936b72;
width: 22%;


}
/*------- essais en cours menu ----*/

ul#menulocations #en-cours a {
background: silver;
}

/*-----------*/


#menulocations li#item2 a {
border-right:2px solid white;
width: 27%;
}

#menulocations li#item2 a:hover,
#menulocations li#item2 a:focus
{
background: #b4a65a;
width: 27%;
}




#menulocations li#item3 a {
border-right:2px solid white;
width: 16%;
}

#menulocations li#item3 a:hover,
#menulocations li#item3 a:focus
{
background: #588f8f;
width: 16%;
}




#menulocations li#item4 a {
border-right:2px solid white;
width: 17%;
}

#menulocations li#item4 a:hover,
#menulocations li#item4 a:focus
{
background: #4f9eb4;
width: 17%;
}




#menulocations li#item5 a {
width: 17%;
}

#menulocations li#item5 a:hover,
#menulocations li#item5 a:focus
{
background: #546a86;
width: 17%;
}

Modifié par Madiline (04 May 2011 - 19:01)
Bonjour,

Madiline a écrit :
Est-il possible d'appliquer une couleur de fond différente sur chaque item (en background) en mode survol et page "en cours".

Oui. Par exemple, si tu ajoutes une classe "current" pour l'élément du menu qui désigne la page ou la rubrique en cours, tu peux avoir des styles CSS comme suit:
#nav a {
  background: #CCC;
}
#nav .machin a:hover, #nav .machin a:focus, #nav .machin .current {
  background: red;
}
#nav .bidule a:hover, #nav .bidule a:focus, #nav .bidule .current {
  background: pink;
}
#nav .truc a:hover, #nav .truc a:focus, #nav .truc .current {
  background: lime;
}

À adapter à ton cas de figure.
Modifié par fvsch (14 Apr 2011 - 19:07)
Merci à toi pour cette réponse. Malheureusement cela ne semble pas marcher, je dois certainement mal faire la chose.
Si j'applique ta logique, cela ne colore que le lien et non le fond, et le current ne semble pas s'appliquer. Je dois ajouter le li pour le fond. Peut-être que je ne l'appelle pas de la bonne manière dans le code hml. Puis-je me permettre de te demander de m'éclairer un peu plus ?
D'avance je te remercie.
J'ai ajusté le code ainsi (soucis au niveau de "menulocations") : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>xxxxxxxx</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<link href="styleshonfleur2.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div id="conteneur">

<div id="menuprincipal">
<ul id="menulocations">
<li class="item1" "current"><a href="appartement-renoir2.html">Appartement Renoir</a></li>
<li class="item2" "current"><a href="appartement-stecatherine2.html">Appartement Ste Catherine</a></li>
<li class="item3" "current"><a href="studio-monet2.html">Studio Monet</a></li>
<li class="item4" "current"><a href="studio-boudin2.html">Studio Boudin</a></li>
<li class="item5" "current"><a href="studio-sisley2.html">Studio Sisley</a></li>
</ul>
</div>

<div id="page"> 
</div> 
</div> 
 
</body> 
</html>



Le css :

div#menuprincipal
{height: 36px;
    width: 1000px;
	margin-top:15px;}


ul#menulocations
{bottom: 6px;
    float: left;
    font-size: 13px;
    letter-spacing: 1px;
    list-style: none outside none;
    margin: 0 0 32px;
    padding: 0;
    right: 0;
    width: 1000px;	
    background:#777375;}

#menulocations li 
 {display:inline;
   margin:0; padding:0;
}
#menulocations li a {
background:#777375;
display:block;
float:left;
height:24px;
padding-top: 10px;
text-decoration:none;
text-transform:uppercase;
color:white;
}



#menulocations li.item1 a {
border-right:2px solid white;
width: 22%;
}

#menulocations li.item1 a:hover,
#menulocations li.item1 a:focus,
#menulocations li.item1 .current
{
background: #936b72;
width: 22%;
}


#menulocations li.item2 a {
border-right:2px solid white;
width: 27%;
}

#menulocations li.item2 a:hover,
#menulocations li.item2 a:focus,
#menulocations li.item2 .current
{
background: #b4a65a;
width: 27%;
}




#menulocations li.item3 a {
border-right:2px solid white;
width: 16%;
}

#menulocations li.item3 a:hover,
#menulocations li.item3 a:focus,
#menulocations li.item3 .current
{
background: #588f8f;
width: 16%;
}




#menulocations li.item4 a {
border-right:2px solid white;
width: 17%;
}

#menulocations li.item4 a:hover,
#menulocations li.item4 a:focus,
#menulocations li.item4 .current
{
background: #4f9eb4;
width: 17%;
}

#menulocations li.item5 a {
width: 17%;
}

#menulocations li.item5 a:hover,
#menulocations li.item5 a:focus,
#menulocations li.item5 .current
{
background: #546a86;
width: 17%;

body
{
    margin: 10px 0;
    padding: 0;
text-align: center ;
font: 13px "Arial", helvetica, sans-serif ;
background: white ;
color:#464648;
font-size:14px;
}


div#conteneur
{
width: 1000px ;
margin: 0 auto;
position: relative;
background: url("images/fond_page.jpg") repeat-y scroll 0 0 transparent;
}
}

Modifié par Madiline (04 May 2011 - 19:02)
Bonjour,
Je tenais à te remercier, j'ai trouvé une solution grace à ton aide. J'ai mis un peu de temps mais c'est ok maintenant !
C'était bien dans le html que ça n'allait pas! J'avais laissé en id au lieu de mettre en classe et ne pouvait donc en appeler deux élément dans le même "li". Le css était correct.
J'oublie parfois que tous les détails comptent...

J'ai fais ainsi :
<div id="menuprincipal">
<ul id="menulocations">
<li class="item1 en-cours1"><a href="appartement-renoir.html">Appartement Renoir</a></li>
<li class="item2"><a href="appartement-stecatherine.html">Appartement Ste Catherine</a></li>
<li class="item3"><a href="studio-monet.html">Studio Monet</a></li>
<li class="item4"><a href="studio-boudin.html">Studio Boudin</a></li>
<li class="item5"><a href="studio-sisley.html">Studio Sisley</a></li>
</ul>
</div>
Bonjour,
Je tenais à te remercier, j'ai trouvé une solution grace à ton aide. J'ai mis un peu de temps mais c'est ok maintenant !
C'était bien dans le html que ça n'allait pas! J'avais laissé en id au lieu de mettre en classe et ne pouvait donc en appeler deux élément dans le même "li". Le css était correct.
J'oublie parfois que tous les détails comptent...

J'ai fais ainsi :
<div id="menuprincipal">
<ul id="menulocations">
<li class="item1 en-cours1"><a href="appartement-renoir.html">Appartement Renoir</a></li>
<li class="item2"><a href="appartement-stecatherine.html">Appartement Ste Catherine</a></li>
<li class="item3"><a href="studio-monet.html">Studio Monet</a></li>
<li class="item4"><a href="studio-boudin.html">Studio Boudin</a></li>
<li class="item5"><a href="studio-sisley.html">Studio Sisley</a></li>
</ul>
</div>
Sujet clos
Aller à