28220 sujets

CSS et mise en forme, CSS3

Salut à tous,

Sur le site que je suis en train de réaliser, j'ai positionné à gauche un menu (float:left) contenu deux liste non ordonnées et chaque element des listes etant des liens. Voila à quoi ca ressemble. Il n'y a rien de plus classique

<div id="menu">
   <div id="menu_general">
    <h4>Menu général</h4>
    <ul>
     <li><a href="./index.php">Accueil</a></li>
     <li><a href="./liste_galerie.php">Galeries</a></li>
     <li><a href="./contact.php">Contact</a></li>
     <li><a href="./plan.php">Plan du site</a></li>
     <li><a href="./liens.php">Liens</a></li>
    </ul>
   </div>

   <div id="information">
    <h4>Informations</h4>
    <ul>
     <li><a href="./mentions_legales.php">Mentions légales</a></li>
     <li><a href="./infos_site.php">Le site</a></li>
    </ul>
   </div>

  </div>
  <!-- Fin du div menu -->


Voila le code css


#menu {
  float: left;
  width: 160px;
  margin-left: 8px;
  display: inline;   /** Permet de corriger le bug de doublement de marge de IE */
}

#menu_general, #information {
  background-color: white;
  border: 1px #f47a00 solid;
  margin-bottom: 24px;
}

#menu h4 {
  font-variant: small-caps;
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  background-color: #fcc462;
  color: #000000;
  font-family: Book Antiqua, time, Helvetica, Sans-Serif;
  background-image: url(../images/barreTitre.png);
  margin-bottom: 0;
}

#menu ul {
  margin-bottom: 8px;
  margin-top: 4px;
}

#menu li {
  display:inline;
}

#menu a {
  color: #707070;
  display: block;
  font-weight: bold;
  padding-left: 12px;
  border-bottom: 1px silver dotted;
  padding-top: 6px;
  font-size: 1.1em;
}

#menu_general li.sous_menu a {
  padding-left: 26px;
  font-style: italic;
}

#menu a:first-letter {
  color: #ff9900;
}

#menu a:hover {
  background-color: #fedf81;
  color: black;
}


Mon problème vient du display: block; de mes liens qui ne fonctionne pas sous IE. En effet, si vous passez la souris sur le cellule (hors lien), le background ne change pas. Or ce problème ne se présente pas si mon menu n'est pas positionné en float.

Auriez vous déjà rencontré ce problème, est-ce un bug de IE ou bien une erreur de ma part.
Je vous remercie pour votre aide.
Modifié par ymhotepa (27 Nov 2005 - 19:13)
Je viens enfin de trouver la cause de mon problème. Cela venait du fait que mes liens dans les li n'ont pas de taille. Il a suffit que je rajoute un width: 145px; dans #menu a pour que l'effet souhaité fonctionne sous IE.

Pour que ma réponse vous paraisse plus clair, voici la nouvelle feuille de style pour le menu :

/**************** Mise en forme du menu de gauche****************/
#menu {
  float: left;
  margin-left: 8px;
  display: inline;   /** Permet de corriger le bug de doublement de marge de IE */
}

#menu_general, #information {
  background-color: white;
  border: 1px #f47a00 solid;
  margin-bottom: 26px;
}

#menu h4 {
  font-variant: small-caps;
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  background-color: #fcc462;
  color: #000000;
  font-family: Book Antiqua, time, Helvetica, Sans-Serif;
  background-image: url(../images/barreTitre.png);
  margin-bottom: 0;
}

#menu a {
  color: #707070;
  display: block;
  font-weight: bold;
  font-size: 1.1em;
  padding: 4px 10px;
  width: 140px;
  border-bottom: 1px silver dotted;
}

#menu a:first-letter {
  color: #ff9900;
}

#menu a:hover {
  background-color: #fedf81;
  color: black;
}

#menu ul ul a
{
  padding: 4px 4px 4px 30px;
  width: 125px;
  font-style: italic;
}

#menu ul li a.dernier {
  border-bottom: none;
}


Juste pour finir, je recommande ce site sur la construction de listes et de menu pour tout ceux qui ne le connaissait pas.

Voila tout.
Modifié par ymhotepa (09 Oct 2005 - 22:24)
Merci beaucoup pour ton liens Laurent et ta remarque. Je vais m'y plongé pour mieux comprendre ce qu'il se passe exactement. Smiley cligne
Modifié par ymhotepa (10 Oct 2005 - 19:18)