CSS - Barre de menu-liens ne fonctinnent pas

CSS - Barre de menu-liens ne fonctinnent pas - HTML/CSS - Programmation

Marsh Posté le 11-06-2009 à 14:52:02    

Bonjour,
Je tien d'abord à souligner que je suis designer, non par programmeuse. Le codage pour moi est donc difficile à comprendre.
 
Après des recherche de plusieurs jours et avoir éplucher les tuto et tenter de comprendre un temps soi peut le langage HTML dans le but de crée une barre de menu en CSS, j'ai finalement réussi à pondre quelque chose qui corresponde à ce que je voulais.
 
Seulement voilà, lorsque j'ajoute un lien sur mes images (qui composent ma barre de menu), rien ne se passe.
 
Dois-je ajouter du texte sur les boutons? Dans ce cas, comment faire pour que le texte soi invisible et qu'on ne voit que l'image? Est-ce une balise en particulier? Ou alors je suis complètement dans le champs!
 
Merci d'avance pour votre aide!
Julie

Reply

Marsh Posté le 11-06-2009 à 14:52:02   

Reply

Marsh Posté le 11-06-2009 à 14:54:42    

peux tu mettre ton code utilisé?

Reply

Marsh Posté le 11-06-2009 à 15:04:57    

voilà
 
Mon code source, du moins la partie concerné:

Citation :

<div id="head"></div>
          <div id="menu">
            <ul class="niveau1">
              <li class="accueil"><a href="../2010/FR/accueil.html"></a></li>
              <li class="produits">
                <ul class="niveau2">
                  <li class="sousmenu-produits01"><a href="../2010/Sous menu 2.1"></a></li>
                  <li class="sousmenu-produits02"><a href="../2010/Sous menu 2.2"></a></li>
                  <li class="sousmenu-produits03"><a href="../2010/Sous menu 2.2"></a></li>
                </ul>
              </li>
              <li class="photos-videos">
                <ul class="niveau2">
                  <li class="sousmenu-photos-videos01"><a href="../2010/Sous menu 3.1"></a></li>
                  <li class="sousmenu-photos-videos02"><a href="../2010/Sous menu 3.2"></a>
                    <ul class="niveau3">
                      <li class="sousmenu-modeles2008-01"><a href="../2010/Sous sous menu 3.2.1"></a></li>
                      <li class="sousmenu-modeles2008-02"><a href="../2010/Sous sous menu 3.2.2"></a></li>
                      <li class="sousmenu-modeles2008-03"><a href="../2010/Sous sous menu 3.2.3"></a></li>
                    </ul>
                  </li>
                  <li class="sousmenu-photos-videos03">
                    <ul class="niveau3">
                      <li class="sousmenu-modeles2009-01"><a href="../2010/Sous sous menu 3.3.1"></a></li>
                      <li class="sousmenu-modeles2009-02"><a href="../2010/FR/PhotosVideosIRA-2009_FR.html"></a></li>
                      <li class="sousmenu-modeles2009-03"><a href="../2010/Sous sous menu 3.3.3"></a></li>
                      <li class="sousmenu-modeles2009-04"><a href="../2010/Sous sous menu 3.3.4"></a></li>
                      <li class="sousmenu-modeles2009-05"><a href="../2010/Sous sous menu 3.3.5"></a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="distributeurs">
                <ul class="niveau2">
                  <li class="sousmenu-distributeurs01">
                    <ul class="niveau3">
                      <li class="sousmenu-detaillantSous_01"><a href="../2010/Sous sous menu 4.1.1"></a></li>
                      <li class="sousmenu-detaillantSous_02"><a href="../2010/Sous sous menu 4.1.2"></a></li>
                      <li class="sousmenu-detaillantSous_03"><a href="../2010/Sous sous menu 4.1.3"></a></li>
                      <li class="sousmenu-detaillantSous_04"><a href="../2010/Sous sous menu 4.1.4"></a></li>
                      <li class="sousmenu-detaillantSous_05"><a href="../2010/Sous sous menu 4.1.5"></a></li>
                    </ul>
                  </li>
                  <li class="sousmenu-distributeurs02"><a href="../2010/Sous menu 4.2"></a></li>
                </ul>
              </li>
              <li class="commande">
                <ul class="niveau2">
                  <li class="sousmenu-commande01"><a href="../2010/Sous menu 5.1"></a></li>
                  <li class="sousmenu-commande02"><a href="../2010/Sous menu 5.2"></a></li>
                </ul>
              </li>
              <li class="support">
                <ul class="niveau2">
                  <li class="sousmenu-support01"><a href="../2010/Sous menu 6.1"></a></li>
                  <li class="sousmenu-support02"><a href="../2010/Sous menu 6.2"></a></li>
                  <li class="sousmenu-support03"><a href="../2010/Sous menu 6.2"></a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>


