Un problème de background-color

Résolu

Said_de_lyon Messages postés 18 Date d'inscription Statut Membre Dernière intervention -
SweetRiver Messages postés 102 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Un problème de background-color
Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
Avis kobo clara color - Accueil - Tablettes
Color pix - Télécharger - Divers Photo & Graphisme
Background task host c'est quoi ✓ - Forum Windows
Faites afficher avec un fond coloré les cellules qui contiennent une valeur comprise entre 250 et 350. quel nombre est dessiné en surbrillance ? ✓ - Forum Excel

4 réponses

Réponse 1 / 4

bg62 Messages postés 23732 Date d'inscription Statut Modérateur Dernière intervention 2 409

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 Statut Membre Dernière intervention 2

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 23732 Date d'inscription Statut Modérateur Dernière intervention 2 409

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

par exemple ;)

SweetRiver Messages postés 102 Date d'inscription Statut Membre Dernière intervention 6

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 Statut Membre Dernière intervention 2

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 Statut Membre Dernière intervention 6

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 Statut Membre Dernière intervention 2

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 Statut Membre Dernière intervention 6

Tant mieux et non, je suis un homme.

@+

Discussions similaires

ColorSpace

Problème de colorisation sur procreate

Background color css

Color Dodge dans photoshop

Branchement d'un écran et caméra de recul sur camping-car ?

Votre réponse

Discussions similaires