Bonjour, 
Je suis toujours dans mes sites que j'essaie de mettre à jour.
J'ai un site avec une partie annuaire en php (script Myphpannuaire) et une partie en html.
J'ai changé la mise en page en utilisant html5 et css5 sous mozilla 3.6 le menu fonctionne parfaitement dans les 2 parties. (voir photos ci-après) seul soucis le centrage de la page dans la partie annuaire.
[url=http://www.servimg.com/image_preview.php?i=229&u=11292857][img]http://i49.servimg.com/u/f49/11/29/28/57/th/firefo10.jpg[/img][/url]
Par contre sous ie8 et ie9 c'est la cata dans la partie annuaire (voici les images) :
[url=http://www.servimg.com/image_preview.php?i=230&u=11292857][img]http://i49.servimg.com/u/f49/11/29/28/57/th/ie810.jpg[/img][/url]
[url=http://www.servimg.com/image_preview.php?i=231&u=11292857][img]http://i49.servimg.com/u/f49/11/29/28/57/th/ie910.jpg[/img][/url]
Voici le code de la page php de l'annuaire :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="annuaire.css" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE 8]><-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--><![endif]-->
</head>
<?php
// Liens principaux dans l'annuaire
?>
<body>
<div id="bloc_page">
<div id="menu">
<ul class="niveau1">
<li><a href="http://www.sciences-de-la-terre.com/arthropodes.html">Arthropodes</a>
<ul class="niveau2">
<li><a href="http://www.sciences-de-la-terre.com/Crabes.html">Crabes actuels</a></li>
<li><a href="http://www.sciences-de-la-terre.com/crustaces-fossiles.html">Crustacés fossiles</a></li>
<li><a href="http://www.sciences-de-la-terre.com/Scorpionidae.html">Scorpion</a></li>
<li><a href="http://www.sciences-de-la-terre.com/Trilobites.html">Trilobites</a></li>
</ul>
</li>
<li><a href="#">Coquilles</a>
<ul class="niveau2">
<li><a href="http://www.sciences-de-la-terre.com/Brachiopodes-devonien.html">Brachiopodes du dévonien</a></li>
<li><a href="http://www.sciences-de-la-terre.com/Burdigalien-bordelais.html">Burdigalien du Bordelais</a></li>
</ul>
</li>
<li><a href="http://www.sciences-de-la-terre.com/echinodermes.html">Echinodermes</a>
<ul class="niveau2">
<li><a href="http://www.sciences-de-la-terre.com/oursins-actuels.html">Oursins actuels</a></li>
<li><a href="http://www.sciences-de-la-terre.com/oursins-fossiles.html">Oursins fossiles</a></li>
</ul>
</li>
<li><a href="">vertébrés</a>
<ul class="niveau2">
<li><a href="http://www.sciences-de-la-terre.com/HeterodontieSelaciens.html">Hétérodontie des sélaciens</a></li>
</ul>
</li>
<li><a href="">Et encore...</a>
<ul class="niveau2">
<li><a href="http://www.mesopinions.com/Sauvegarde-du-site-fossilifere-bartonien-du-Guepelle--95--petition-petitions-b371d7961f95172e26d28f014468841a.html">Pétition Guepelle</a></li>
</ul>
</li>
</ul>
</div>
<p> </p>
<p> </p>
<div align="center">
<a href="index.php" class="top_link_annuaire">Accueil</a>
<a href="top_clics.php" class="top_link_annuaire">Top clics</a>
<a href="submit_site.php?id_cat=<?php echo isset ($cat_id) ? $cat_id : ''; ?>" class="top_link_annuaire">
<?php
if (!empty($id_cat))
{
?>
Proposer un site dans cette catégorie</a>
<?php
}
else //l'id de la la categorie est vide
{
?>
Proposer un site</a>
<?php
}
?>
<a href="top_votes.php" class="top_link_annuaire">Top votes</a>
<a href="nouveautes.php" class="top_link_annuaire">Nouveautés</a>
<a href="mailto:webmaster@sciences-de-la-terre.com" class="top_link_annuaire">Contacts</a>
</center>
<p></p>
<p></p>
<center>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5845582237438527";
/* annuaire-long */
google_ad_slot = "5521980973";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
<br /><br />
<center>
<!-- Yahoo! Search -->
<form method=get action="http://search.yahoo.com/search">
<table cellpadding=0 cellspacing=0 border=0>
<tr><td><div style="border: 1px solid #999; padding: 5px 4px 5px 3px;"><a href="http://search.yahoo.com/"></a>
<input type="text" name="p" size=29>
<input type="hidden" name="fr" value="yscpb">
<input type="submit" value="Search"><br><font size="-2" face="arial, helvetica"><input type="radio" style="vertical-align: middle" checked>Search the web <input type="radio" name="vs" style="vertical-align: middle" value="YOUR SITE DOMAIN">Search this site</font></div></td></tr>
</table>
</form>
<!-- End Yahoo! Search -->
</center>
</div>
</body>
</html>
Et maintenant le code CSS :
/***** BODY *****/
body { width:900px; background: #F1E6F4; }
#bloc_page { width: 900px; margin: auto; }
/****************************** Menu déroulant ***********************************/
/*--- Menu déroulant ---*/
#menu {
width:800px; /* donner une largeur au menu, prendre en compte les marges */
margin: auto; /* marge auto pour centrer mon menu dans l'élément */
height: auto; /* important pour IE7, hauteur auto sinon pas de menu deroulant */
list-style-type: none; /* pas de puce */
padding: 0; /* marge interne à 0 */
border: 0; /* bordure à 0 */
}
#menu ul {
margin: auto; /* marge auto pour centrer mon menu dans l'élément */
padding: 0; /* marge interne à 0 */
list-style-type: none;
}
#menu li {
float: left; /* permet de mettre les items <li> horizontalement */
width: 157px; /* je donne une largeur à mes cellules */
margin: 5px; /* j'espace mes cellules de 5px */
background-color: #704968; /* couleur du fond de mes cellules */
border-radius: 5px; /* ça c'est pour arrondir les angles */
}
#menu li a {
font-family: verdana, Arial, sans-serif;
display: block; /* pour mettre mes liens en block */
color: white; /* donne une couleur à la police */
font-size: 12px; /* donne une taille à la police */
text-align: center; /* donne un alignement à la police */
margin: auto; /* pas de marge externe */
border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0; /* Couleur des bords clair foncé foncé clair */
border:1px solid; /* une bordure extérieur */
padding-top : 4px; /*marge intérieure en haut*/
padding-bottom : 3px; /*marge intérieure en bas*/
padding-left : 2px; /*marge intérieure à gauche*/
padding-right : 2px; /*marge intérieure à droite*/
border: 0px 0px; /* pas de bordure extérieure */
text-decoration: none; /* pas de décoration pour mes liens */
border-radius: 5px; /* ça c'est pour arrondir les angles */
}
/*---------- Niveau 1 ----------*/
#menu .niveau1 li {
float: left; /* permet de mettre les items <li> horizontalement */
margin: 0 -1px 0 0;
}
#menu .niveau1 li a {
font-family: verdana, Arial, sans-serif;
padding-top : 4px; /*marge intérieure en haut*/
padding-bottom : 3px; /*marge intérieure en bas*/
padding-left : 2px; /*marge intérieure à gauche*/
padding-right : 2px; /*marge intérieure à droite*/
height: 16px; /* hauteur des cellules */
color: white;
text-decoration: none; /* pas de décoration pour mes liens */
background-color: #704968; /* couleur du fond de mes cellules */
border-radius: 5px; /* ça c'est pour arrondir les angles */
}
#menu .niveau1 li:hover a,
#menu .niveau1 li a:hover {
color: black;
background-color: #E9D6EE;
}
/*---------- Niveau 2 ----------*/
#menu .niveau2 {
top: -9999em; /* déplace les "cases" du niveau 2 */
}
#menu .niveau2 li {
margin: -1px 0 0;
}
#menu .niveau2 li a {
font-family: verdana, Arial, sans-serif;
font-size: 9px;
color: #83598F;
background: #E9D6EE;
}
#menu .niveau2 li a:hover {
color: #83598F;
background: #E9D6EE;
}
#menu li:hover .niveau2,
#menu .sfhover .niveau2 {
top: auto;
min-height: 0; /* corrige un bug IE7 */
}
/******************************** ACCUEIL ****************************************/
/* Texte sur la page d'accueil :
Cet annuaire contient...
*/
.text_index_annuaire { font-weight: bold; font-family: Arial; font-size: 12px; color: #800080 }
/* Lien vers les categories princiaples sur la page d'accueil */
a.link_cat_index_annuaire { font-weight: bold; font-family: Arial; font-size: 14px; color: #b998ba; }
/* Lien vers les sous-categories sur la page d'accueil */
a.link_scat_index_annuaire { text-decoration: none; font-weight: bold; font-family: Arial; font-size: 12px; color: #800080 }
/* Nombre de sous-categories entre les () sur la page d'accueil */
.nb_scat_index_annuaire { font-family: Arial; font-size: 12px; }
/************************************ CATEGORIES *********************************/
/* Lien vers les sous-categories sur les pages des categories */
a.link_scat_other_annuaire { font-family: Arial; font-size: 12px; }
/* Nombre de sous-categories entre les () sur les pages des categories */
.nb_scat_other_annuaire { font-family: Arial; font-size: 12px; color: #b998ba; }
/* Texte qui est affiche en guise de description d'une categorie */
.text_cat_annuaire { font-weight: bold; font-family: Arial; font-size: 12px; }
/* Texte pour dire qu'il n'y a pas de site dans une categorie :
Pas encore de sites dans...
*/
.no_site_in_cat_annuaire { color: #ff0000; }
/*********************************** SITES ****************************************/
/* Titre des sites */
a.titre_site_annuaire { font-weight: bold; font-family: Arial; font-size: 14px; color: #b998ba; }
/* Nombre de clics sur les sites */
.nb_clics_site_annuaire { }
/* Date de validation des sites */
.date_validation_site_annuaire { }
/* Moyenne + nombre de votes dans le top votes */
.moyenne_votes_topv_annuaire { font-family: Arial; font-size: 11px; color: #999999; }
/* Description des sites */
.description_site_annuaire { font-family: Arial; font-size: 12px; color: #800080 }
/* Moyenne des votes des sites */
.moyenne_votes_site_annuaire { font-family: Arial; font-size: 11px; color: #999999; }
/* Lien pour voter pour les sites */
a.vote_site_annuaire { font-family: Arial; font-size: 11px; color: #999999; }
/* Nombre de commentaires pour les sites */
.commentaire_site_annuaire { font-family: Arial; font-size: 11px; color: #999999; }
/* Lien pour voir et ecrire des commentaires */
a.read_write_com_site_annuaire { font-family: Arial; font-size: 11px; color: #999999; }
/* Position des sites (1,2,3,4,...) dans les Top clics et Top votes */
.position_site_annuaire { }
/***** NOUVEAUTES *****/
/* Texte pour dire qu'il n'y a pas de nouveaux sites ces X derniers jours :
Aucun site n'a été ajouté ...
*/
.no_new_site_annuaire { color: #ff0000; }
/* Date pour laquelle il y a des nouveaux sites */
.date_new_site_annuaire { font-weight: bold; }
/***** TOP CLICS *****/
/* Texte pour dire qu'aucun site n'a deja recu de clic :
Aucun site n'a encore reçu de visite...
*/
.no_clic_site_annuaire { color: #ff0000; }
/***** TOP VOTES *****/
/* Texte pour dire qu'on n'a pas encore voter pour les sites :
Aucun site n'a encore reçu de vote...
*/
.no_vote_site_annuaire { color: #ff0000; }
/* Liens vers les 2 types de classement par votes (moyenne ou nombre) */
a.type_vote_annuaire { }
/***** RECHERCHE *****/
/* Texte au cas ou il n'y aurait pas de resultat a la recherche effectuee :
Aucun résultat pour la recherche...
*/
.no_res_search_annuaire { color: #ff0000; }
/* Timer pour le moteur de recherche */
.timer_search_annuaire { font-style: italic; }
/* Texte dans les resultats d'une recherche :
Categories trouvées, Sites trouves
*/
.res_search_cat_site_annuaire { font-weight: bold; }
/* Champ pour entrer le(s) mot(s) a rechercher */
input.text_to_search_annuaire { }
/* Bouton pour lancer la recherche */
input.button_make_search_annuaire { }
/* Texte en dessous du champ pour entrer la recherche a effectuer :
Résultats par page ...
*/
.text_search_annuaire { }
/* Liste deroulante pour choisir le nombre de resultats de la recherche */
select.list_nb__res_search_annuaire { }
/***** AJOUTER UN SITE *****/
/* Texte de confirmation apres la proposition d'un site dans l'annuaire */
.confirm_add_site_annuaire { font-size: 14px; }
/* Texte pour dire que tous les champs sont obligatoires */
.all_field_required_annuaire { color: #ff0000; font-weight: bold; }
/* Texte pour signaler qu'on ne peut pas ajouter de site dans cette categorie */
.can_not_add_annuaire { color: #ff0000; font-weight: bold; font-size: 14px; }
/* Texte devant les champs :
Votre nom :, Votre prénom,...
*/
.text_before_field_add_annuaire { font-family: Arial; font-size: 12px; }
/* Champ(4) pour rentrer les donnees du site (nom, email, URL, titre) */
input.field_data_add_site_annuaire { }
/* Textarea pour la description du site */
textarea.descr_add_site_annuaire { }
/* Bouton pour envoyer le formulaire */
input.submit_form_add_site_annuaire { }
/* Liste deroulante avec toutes les categories */
select.list_all_cats_annuaire { }
/***** VOTE *****/
/* Texte si on a deja vote pour le site :
Vous avez déjà voté ces dernières...
*/
.deja_vote_annuaire { color: #ff0000; }
/* Texte apres avoir voter correctement */
.vote_ok_annuaire { color: #009900; }
/* Texte qui apparait dans la popup avant de voter :
Vous allez pouvoir voter...
*/
.text_vote_annuaire { font-weight: bold; }
/* Liste deroulante avec les votes possibles */
select.list_vote_site_annuaire { }
/***** COMMENTAIRES *****/
/* Texte pour signaler qu'il n'y a pas encore eu de commentaires pour un site :
Pas encore de commentaire...
*/
.no_com_site_annuaire { color: #ff0000; }
/* Auteur + date d'ajout du commentaire */
.author_and_date_com_annuaire { font-weight: bold; }
/* Texte du commentaire */
.text_com_annuaire { }
/* Bouton pour ajouter un commentaire */
input.button_add_com_annuaire { }
/* Texte devant les champs du formulaire d'ajout d'un commentaire */
.text_before_field_com_annuaire { font-weight: bold; }
/* Textarea pour entrer le commentaire */
textarea.text_add_com_annuaire { font-size: 12px; }
/* Champs nom et email pour la personne qui ajoute un commentaire */
input.champ_com_annuaire { }
/***** DIVERS *****/
/* Lien dans le bas des pages */
a.link_footer_annuaire { font-family: Verdana; font-size: 12px; font-weight: bold; }
/* Liens principaux de l'annuaire (Accueil, Top clics, Ajouter un site,...) */
a.top_link_annuaire { font-family: Verdana; font-size: 15px; color: #800080 }
/* Arborescence en ligne des categories (texte) */
.arbo_annuaire { }
/* Arborescence en ligne des categories (liens) */
a.arbo_annuaire { }
/* Liens vers les numeros des pages si il y a trop de sites pour etre affiche sur une seule page (categorie + recherche) */
a.link_numpage_annuaire { font-size: 11px; font-family: Arial; }
/* Titre des pages de l'annuaire */
.titre_annuaire { font-size: 18px; font-weight: bold; font-family: Arial; }
/* Lien vers la categorie d'un site dans les nouveautes, les tops et le moteur... */
.link_to_cat_annuaire { }
/* Boutons des formulaires pour fermer les popups pour les votes et les commentaires */
input.button_close_annuaire { }
/* siteInfo */
.siteInfo {
clear: both;
font-size: 10px;
color: #D67CEF;
padding: 10px 10px 10px 10px;
}
/* siteInfo */
.siteInfo {
clear: both;
font-size: 10px;
color: #D67CEF;
padding: 10px 10px 10px 10px;
}
.siteInfo a {
text-decoration: none;
font-size: 10px;
color: #83598F;
}
Voilà pourrier-vous m'aider pour que cela fonctionne sous ce satané ie qui ne fait rien comme tout le monde.
Je vous en remercie par avance
Verso 