Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3528 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Aide menu + couleur

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Aide menu + couleur

n°2048852
Onizuka88
Posté le 13-01-2011 à 22:37:18  profilanswer
 

Chers Hardwarsiens,
 
J'essaye de réaliser un menu horizontal déroulant bien sans mal. Quelques problèmes pour le centrer mais résolu. J'essaye aujourd'hui d'appliquer une couleur différente pour chaque bouton du menu et pour le sous menu une couleur identique au menu auquel il correspond. Je pensait pouvoir l'appliquer à une balise <ul> mais cela ne fonctionne pas (possibilité de l'appliquer à chaque balise <a> mais cela me semble lourd) donc je sollicite votre aide  :)  
 
Ci joint le code de la page test
 

Citation :


<html>  
<head>  
<title>Liste 8</title>  
<style type="text/css">
 
body { text-align: center; }  
 
/*div {  
   width: 900px;  
   padding-left: 100px;  
   padding-right:auto;  
   border: 1px solid;  
} */  
 
#Menu {  
font-family: Arial, sans-serif;  
font-size : 20px; /* hauteur du texte : 20 pixels */  
height: 200px;  
border: 1px solid;  
}  
 
#Menu ul {  
margin: 0 auto; /* Aligning div horizontally */  
width:800px; /* When aligning using the method above we must set a specific width */  
list-style: none;  
padding: 0;  
line-height: 30px;  
height: 30px;  
}  
 
#Menu li {  
text-align: center;  
float: left;  
margin: 0 5px 0 5px; /* top right bottom left */  
line-height: 30px;  
width: 130px; /* Fixed width on the link, the same width as the image width */  
}  
 
#Menu li a {  
display: block;  
height: 30px;  
color: black;  
font-weight:bold;  
text-decoration: none;  
/*background-color: purple;*/  
-moz-border-radius : 10px 10px;  
}  
 
#menu li ul { /* Sous-listes */  
        position: relative;  
            top: 3px;  
        left: 10px;  
        display: none;  
        list-style: none;  
        width: 130px;  
          text-align: center;  
}  
 
#menu li ul li {  
 float: none;  
 margin: 0;  
 padding: 0;  
}  
 
#menu li ul li a {  
   display: block;  
}  
 
#menu li:hover ul {/* Sous-listes lorsque la souris passe sur un élément de liste  */  
        display: block;  
        /* min-height: 0; /* Corrige un bug sous IE */  
}  
 
#Menu li a:hover {  
background-color: #369;  
}  
 
 #Menu li a.company  
background-color: yellow;  
}  
 .product {  
background-color: blue;  
}  
.application {  
background-color: red;  
}  
.video {  
background-color: orange;  
}  
 .contact {  
background-color: green;  
}  
 
 </style>  
 
<!--[if lte IE 6]>  
<script type="text/javascript">  
<!--  
METTRE LE JAVASCRIPT EN COMMENTAIRES POUR QUE LE SCRIPT SOIT VALIDE W3C  
sfHover = function() {  
        var sfEls = document.getElementById("menu" ).getElementsByTagName("LI" );  
        for (var i=0; i<sfEls.length; i++) {  
                sfEls.onmouseover=function() {  
                        this.className+=" sfhover";  
                }  
                sfEls.onmouseout=function() {  
                        this.className=this.className.replace(new RegExp(" sfhover\\b" ), "" );  
                }  
        }  
}  
if (window.attachEvent) window.attachEvent("onload", sfHover);  
-->  
</script>  
<![endif]-->  
</head>  
 
<body>  
<div id="menu">  
<ul>  
        <li > /* définir la classe a appliquer à cette balise */  
                <a class="company"  href="#">Company</a>  
                <ul >  
                        <li><a class="company" href="#">History</a></li> /* etc mais semble lourd */  
                        <li><a href="#">Press</a></li>  
                        <li><a href="#">Autre</a></li>  
                </ul>  
        </li>  
        <li >  
                <a class="product" href="#">Products</a>  
                     <ul>  
                        <li><a href="#">Essai 1</a></li>  
                        <li><a href="#">Essai 2</a></li>  
                </ul>  
        </li>  
        <li>  
                <a class="application" href="#">Applications</a>  
  <!--              <ul>  
                        <li><a href="#">photos</a></li>  
                        <li><a href="#">vidéos</a> </li>  
                </ul>-->  
        </li>  
        <li>  
                <a class="video" href="#">Videos</a>    
<!--              <ul>  
                        <li><a href="#">Essai 1</a></li>  
                        <li><a href="#">Essai 2</a></li>  
               </ul>-->  
        </li>  
        <li> <a class="contact" href="#">Contact</a></li>  
</ul>  
</div>  
 
</body>  
 
</html>  


 
 
 
Merci smile

mood
Publicité
Posté le 13-01-2011 à 22:37:18  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Aide menu + couleur

 

Sujets relatifs
Changer la couleur d'un bouton JQuery mobileChanger la couleur d'une JFrame
besoin aide pour correction formulaire phpBesoin d'aide PHP et module [résolu]
[php] besoin d'aide pour optimiser connexion sql en objet [résolu]besoin d'aide
Besoin d'aide sur une boucle "if else if else"Aide !!
Besoin aide pour optimiser BD avec PhpMyadmin[RCH] script menu de la semaine
Plus de sujets relatifs à : Aide menu + couleur


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR