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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  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
Profil sup​primé
Posté le 11-06-2009 à 16:53:55  answer
 

<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
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
Profil sup​primé
Posté le 11-06-2009 à 17:12:19  answer
 

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

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

mood
Publicité
Posté le 11-06-2009 à 19:49:22  profilanswer
 

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

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


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

  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.048 secondes

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