Un problème de background-color

Résolu/Fermé

Said_de_lyon Messages postés 18 Date d'inscription lundi 18 février 2013 Statut Membre Dernière intervention 29 août 2015 - Modifié par pijaku le 3/01/2014 à 08:43
SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 - 8 juin 2013 à 10:46

Bonjour,

J'essai une forme de menu déroulant sur mon site web que j'ai mis en ligne.
Pour info c'est : liregratuit.fr
Mon problème :
Dans ce bout de code et de CSS avec un peu de javascript, j'aimerais que vous me disiez pourquoi le background-color et son hover ne marche correctement qu'avec le premier élément du menu horizontal et se décale avec les autres élément du menu.

Voici mon code :

<!DOCTYPE html>
<html>
<head>
<title>Essai Menu</title>
    <meta charset=iso-8859-1>
    <style>
 #menu  {
  list-style-type:none;
  position:fixed;
  padding-left:0px;
  font-size:20px;
  background-color:#9FF;
  color:#006;
  border:#C0F solid 2px;
  margin-top:15px;
  margin-left:10%;
  height:32px;
  text-align:left;
  font-family:Arial, Helvetica, sans-serif;
 }
 #liste  {
  display:inline-block;
  padding-left:0px;
  background-color:#9FF;
  border-right:#C0F 2px solid;
  width:160px;
  height:32px;
 }
 #sous-liste  {
  margin-left:-47px;
  padding-left:0px;
  background-color:#9FF;
  text-align:left;
  width:160px;
  border:#C0F 2px solid;
 }
 #liste-sous-menu  {
  visibility:hidden;
  background-color:#9FF;
  position:absolute;
  list-style-type:none;
 }
 
 #menu a, #liste a, #block a, #sous-liste a, #liste_sous_1{
  display:block;
  text-decoration:none;
  padding-left:0px;
  background-color:#9FF;
  width:160px;
  height:32px;
  font-family:Arial, Helvetica, sans-serif;
  font-style:normal;
 }
 #liste a:hover, #liste-sous-menu:hover, #sous-liste a:hover, #liste_sous_1:hover {
  color:#FF0;
  background-color:#CCF;
  font-style:italic;
 }
 </style>
</head>
<body>
<ul id="menu">
  <li id="liste" onMouseOver="document.getElementById('liste-sous-menu').style.visibility='hidden'" ><a href="#"
   >Présentation</a>
  </li>
        <li id="liste" onMouseOver="document.getElementById('liste-sous-menu').style.visibility='hidden'"><a href="#" 
              >Mon CV</a>
        </li>
  <li id="liste" onMouseOver="document.getElementById('liste-sous-menu').style.visibility='hidden'" ><a href="#" 
         >Mes livres</a>
  </li>
        <li id="liste" onMouseOver="document.getElementById('liste-sous-menu').style.visibility='visible'">
         <span id="liste_sous_1">Formulaires</span>
            <ul id="liste-sous-menu">
    <li id="sous-liste"><a href="#" 
   >Se connecter</a>
    </li>
             <li id="sous-liste"><a href="#" 
    >Se déconnecter</a>
    </li>         
            <li id="sous-liste"><a href="#" 
   >S'inscrire</a>
    </li>
             </ul>
        </li>
  <li id="liste" onMouseOver="document.getElementById('liste-sous-menu').style.visibility='hidden'"  ><a href="#" 
   >Liste des inscrits</a>
  </li>
  <li id="liste" onMouseOver="document.getElementById('liste-sous-menu').style.visibility='hidden'" ><a href="#" 
   >Statistiques</a>
  </li>
</ul>
</body>
</html>

----------------------------------
MERCI POUR VOTRE AIDE

A voir également:

