18008 sujets

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

[Résolu] Menu vertical avec images

Bonjour!
je suis débutante et je me suis pris la tête toute la journée sur un menu, en soi pas compliqué. Il y a 3 boutons (bouton jaune, bouton vert, bouton rouge) créés avec photoshop et de différentes couleurs mais impossible de les installer les trois en même temps! je n'arrive qu'à mettre un bouton pour les trois boutons.

voici mon code, je ne sais pas si j'ai été très clair
Pleeeeeease heeeeeeeeelp je m'arrache les cheveux!!
merci 


 <ul id="navigation">
            <li id="feature"><a href="#">FEATURE</a></li>
            <li id="calendar"><a href="#">CALENDAR</a></li>
            <li id="archives"><a href="#">ARCHIVES</a></li>
        </ul>




#navigation {
    
  width: 150px;
    height: 150px;
  list-style: none;
    margin-top: 300px;
    margin-left: 200px;
    padding: 0;
    float: left;
}

#navigation li {
    color: #000000 ;
    border: 1px solid transparent ;
    margin-bottom: 1px ;
}

#navigation li a {
    display: block ;
    background: url(buttonjaune1.png) no-repeat ;
    color: #000000 ;
    font: 1em ,Arial,sans-serif ;
    font-size: 100%;
    line-height: 3em ;
    text-align: center ;
    text-decoration: none ;
    padding: 4px 0 ;
    font-weight: bold;
}


#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
  background: url(buttonjaune2.png) no-repeat ;
}

Modifié par Kaliluja (13 Feb 2017 - 00:24)
Hello,

Il faut que tu spécifies une classe pour chaque élément différent et leur appliquer les propriétés nécessaires, de cette manière :


<ul id="navigation">
  <li id="feature" class="navigation-feature"><a href="#">FEATURE</a></li>
  <li id="calendar" class="navigation-calendar"><a href="#">CALENDAR</a></li>
  <li id="archives" class="navigation-archives"><a href="#">ARCHIVES</a></li>
</ul>




#navigation li a {
  display: block ;
  color: #000000 ;
  font: 1em ,Arial,sans-serif ;
  font-size: 100%;
  line-height: 3em ;
  text-align: center ;
  text-decoration: none ;
  padding: 4px 0 ;
  font-weight: bold;

  background-repeat: no-repeat;
}

#navigation li.navigation-feature {
  background-image: url(buttonjaune1.png);
}
#navigation li.navigation-feature:hover,
#navigation li.navigation-feature:focus,
#navigation li.navigation-feature:active {
  background-image: url(buttonjaune2.png);
}

#navigation li.navigation-calendar {
  background-image: url(buttonrouge1.png);
}
#navigation li.navigation-calendar:hover,
#navigation li.navigation-calendar:focus,
#navigation li.navigation-calendar:active {
  background-image: url(buttonrouge2.png);
}

#navigation li.navigation-archives {
  background-image: url(buttonvert1.png);
}
#navigation li.navigation-archives:hover,
#navigation li.navigation-archives:focus,
#navigation li.navigation-archives:active {
  background-image: url(buttonvert2.png);
}


Attention tout de même, pour t'éviter de futurs problèmes, je te conseille vivement de te renseigner sur le poids des sélecteurs et de bannir les id pour le moment Smiley smile
Modifié par mob (13 Feb 2017 - 15:43)
Bonjour,
merci beaucoup pour cette reponse, j'ai modifié mon code comme tu me l'as indiqué mais aucune des images de fond n'apparait... je dois faire quelque chose de travers. Je remet mon code en bas, avec son positionnement dans la page
ne vaudrait il pas mieux que je créé ces boutons directement avec css?

Merci beaucoup pour le lien également, c'est un peu abstrait pour moi néanmoins très instructif!


<!DOCTYPE html>
<html>
    
    <head>
        
    <meta charset=utf-8/>
    <link rel="stylesheet" type="text/css" href="main.css"/>
        
        <title>Ina Earth</title>
    
    </head>   
    
    <body>
        
        <img id="inaearth" src="inaearthnew.jpg"/>


        <ul id="navigation">
            <li id="feature" class="navigation-feature"><a href="#">FEATURE</a></li>
            <li id="calendar" class="navigation-calendar"><a href="#">CALENDAR</a></li>
            <li id="archives" class="navigation-archives"><a href="#">ARCHIVES</a></li>
        </ul>
        
    </body>
    
</html>



body {
    background-color: white;
}

#inaearth {
    float: left;
    margin-right: 30px;
    margin-top: 10px;
    margin-left: 30px;
    margin-bottom: 10px;
    width: 50%;
    height: 30%;
}

#inaearth #navigation {
    display: inline-block;
}

#navigation {
    
  width: 150px;
    height: 150px;
  list-style: none;
    margin-top: 300px;
    margin-left: 200px;
    padding: 0;
    float: left;
}

#navigation li {
    color: #000000 ;
    border: 1px solid transparent ;
    margin-bottom: 1px ;
}

#navigation li a {
    display: block ;
    color: #000000 ;
    font: 1em ,Arial,sans-serif ;
    font-size: 100%;
    line-height: 3em ;
    text-align: center ;
    text-decoration: none ;
    padding: 4px 0 ;
    font-weight: bold;
    background-repeat: no-repeat;
}


#navigation li .navigation-feature {
    background-image: url(buttonvert1.png);
}

#navigation li .navigation-feature:hover,
#navigation li .navigation-feature:focus;
#navigation li .navigation-feature:active {
    background-image: url(buttonvert2.png);
}

#navigation li .navigation-calendar {
    background-image: url(buttonjaune1.png);
}

#navigation li .navigation-calendar:hover,
#navigation li .navigation-calendar:focus;
#navigation li .navigation-calendar:active {
    background-image: url(buttonjaune2.png);
}

#navigation li .navigation-archives {
    background-image: url(buttonrouge1.png);
}

#navigation li .navigation-archives:hover,
#navigation li .navigation-archives:focus;
#navigation li .navigation-archives:active {
    background-image: url(buttonrouge2.png);
}

Modifié par Kaliluja (13 Feb 2017 - 14:55)
Modérateur
Bonjour,

Kaliluja a écrit :
aucune des images de fond n'apparait... je dois faire quelque chose de travers.


Oui, vous rendez inopérantes vos propriétés. Par exemple ici

#navigation li .navigation-feature:hover,
#navigation li .navigation-feature:focus;
#navigation li .navigation-feature:active {
    background-image: url(buttonvert2.png);
}

La ligne finissant par le sélecteur :focus se termine par un point-virgule rendant inapplicable la propriétés pour les éléments :focus et :hover.


Kalijuja a écrit :
ne vaudrait il pas mieux que je créé ces boutons directement avec css?
Je ne sais pas ce que représente vos images, mais si possible, oui il vaudrait mieux.
J'ai édité mon post, j'ai fait une erreur, il ne devrait pas y avoir d'espace entre le li et la class .navigation-*.

De plus, comme le souligne @Greg_Lumiere, attention à ce ; qui traine.
Modifié par mob (13 Feb 2017 - 15:46)
Merci à vous deux pour votre aide précieuse. Ca marche super bien!
Effectivement, ces erreurs de ponctuation et de fermeture me pourchassent bien que j'essai d'y prêter grande attention!
Vraiment gentil de prendre le temps de vous attarder sur des codes de débutants comme moi!
Sujet clos
Aller à