Sujet Précédent Sujet Suivant

Menu hover

Fermé
besten Messages postés 90 Date d'inscription mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023 - 7 mai 2014 à 03:40
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 8 mai 2014 à 14:08
Bonjour,

J'aimerais mettre une image de chaque côté de mon lien initial quand on survole ce lien avec le pointeur dans mon menu. Est-ce possible ? Comment faire ?
A voir également:

4 réponses

Réponse 1 / 4
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
7 mai 2014 à 15:27
salut
oui c'est possible

exemple

<a href="page">lien</a>

a:hover {
background: url(image1.jpg) no-repet top left ,
background: url(image2.jpg) no-repet top right ;
}

ou

a:hover:before {
content:url(image1.jpg);
}

a:hover:after {
content:url(image2.jpg);
}

après tu gère la largeur width
0
Réponse 2 / 4
besten Messages postés 90 Date d'inscription mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023
7 mai 2014 à 23:10
J'ai essayé ce que tu m'as donné, mais ça ne fonctionne pas, je ne comprends pas pourquoi. Peux-tu me guider à partir de mes codes ?

Voici le code HTML : 

<div id="menu">
<ul>
 <li>
  <a href="#">Menu 1</a>
 </li>
 <li>
  <a href="#">Menu 2</a>
  <ul>
   <li>
    <a href="#">Sous Menu I</a>
   </li>
   <li>
    <a href="#">Sous Menu II</a>
   </li>
  </ul>
 </li>
 <li>
  <a href="#">Menu 3</a>
 </li>
 <li>
  <a href="#">Menu 4</a>
  <ul>
   <li>
    <a href="#">Sous Menu III</a>
   </li>
   <li>
    <a href="#">Sous Menu IV</a>
    <ul>
     <li>
      <a href="#">Sous Sous Menu A</a>
     </li>
     <li>
      <a href="#">Sous Sous Menu B</a>
     </li>
    </ul>
   </li>
  </ul>
 </li>
 <li>
  <a href="#">Menu 5</a>
 </li>
 <li>
  <a href="#">Menu 6</a>
 </li>
 <li>
  <a href="#">Menu 7</a>
 </li>
 <li>
  <a href="#">Menu 8</a>
 </li>
</ul>
</div>


Voici le code CSS 

#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
}

#menu li {
 float:left;
 margin:auto;
 padding:0;
 background-color:blue;
}

#menu li a {
 display:block;
 color:black;
 text-decoration:none;
 padding:5px;
 font-size:16px;
 line-height:15px;
 border-top: none;
 border-left: none;
}

#menu li a:hover {
 color:#FFD700;
 text-decoration: underline;
}

#menu ul li ul {
 display:none;
}

#menu ul li:hover ul {
 display:block;
}

#menu li:hover ul li {
 float:none;
}

#menu li ul {
 position:absolute;
}

#menu ul li ul li ul {
 display:none;
}

#menu ul li ul li ul li {
 display:none;
}

#menu ul li ul li:hover ul {
 display:block;
 position:absolute;
 margin:-25px 0 0 110px;
}

#menu ul li ul li:hover ul li {
 display:block;
}
0
Réponse 3 / 4
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
8 mai 2014 à 00:07
tu fais une image de 10px x 25px tu la nomme imagenav.jpg

tu la mets à la racine du site sinon tu mets le chemin vers l'image dans url(chemin/imagenav.jpg)


puis

#menu li a {
display:block;
color:black;
text-decoration:none;
padding:5px 10px;
font-size:15px;
line-height:15px;
border-top: none;
border-left: none;
}

#menu ul li a:hover {
color:#FFD700;
text-decoration: underline;
background: url(imagenav.jpg) no-repeat top left, url(imagenav.jpg) no-repeat top right;
}

ca ca marche, si ca ne marche pas le chemin vers l'image est a vérifier
0
Réponse 4 / 4
besten Messages postés 90 Date d'inscription mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023
8 mai 2014 à 01:56
Avec ce code :
#menu li a {
display:block;
color:black;
text-decoration:none;
padding:5px 10px;
font-size:16px; : j'ai remis à 16px
line-height:15px;
border-top: none;
border-left: none;
}

Ça marche ! J'ai mis une image de 25px x 25 px pour que la hauteur de l'image soit la même que la hauteur du menu.

Cependant, j'ai un autre soucis. Je voudrais agrandir la taille de la case pour ne pas avoir d'écriture sur mes images. En effet, la case du lien de mon menu reste la même et le titre de chaque menu déborde sur chacune des deux images dans chaque case. Je ne sais pas si je me fais bien comprendre...
Voici ce que j'ai quand je survole un lien de mon menu : http://servimg.com/image_preview.php?i=25&u=14069117
Alors je voudrais avoir soit un élargissement que de la case dont je survole le lien, soit agrandir toutes les cases de 2 x 25px pour ne pas avoir de problème quand je survole n'importe quel lien.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
8 mai 2014 à 14:08
Rebonjour

width défini la largeur d'un élément de type block
height definit la hauteur d'un élément de type block

va voir
https://www.zonecss.fr/proprietes-css/width-css.html#width

sur ce site il y a également toutes les propriétés css classés par ordre alphabétique que je te conseille de consulter / apprendre / comprendre.

https://www.cssdebutant.com/coder-en-css-largeur-et-hauteur.html

sur ce site on apprend les bases du css

evidemment il faut faire les tutoriels en écrivant/tapant sans faire du copier coller

car la question que tu me pose (la base) montre que tu ne fais pas beaucoup d'efforts ou de recherches pour comprendre CSS. une recherche sur google "css largeur" t'aurais donné la réponse
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses
Accéder au menu Advanced Bios PC portable HP
Axferd -
Bill -

6 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses