28173 sujets

CSS et mise en forme, CSS3

Questions de débutant sur un menu en liste

Bonjour à tous,

Nouveau venu sur ce forum et dans le monde du CSS, je suis en train de refaire un site en XHTML et CSS avec un menu vertical...

J'ai fait le menu en XHTML sous la forme :

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>essaisite</title>
  <link rel="stylesheet" type="text/css" href="essaisite.css" media="screen" />
  
 </head>
 <body>
 
 <div id="menu">
  <ul><li><a href="../lien1.htm" title="">lien1 qui prend deux lignes de texte</a></li>
  <li><a href="../lien2.htm" title="">lien2</a></li>
  </ul>
 </div>
  </body>
 </html>


J'ai fait valider le contenu XHTML et tout est OK

Voici maintenant le CSS :


  body {
  font-family: verdana, lucida, arial, helvetica, sans-serif;
  font-size:1em;
  background-color:#ffffff;
  color:#000000;
  margin:0;
 }
 
  a {
  text-decoration:none;
 }
 
 #total {
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  width:760px;
  border-left:9px solid #ccc;
  border-right:9px solid #ccc;
  border-bottom:28px solid #9DC43C;
  margin-top:0em;
  margin-bottom:0em;
  background-color:#efefef;
  color:#000000;
 }
 
 #menu {
  width:163px;
  }
  
 #menu ul {
  padding:0;
  background-color:#B8B8C2;
  list-style-type:none;
  border-bottom:1px solid #ccc;
 }
 
 #menu li {
  background-color:#DFDFE8;
  text-align:center;
  font-weight:bold;
  font-size:0.6em;
  margin-top:0px;
  margin-bottom:1px;
  }
 
 #menu li a {
  line-height:1.5em;
  padding-left:0.5em;
  border-right:1px solid #ccc;
  border-top:1px solid #ccc;
  color:#3D4C63;
  display:block;
  text-decoration:none;
 }
 
 #menu li a:hover {
  background-color:#00FFFF;
 }


Je me pose plusieurs questions, si vous pouviez m'aider ça serait super :
- J'ai des menus qui se mettent sur 2 lignes, est-il possible de spécifier une hauteur fixe à ces menus ?
- Firefox me montre bien le rollover correctement mais Internet explorer sur certains éléments de menu ne met le rollover que sur le texte, y a-t-il moyen de corriger cela ?
- Internet explorer 6 me met une marge importante sur le coté gauche et rallonge ainsi mon menu en hauteur, comment palier à ce problème ?

Merci beaucoup pour vos réponses
Modifié par cssbegin (24 Aug 2006 - 01:58)
J'ai résolu les 2 premiers problèmes en mettant une valeur height dans le #menu li a:hover {}

Si vous avez une idée pour ma 3ème question...

Merci
Et je viens de résoudre le 3ème problème en rajoutant une valeur margin pour Internet Explorer. Smiley biggrin Smiley cligne
Modifié par cssbegin (24 Aug 2006 - 09:36)
Sujet clos
Aller à