menu déroulant ne fonctionne pas sous IE6
Hors ligneVerso Le 03/10/2010 à 18:51 Profil de Verso Configuration de Verso

Bonjour,

 

Voilà un moment que je ne suis pas venue solliciter votre savoir !

 

Je refais notre site et j'y est inclus un menu déroulant à partir de script trouvé sur le net et modifié

en fonction de mon apprentissage du XHTML et du CSS.

Seulement voilà il ne fonctionne pas sous IE6 (sous IE 8 oui)

 

Voici mon code css :

/* Fichier css du site de Recto-Verso nommé : Recto-Verso-3.css */
/* ---------------------------------------------------------- */


body {
    width:800px;
    color: #FFFF00;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 115%;
    background-color: #0033FF;
    background-repeat: no-repeat;
    margin-left: 0%;
    margin-right: 0%;
    margin-top: 0%;
    margin-bottom: 0%;
}

#menu                           /*-----pour le menu horizontal-------*/
{
width:800px;            /* donner une largeur au menu, prendre en compte les marges */
height: auto;           /* important pour IE7, hauteur auto sinon pas de menu deroulant */
list-style-type: none;  /* pas de puce */
margin: 0 auto;         /* marge auto pour centrer le menu dans l'élément */
padding: 0;             /* marge interne à 0 */
border: 0;              /* bordure à 0 */

}
#menu > li                      /*------uniquement pour la liste de premier niveau-------*/
{
float: left;           /* permet de mettre les items <li> horizontalement */
width: 150px;          /* je donne une largeur aux cellules */
margin: 2px;           /* j'espace les cellules de 2px */
padding: 0;            /* pas de marge interne */
border: 0;             /* pa de bordure exterieure */
}

#menu li a                      /*------pour les liens de premier niveau-------*/
{
display: block;              /* pour mettre mes liens en block */
color: #FFFFFF;              /* donne une couleur à la police */
font-size: 70%;                 /* donne une taille à la police */
text-align: center;             /* donne un alignement à la police */
background-color: #0033FF;   /* fond */
margin: 0;                   /* pas de marge externe */
padding: 0px 0px;            /* pas de marge interne */
border:1px solid #0033FF;    /* une bordure extérieur */
text-decoration: none;       /* pas de décoration pour les liens */
}    

#menu li a:hover {               /*------une couleur de fond au survol sur les liens--------*/
background-color: #0066FF;   /* fond */

}

/*------------------------fin du menu de premier niveau------------------------------------------*/

#menu .menuderoulant              /*----pour mon menu déroulant-------*/
{
display: none;          /* pour le faire disparaitre */
list-style-type: none;  /* pas de puce */
margin: 0;              /* pas de marge externe */
padding: 0;             /* pas de marge interne */
border: 0;              /* pas de bordure externe */
position: absolute;     /* Position absolue */

}
#menu .menuderoulant li           /*-------pour ma liste de deuxième niveau-------*/
{
margin: 0;                          /* pas de marge externe */
padding: 0;                         /* pas de marge interne */
border: 0;                          /* pas de bordure externe */
width: 150px;                       /* largeur des cellules de sous menu */
border-top: 1px solid #0033FF;      /* des bordures couleur du fond pour espacer les cellules */
border-right: 1px solid #0033FF;    /* des bordures couleur du fond pour espacer les cellules */
}

#menu .menuderoulant li a         /*---------pour mes liens du menu deroulant---------*/
{
display: block;                /* Pour mettre les liens en bloc */
color: #FFFFFF;                /* couleur du texte */
margin: 0;                     /* pas de marge externe */
border: 0;                     /* pas de bordure externe */
text-decoration: none;         /* pas de décoration pour mes liens */
background-color: #0033CC;     /* couleur du fond des cellules */


}
#menu .menuderoulant li a:hover    /*------pour le survol du sous menu-------*/
{
background-color: #0066FF;      /* couleur du fond des cellules */
}

#menu .menuderoulant li a:visited  /*---------Savoir les liens déjà visités--------*/
{   
background-color: #9933CC;      /* couleur du fond des cellules déjà visitées*/
}

#menu li:hover > .menuderoulant { /*--- appararition du sous menu au survol du 1er menu ---*/
display: block;
}    

/*--------------------------------fin du menu de second niveau-----------------------------------*/

h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 140%;
    color: #FFFF00;
}

h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 125%;
    color: #FFFF00;    
}

h3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 80%;
    color: #FFFF00;    
    line-height: 1;
}

h4 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 70%;
    font-weight: normal;
    font-style: italic;
    color: #FFFF00;    
}

h5 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 65%;
    font-weight: normal;
    color: #FFFF00;    
}

h6 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 120%;
    font-weight: normal;
    color: #FFFF00;
}



a:link, a:visited, a:hover {
    color: #FFFF00;
    text-decoration: none;
}

a:visited {
    text-decoration: none;
    color: #FFFF00;
}
a:hover {
    text-decoration: underline;
    color: #FFFF00;
}
a:active {
    text-decoration: none;
    color: #FFFF00;
}


pre {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 105%;
    font-weight: normal;
    font-style: italic;
    color: #00CCFF;
}

infos{
    color: #FFFF00;
    font-family: Arial, sans-serif;
    font-size: 130%;
    font-weight: bold;
}