Un problème de background-color
Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
Just color picker - Télécharger - Divers Photo & Graphisme
Tft lcd color monitor installation en français ✓ - Forum Caméra
Faites afficher avec un fond coloré les cellules qui contiennent une valeur comprise entre 250 et 350. quel nombre est dessiné en surbrillance ? - Forum VB / VBA
Background remover - Télécharger - Montage photo

4 réponses

Réponse 1 / 4

bg62 Messages postés 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024 2 388
6 juin 2013 à 18:23

place la feuille de style à part et appelle-là ensuite depuis le fichier .html ...

Réponse 2 / 4

Said_de_lyon Messages postés 18 Date d'inscription lundi 18 février 2013 Statut Membre Dernière intervention 29 août 2015 2
6 juin 2013 à 18:54

Je m'en doutais un peu, mais le fait de mettre le style dans une feuille de style externe ne change rien.
Le problème c'est le hover par un background-color qui ne remplit que la case du premier élément de la liste mais pour les autres éléments. Il y a un petit décalage dans le remplissage, et ça ne fait pas net.
N'auriez-vous pas une autre solution pour que je puisse remédier à ce petit contre-temps

bg62 Messages postés 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024 2 388
6 juin 2013 à 19:55

body {
	font-family: arial, helvetica, sans-serif;
	background-color: #D8CCC0;
	color: #444;
}

par exemple ;)

SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 6
Modifié par SweetRiver le 6/06/2013 à 20:17

Bonjour,

Pour ma part, je ne vois rien d'anormal mais tu as peut-être déjà résolu le pb Saïd ?

@+

Réponse 3 / 4

Said_de_lyon Messages postés 18 Date d'inscription lundi 18 février 2013 Statut Membre Dernière intervention 29 août 2015 2
6 juin 2013 à 20:41

Hé ben non, je sais vraiment pas comment faire !
J'attends encore de l'aide.
Vous pouvez copier-coller le bout de code dans un éditeur de texte et le lancer à partir de l'explorateur de fichier de votre système d'exploitation en cliquant sur le fichier que vous aurez enregistrer.
Ainsi vous pourrez voir ce qui ne va pas, ce qui ne fait pas très net.
Ce que je ne comprends pas, c'est qu'il n'y a pas vraiment de problème dans le sous-menu déroulant avec le background du hover, et il y a un décalage du hover dans le background. La première case (<li>) est entièrement remplie, mais pas les autres.

La solution :
Abandonner le hover du background-color, et ne laisser que le hover du texte (color).
Ca fait moins jolie, mais au moins c'est net.

SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 6
6 juin 2013 à 23:08

Bonsoir,

Je te mets une partie du code modifiée (pour éviter d'alourdir ton sujet) avec des repères.
Essaie et dis-moi...

#liste {
display:inline-block;
padding-left:0px;
background-color:#9FF;
border-right:#C0F 2px solid;
width:160px;
height:32px;
float:left; /* ICI */
}
#sous-liste {
margin-left:-42px; /* ICI */
padding-left:0px;
background-color:#9FF;
text-align:left;
width:160px;
border:#C0F 2px solid;
}

Réponse 4 / 4

Said_de_lyon Messages postés 18 Date d'inscription lundi 18 février 2013 Statut Membre Dernière intervention 29 août 2015 2
Modifié par pijaku le 3/01/2014 à 08:44

Merci SweetRiver,
Ca marche à la perfection,
J'avais penser au float, mais je ne l'ai pas utilisé.

Comment t'appelle-tu vraiment ?
SweetRiver, traduit de l'anglais rivière douce. Tu ne serais pas une femme.
De toute manière que tu soit une femme ou pas, j'aimerais que l'on reste en contact.
Mon adresse mail : adresse mail supprimée par la modération
A bientôt sur le net...

SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 6
8 juin 2013 à 10:46

Tant mieux et non, je suis un homme.

@+

Discussions similaires

Problème de colorisation sur procreate

ColorSpace

Task host windows, c'est quoi ?

Color Dodge dans photoshop

Game boy Color - Notice d'utilisation