Reply

Marsh Posté le 11-06-2009 à 15:06:43    

et puis mon CSS:

Citation :


body{
 background-color:#000;
}
div#head{
 background-image:url(../interface/essaie4/images/Site2010-01.png);
 height:137px;
 width:928px;
}
 
div#menu{
 width: 928px;
 cursor:pointer;
}
div#menu ul{
 padding:0;
 margin:0;
 width: auto;
 display:block;
 float:left;
}
div#menu ul li.accueil{
 position:relative;
 list-style: none;
 background-image:url(../interface/essaie4/images/Site2010-02.png);
 height:32px;
 width:106px;
 float:left;
}
div#menu ul li.accueil:hover{
 position:relative;
 list-style: none;
 background-image:url(../interface/essaie4/images/Site2010-over02.png);
 height:32px;
 width:106px;
 float:left;
}
 
 
div#menu ul li.produits{
 position:relative;
 list-style: none;
 background-image:url(../interface/essaie4/images/Site2010-03.png);
 height:32px;
 width:110px;
 float:left;
}
div#menu ul li.produits:hover{
 position:relative;
 list-style: none;
 background-image:url(../interface/essaie4/images/Site2010-over03.png);
 height:32px;
 width:110px;
 float:left;
}
div#menu li.sousmenu-produits01{
 background-image:url(../interface/essaie4/images/sous-menu/ProduitsSous_01.png);
 height:25px;
 width:189px;
 display:block;
 position: absolute;
 top: 31px;
}
div#menu li.sousmenu-produits01:hover{
 background-image:url(../interface/essaie4/images/sous-menu/ProduitsSous-over01.png);
 height:25px;
 width:189px;
}
div#menu li.sousmenu-produits02{
 background-image:url(../interface/essaie4/images/sous-menu/ProduitsSous_02.png);
 height:24px;
 width:189px;
 display:block;
 position: absolute;
 top: 56px;
}
div#menu li.sousmenu-produits02:hover{
 background-image:url(../interface/essaie4/images/sous-menu/ProduitsSous-over02.png);
 height:24px;
 width:189px;
}
div#menu li.sousmenu-produits03{
 background-image:url(../interface/essaie4/images/sous-menu/ProduitsSous_03.png);
 height:25px;
 width:189px;
 display:block;
 position: absolute;
 top: 80px;
}
div#menu li.sousmenu-produits03:hover{
 background-image:url(../interface/essaie4/images/sous-menu/ProduitsSous-over03.png);
 height:25px;
 width:189px;
}
 
 
div#menu ul li.photos-videos{
 position:relative;
 list-style: none;
 background-image:url(../interface/essaie4/images/Site2010-04.png);
 height:32px;
 width:179px;
 float:left;
}
div#menu ul li.photos-videos:hover{
 position:relative;
 list-style: none;
 background-image:url(../interface/essaie4/images/Site2010-over04.png);
 height:32px;
 width:179px;
 float:left;
}
div#menu li.sousmenu-photos-videos01{
 background-image:url(../interface/essaie4/images/sous-menu/PhotosVideos-FR-Sous_01.png);
 height:27px;
 width:124px;
 display:block;
 position: absolute;
 top: 31px;
}
div#menu li.sousmenu-photos-videos01:hover{
 background-image:url(../interface/essaie4/images/sous-menu/PhotosVideos-FR-Sous-over01.png);
 height:27px;
 width:124px;
}
 
div#menu li.sousmenu-photos-videos02{
 background-image:url(../interface/essaie4/images/sous-menu/PhotosVideos-Fr-Sous_02.png);
 height:25px;
 width:124px;
 display:block;
 position: absolute;
 top: 57px;
}
div#menu li.sousmenu-photos-videos02:hover{
 background-image:url(../interface/essaie4/images/sous-menu/PhotosVideos-Fr-Sous-over02.png);
 height:25px;
 width:124px;
}
div#menu li.sousmenu-modeles2008-01{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2008sous_01.png);
 height:26px;
 width:93px;
 display:block;
 position: absolute;
 top: 0px;
 left: 122px;
}
div#menu li.sousmenu-modeles2008-01:hover{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2008sous-over01.png);
 height:26px;
 width:93px;
}
div#menu li.sousmenu-modeles2008-02{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2008sous_02.png);
 height:23px;
 width:93px;
 display:block;
 position: absolute;
 top: 24px;
 left: 122px;
}
div#menu li.sousmenu-modeles2008-02:hover{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2008sous-over02.png);
 height:23px;
 width:93px;
}
div#menu li.sousmenu-modeles2008-03{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2008sous_03.png);
 height:26px;
 width:93px;
 display:block;
 position: absolute;
 top: 47px;
 left: 122px;
}
div#menu li.sousmenu-modeles2008-03:hover{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2008sous-over03.png);
 height:26px;
 width:93px;
}
 
div#menu li.sousmenu-photos-videos03{
 background-image:url(../interface/essaie4/images/sous-menu/PhotosVideos-Fr-Sous_03.png);
 height:28px;
 width:124px;
 display:block;
 position: absolute;
 top: 82px;
}
div#menu li.sousmenu-photos-videos03:hover{
 background-image:url(../interface/essaie4/images/sous-menu/PhotosVideos-Fr-Sous-over03.png);
 height:28px;
 width:124px;
}
div#menu li.sousmenu-modeles2009-01{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2009sous_01.png);
 height:24px;
 width:93px;
 display:block;
 position: absolute;
 top: 0px;
 left: 122px;
}
div#menu li.sousmenu-modeles2009-01:hover{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2009sous-over01.png);
 height:24px;
 width:93px;
}
div#menu li.sousmenu-modeles2009-02{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2009sous_02.png);
 height:24px;
 width:93px;
 display:block;
 position: absolute;
 top: 24px;
 left: 122px;
}
div#menu li.sousmenu-modeles2009-02:hover{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2009sous-over02.png);
 height:24px;
 width:93px;
}
div#menu li.sousmenu-modeles2009-03{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2009sous_03.png);
 height:25px;
 width:93px;
 display:block;
 position: absolute;
 top: 48px;
 left: 122px;
}
div#menu li.sousmenu-modeles2009-03:hover{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2009sous-over03.png);
 height:25px;
 width:93px;
}
div#menu li.sousmenu-modeles2009-04{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2009sous_04.png);
 height:24px;
 width:93px;
 display:block;
 position: absolute;
 top: 72px;
 left: 122px;
}
div#menu li.sousmenu-modeles2009-04:hover{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2009sous-over04.png);
 height:24px;
 width:93px;
}
div#menu li.sousmenu-modeles2009-05{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2009sous_05.png);
 height:24px;
 width:93px;
 display:block;
 position: absolute;
 top: 96px;
 left: 122px;
}
div#menu li.sousmenu-modeles2009-05:hover{
 background-image:url(../interface/essaie4/images/sous-menu/Modele2009sous-over05.png);
 height:24px;
 width:93px;
}
 
 
div#menu ul li.distributeurs{
 position:relative;
 list-style: none;
 background-image:url(../interface/essaie4/images/Site2010-05.png);
 height:32px;
 width:148px;
 float:left;
}
div#menu ul li.distributeurs:hover{
 position:relative;
 list-style: none;
 background-image:url(../interface/essaie4/images/Site2010-over05.png);
 height:32px;
 width:148px;
 float:left;
}
div#menu li.sousmenu-distributeurs01{
 background-image:url(../interface/essaie4/images/sous-menu/DistributeursSous_01.png);
 height:26px;
 width:206px;
 display:block;
 position: absolute;
 top: 31px;
}
div#menu li.sousmenu-distributeurs01:hover{
 background-image:url(../interface/essaie4/images/sous-menu/DistributeursSous-over01.png);
 height:26px;
 width:206px;
}
div#menu li.sousmenu-detaillantSous_01{
 background-image:url(../interface/essaie4/images/sous-menu/DetaillantSous_01.png);
 height:24px;
 width:98px;
 display:block;
 position: absolute;
 top: 0px;
 left: 205px;
}
div#menu li.sousmenu-detaillantSous_01:hover{
 background-image:url(../interface/essaie4/images/sous-menu/DetaillantSous-over01.png);
 height:24px;
 width:98px;
}
div#menu li.sousmenu-detaillantSous_02{
 background-image:url(../interface/essaie4/images/sous-menu/DetaillantSous_02.png);
 height:24px;
 width:98px;
 display:block;
 position: absolute;
 top: 24px;
 left: 205px;
}
div#menu li.sousmenu-detaillantSous_02:hover{
 background-image:url(../interface/essaie4/images/sous-menu/DetaillantSous-over02.png);
 height:24px;
 width:98px;
}
div#menu li.sousmenu-detaillantSous_03{
 background-image:url(../interface/essaie4/images/sous-menu/DetaillantSous_03.png);
 height:24px;
 width:98px;
 display:block;
 position: absolute;
 top: 48px;
 left: 205px;
}
div#menu li.sousmenu-detaillantSous_03:hover{
 background-image:url(../interface/essaie4/images/sous-menu/DetaillantSous-over03.png);
 height:24px;
 width:98px;
}
div#menu li.sousmenu-detaillantSous_04{
 background-image:url(../interface/essaie4/images/sous-menu/DetaillantSous_04.png);
 height:24px;
 width:98px;
 display:block;
 position: absolute;
 top: 72px;
 left: 205px;
}
div#menu li.sousmenu-detaillantSous_04:hover{
 background-image:url(../interface/essaie4/images/sous-menu/DetaillantSous-over04.png);
 height:24px;
 width:98px;
}
div#menu li.sousmenu-detaillantSous_05{
 background-image:url(../interface/essaie4/images/sous-menu/DetaillantSous_05.png);
 height:24px;
 width:98px;
 display:block;
 position: absolute;
 top: 96px;
 left: 205px;
}
div#menu li.sousmenu-detaillantSous_05:hover{
 background-image:url(../interface/essaie4/images/sous-menu/DetaillantSous-over05.png);
 height:24px;
 width:98px;
}
 