bas {
    color: #FFFF00;
    font-family: Arial, sans-serif;
    font-size: 60%;
    font-style: italic;            
Voici  mon code xhtml :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Anniversaire d'enfants</title>
<link rel="stylesheet" href="Recto-Verso.css" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" title="Design_Recto-Verso" type="text/css" href="Recto-Verso-3.css" />
</head>
<body>
     <a name="haut"></a>
     <table width="800" border="0">
    <tr><th width="50" scope="col">&nbsp;</th>
    <td width="100"><img src="Nos photos/Recto.jpg" width="100" height="123" border="0" name="Image1" alt="Recto" title="Recto" /></td>
    <td width="50"></td>
    <td width="400"><a href="index.htm"><img src="Nos photos/les_clowns_RV.jpg" alt="vers accueil" title="vers accueil" border="0" /></a></td>
    <th width="50" scope="col">&nbsp;</th>
    <th width="100" scope="col"><img src="Nos photos/Verso.jpg" width="100" height="112" border="0" name="Image2" alt="Verso" title="Verso"/></th>
    <th width="50" scope="col">&nbsp;</th>
    </tr>
</table>
      <img src="Nos photos/bouton3.jpg" alt="S&eacute;paration" width="800" height="20" />
<ul id="menu">
<li>
<a href="#1">Spectacles</a>
<ul class="menuderoulant">
<li><a href="#2">CF</a></li>
<li><a href="#3">CE</a></li>
<li><a href="#3">APE</a></li>
</ul>
</li>
<li>
<a href="#5">f&ecirc;tes familliales </a>
<ul class="menuderoulant">
<li><a href="#6">anniv enfant</a></li>
<li><a href="#7">anniv adulte</a></li>
<li><a href="#7">anniv mariage</a></li>
<li><a href="#7">baptême</a></li>
<li><a href="#7">mariage</a></li>
</ul>
</li>
<li>
<a href="#21">anim commerciales </a>
<ul class="menuderoulant">
<li><a href="#11">sculptures ballons</a></li>
<li><a href="#12">maquillages</a></li>
</ul>
</li>
<li>
<a href="#22">Autres</a>
<ul class="menuderoulant">
<li><a href="#23">remise médailles</a></li>
<li><a href="#24">campings</a></li>
</ul>
</li>
<li>
<a href="#1">Contacts</a>
</li>
</ul>

      <p align="center">&nbsp;</p>
      <!-- end entête -->
<h1 align="center">Coordonn&eacute;es des clowns f&eacute;minins RECTO-VERSO</h1>
    <p align="center">&nbsp;</p>
    <table width="800" border="0">
  <tr>
    <th width="400" scope="col"><div align="center"><img src="Nos photos/Gif/tel_mouv.gif" width="350" height="297" /></div></th>
    <th width="400" scope="col">
    <label>Coco Chataigner<br/>
      8 rue du Pressoir<br/>
49124 Saint Barthélémy d'Anjou<br/><br/>
02.41.93.07.22<br/>
06.07.58.10.90</label></th>
  </tr>
</table>
    <div align="center"><label><br />pour laisser un message aux clowns f&eacute;minins Recto-Verso</label></div>
  <div align="center"><br />
        <strong>(Laissez-nous vos coordonnées email et téléphonique SVP)<br />
        <br /></strong></div>
    <div align="center"><a href="mailto:webmaster@clowns-rectoverso.com"><img src="Nos photos/@RV.jpg" alt="Pour envoyer un mail &agrave; Recto-Verso cliquer ici" title="Pour envoyer un mail à Recto-Verso cliquer ici" border="0" /></a><br />
</div>
        <div align="center">En décembre, nous souhaitons rester dans notre région pour les arbres de Noël<br />
         (400 km maximum), car il n'est malheureusement pas possible de se<br />
 déplacer dans toute la France sur une période si courte ! </div>
        <p></p>
<!-- début bas de page -->
<div align="center" ><bas>| mentions l&eacute;gales | plan du site | <a href="contacts.html">Contacts</a> |<br />
&copy; 2010 Les clowns f&eacute;minins Recto-Verso</bas>
</div>
<!-- fin bas de page -->
</body>
</html>

 
 
D'avance merci, Verso smiley
Hors ligneVerso Le 05/10/2010 à 10:45 Profil de Verso Configuration de Verso

J'ai trouvé un menu déroulant compatible IE6 et très proche estétiquement du mien :

http://www.ellm.net/labo/labo_menu.html

Voilà si cela peut servir à d'autres !

Bonne journée Verso49 smiley

Hors ligneTigene Le 05/10/2010 à 13:38 Profil de Tigene Configuration de Tigene

Viconaute Modérateur

Bonjour Verso

content que tu te sois dépanné

@+

--

Ce n'est pas parce qu'on a quelque chose à dire, qu'il faut forcément l'ouvrir

Hors ligneVerso Le 07/10/2010 à 08:52 Profil de Verso Configuration de Verso

wink Bonjour Tigène !

Moi aussi je suis contente d'être dépannée !!!

Bonne journée à toi et aux vicaunautes !

 

Versosmiley

Vous avez résolu votre problème avec VIC ? Faites-le savoir sur les réseaux sociaux !
Vulgarisation-informatique.com
Cours en informatique & tutoriels