|
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"> </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"> </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"> </th>
</tr>
</table>
<img src="Nos photos/bouton3.jpg" alt="Sé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ê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"> </p>
<!-- end entête -->
<h1 align="center">Coordonnées des clowns féminins RECTO-VERSO</h1>
<p align="center"> </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é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 à 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égales | plan du site | <a href="contacts.html">Contacts</a> |<br />
© 2010 Les clowns féminins Recto-Verso</bas>
</div>
<!-- fin bas de page -->
</body>
</html>
D'avance merci, Verso  |