div#menu li.sousmenu-distributeurs02{
 background-image:url(../interface/essaie4/images/sous-menu/DistributeursSous_02.png);
 height:25px;
 width:206px;
 display:block;
 position: absolute;
 top: 57px;
}
div#menu li.sousmenu-distributeurs02:hover{
 background-image:url(../interface/essaie4/images/sous-menu/DistributeursSous-over02.png);
 height:25px;
 width:206px;
}
 
 
div#menu ul li.commande{
 position:relative;
 list-style: none;
 background-image:url(../interface/essaie4/images/Site2010-06.png);
 height:32px;
 width:187px;
 float:left;
}
div#menu ul li.commande:hover{
 position:relative;
 list-style: none;
 background-image:url(../interface/essaie4/images/Site2010-over06.png);
 height:32px;
 width:187px;
 float:left;
}
div#menu li.sousmenu-commande01{
 background-image:url(../interface/essaie4/images/sous-menu/CommandeSous_01.png);
 height:26px;
 width:103px;
 display:block;
 position: absolute;
 top: 31px;
}
div#menu li.sousmenu-commande01:hover{
 background-image:url(../interface/essaie4/images/sous-menu/CommandeSous-over01.png);
 height:26px;
 width:103px;
}
div#menu li.sousmenu-commande02{
 background-image:url(../interface/essaie4/images/sous-menu/CommandeSous_02.png);
 height:25px;
 width:103px;
 display:block;
 position: absolute;
 top: 57px;
}
div#menu li.sousmenu-commande02:hover{
 background-image:url(../interface/essaie4/images/sous-menu/CommandeSous-over02.png);
 height:25px;
 width:103px;
}
 
 
div#menu ul li.support{
 position:relative;
 list-style: none;
 background-image:url(../interface/essaie4/images/Site2010-07.png);
 height:32px;
 width:198px;
 float:left;
}
div#menu ul li.support:hover{
 position:relative;
 list-style: none;
 background-image:url(../interface/essaie4/images/Site2010-over07.png);
 height:32px;
 width:198px;
 float:left;
}
div#menu li.sousmenu-support01{
 background-image:url(../interface/essaie4/images/sous-menu/Support-FR-Sous_01.png);
 height:27px;
 width:103px;
 display:block;
 position: absolute;
 top: 31px;
}
div#menu li.sousmenu-support01:hover{
 background-image:url(../interface/essaie4/images/sous-menu/Support-FR-Sous-over01.png);
 height:27px;
 width:103px;
}
div#menu li.sousmenu-support02{
 background-image:url(../interface/essaie4/images/sous-menu/Support-FR-Sous_02.png);
 height:25px;
 width:103px;
 display:block;
 position: absolute;
 top: 57px;
}
div#menu li.sousmenu-support02:hover{
 background-image:url(../interface/essaie4/images/sous-menu/Support-FR-Sous-over02.png);
 height:25px;
 width:103px;
}
div#menu li.sousmenu-support03{
 background-image:url(../interface/essaie4/images/sous-menu/Support-FR-Sous_03.png);
 height:26px;
 width:103px;
 display:block;
 position: absolute;
 top: 82px;
}
div#menu li.sousmenu-support03:hover{
 background-image:url(../interface/essaie4/images/sous-menu/Support-FR-Sous-over03.png);
 height:26px;
 width:103px;
}
 
 
div#menu ul ul{
 display:none;
}  
div#menu ul ul ul{
 display:none;
}
 
 
div#menu ul.niveau1 li:hover ul.niveau2{
 display:block;
}
div#menu ul.niveau2 li:hover ul.niveau3{
 display:block;
}

