Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide Recherche
1577 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS/Javascript

  CSS - Barre de menu-liens ne fonctinnent pas

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

CSS - Barre de menu-liens ne fonctinnent pas

n°1894174
juliesunse​t
Posté le 11-06-2009 à 14:52:02  profilanswer
 

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

mood
Publicité
Posté le 11-06-2009 à 14:52:02  profilanswer
 

n°1894177
pataluc
Posté le 11-06-2009 à 14:54:42  profilanswer
 

peux tu mettre ton code utilisé?

n°1894185
juliesunse​t
Posté le 11-06-2009 à 15:04:57  profilanswer
 

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>


n°1894187
juliesunse​t
Posté le 11-06-2009 à 15:06:43  profilanswer
 

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;
}

n°1894223
rotten_dan
GamerTag : RottenFleshDan
Posté le 11-06-2009 à 16:53:55  profilanswer
 

<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 rotten_dan le 11-06-2009 à 16:54:18

---------------
Profil Lastfm
n°1894225
juliesunse​t
Posté le 11-06-2009 à 17:04:39  profilanswer
 

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

n°1894226
rotten_dan
GamerTag : RottenFleshDan
Posté le 11-06-2009 à 17:12:19  profilanswer
 

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


---------------
Profil Lastfm
n°1894236
juliesunse​t
Posté le 11-06-2009 à 17:36:32  profilanswer
 

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!

n°1894240
juliesunse​t
Posté le 11-06-2009 à 17:50:51  profilanswer
 

ah ben ça marche pas finalement!

n°1894261
David Bori​ng
Posté le 11-06-2009 à 19:49:22  profilanswer
 

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

n°1894264
juliesunse​t
Posté le 11-06-2009 à 20:13:27  profilanswer
 

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

mood
Publicité
Posté le   profilanswer
 


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

  CSS - Barre de menu-liens ne fonctinnent pas

 

Sujets relatifs
Help - Menu CSS sous JoomlaPosition des liens
Besoin d'un coup de pouce en css (menu horizontal)Ne pas afficher de bouton dans la barre des tâches
Taille bouton radio Cssfonction exit et CSS
Comment est fait ce site CSS ?Menu deroulant complexe
[Resolu] [CSS] padding/margin left marche pas 
Plus de sujets relatifs à : CSS - Barre de menu-liens ne fonctinnent pas

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.212 secondes

Hit-Parade
Copyright © 1997-2012 Hardware.fr SARL / Groupe LDLC / LesNumeriques.com / Version anglaise du site: BeHardware