Reply

Marsh Posté le 11-06-2009 à 16:53:55    

<a href="../2010/Sous sous menu 4.1.4"></a>
Il faut du texte ou une image entre la Balise <a ..></a>, c'est ce qui est affiché
et jce qui est dans la balise a href= est l'url de destination du menu
 
Ca devrait plutot etre <a href="../2010/destination.html">Sous Sous menu 4.1.4</a>


Message édité par Profil supprimé le 11-06-2009 à 16:54:18
Reply

Marsh Posté le 11-06-2009 à 17:04:39    

c'est bien ce que j'avais cru comprendre... cependant y a-t-il un moyen de faire en sorte que le texte n'apparaissent pas? de manière à laisser la place à mes images qui sont en fait des boutons

Reply

Marsh Posté le 11-06-2009 à 17:12:19    

il suffit de seulement mettre l'image entre les balise a
<a href="../2010/destination.html"><img src="mon_fichier_image.gif"></a>

Reply

Marsh Posté le 11-06-2009 à 17:36:32    

c'est que mes images sont dans mon CSS...
 
J'ai continué à "zigonner" un peu de mon côté, je crois avoir trouvé une solution.
Dans mon code source j'ajoute le nom du bouton en texte. Puis dans mon CSS j'ajoute ceci:
 
#menu .niveau1 .accueil a {
 display: none;
}
 
Et ça semble fonctionné.
Ça va être à faire pour chaque bouton je crois!

Reply

Marsh Posté le 11-06-2009 à 17:50:51    

ah ben ça marche pas finalement!

Reply

Marsh Posté le 11-06-2009 à 19:49:22    

Tes liens doivent en display block, au dimension de ta background-image. Et ensuite, différentes solutions existent pour cacher le texte  
http://stopdesign.com/archive/2003 [...] -text.html

Reply

Marsh Posté le 11-06-2009 à 19:49:22   

Reply

Marsh Posté le 11-06-2009 à 20:13:27    

Merci, j'y jette un coup d'oeil!

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed