Bonjour,
Alors, voilà, c'est la dernière et ultime dernière étape pour mon site, et je vais avoir besoin d'un petit coup de main pour mon menu.
J'ai fait un menu déroulant en CSS, tout marche nickel sous Safari et FireFox, et évidemment mal sous IE (encore merci Bill!).
Alors, ce qui ne fonctionne pas, ce sont les :hover qui ne fonctionne que sur les liens avec IE.
Ma feuille CSS est dynamique, donc je me suis dit qu'il serai possible de tester quel navigateur est utilisé, et si c'est IE, on applique tel style au menu (pour le menu seulement, le reste fonctionne, enfin, pour l'instant...).
Donc, voici la partie CSS concernant le menu, je vais mettre aussi un exemple du code xHTML qui va avec.
Et le xHTML :
Vous pouvez facilement le tester, suffit de copier/coller le code dans un fichier 'styles.css' pour l'un et 'ce_que_vous_voulez.html' pour l'autre, de mettre ça dans le même répertoire et de l'ouvrir dans le navigateur. Il devrai fonctionner parfaitement sous Firefox et safari, et pas sous IE.
Donc il me faudrai faire une nouvelle partie CSS spéciale pour IE (TEST du navigateur avec PHP, puis echo de la partie adéquat) juste pour ce menu. Mais comment faire? Rendre tous mon menu sous forme de lien pour pouvoir utiliser :hover?
merci de votre contribution, il faut vraiment que je termine ce site, c'est la dernière étape pour qu'il soit vraiment fonctionnel à 100% (bon, euh 99%, personne n'est parfait...)
Modifié par mini_gspot (02 Jun 2009 - 14:29)
Alors, voilà, c'est la dernière et ultime dernière étape pour mon site, et je vais avoir besoin d'un petit coup de main pour mon menu.
J'ai fait un menu déroulant en CSS, tout marche nickel sous Safari et FireFox, et évidemment mal sous IE (encore merci Bill!).
Alors, ce qui ne fonctionne pas, ce sont les :hover qui ne fonctionne que sur les liens avec IE.
Ma feuille CSS est dynamique, donc je me suis dit qu'il serai possible de tester quel navigateur est utilisé, et si c'est IE, on applique tel style au menu (pour le menu seulement, le reste fonctionne, enfin, pour l'instant...).
Donc, voici la partie CSS concernant le menu, je vais mettre aussi un exemple du code xHTML qui va avec.
#menu
{
background: #181A12;
float: left;
width: 200px;
}
#menu a
{
color: #FF6533;
display: block;
padding: 10px;
line-height: 1.5;
font-size: .9em;
text-decoration: none;
}
#menu p
{
color: #FF6533;
padding: 10px;
line-height: 1.5;
font-size: .9em;
text-decoration: none;
}
#menu ul
{
margin: 0;
padding: 20px 10px;
width: 180px;
list-style: none;
}
#menu ul li:hover
{
position: relative;
background: #000000;
padding: 0px 0px 0px 5px;
font-weight: bold;
}
#menu ul li.sous_menu:hover
{
background: url(images/fleche2.png) #000000 no-repeat right center;
}
#menu ul ul
{
position: absolute;
top: -10px;
left: 180px;
display: none;
padding: 10px;
margin: 0;
}
.sous_menu
{
background: url(images/fleche.png) right center no-repeat;
}
#menu ul.niveau1 li.sous_menu:hover ul.niveau2,
#menu ul.niveau2 li.sous_menu:hover ul.niveau3,
#menu ul.niveau3 li.sous_menu:hover ul.niveau4
{
display: block;
background-color: #181A12;
font-weight: lighter;
border: solid 1px #2C2F22;
}
Et le xHTML :
<!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>
<title>Menu</title>
<meta http-equiv="Content-Type" content="text/php; charset=UTF-8" />
<meta http-equiv="Content-Language" content="fr" />
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</head>
<body>
<div id="menu">
<ul class="niveau1">
<li>
<a href="accueil">ACCUEIL</a>
</li>
<li>
<a href="services">SERVICES</a>
</li>
<li class="sous_menu">
<p>RESSOURCES <br/>ELECTRONIQUES</p>
<ul class="niveau2">
<li class="sous_menu">
<p>Internes</p>
<ul class="niveau3">
<li>
<a href="astia_lavoisier">Astia / Lavoisier</a>
</li>
<li>
<a href="biblioplanets">Biblioplanets / GlobC (URA 1875)</a>
</li>
<li>
<a href="siam">SIAM</a>
</li>
</ul>
</li>
<li class="sous_menu">
<p>Externes</p>
<ul class="niveau3">
<li>
<a href="moteurs_recherches">Moteurs de recherches</a>
</li>
<li class="sous_menu">
<p>Bases de données</p>
<ul class="niveau4">
<li>
<a href="archives">Archives</a>
</li>
<li>
<a href="cours">Cours</a>
</li>
<li>
<a href="e_book">E-book</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="sous_menu">
<p>CATALOGUES</p>
<ul class="niveau2">
<li>
<a href="cat_internes">Internes</a>
</li>
<li class="sous_menu">
<p>Externes</p>
<ul class="niveau3">
<li>
<a href="cat_generaux">Généraux</a>
</li>
<li>
<a href="cat_theses">Thèses</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sous_menu">
<p>WEB UTILE</p>
<ul class="niveau2">
<li>
<a href="liens">Liens</a>
</li>
<li>
<a href="actualites">Actualités</a>
</li>
<li>
<a href="tutoriels">Tutoriels</a>
</li>
</ul>
</li>
<li>
<a href="open_access">OPEN ACCESS</a>
</li>
<li>
<a href="themes_couverts">THEMES COUVERTS</a>
</li>
</ul>
</div>
</body>
</html>
Vous pouvez facilement le tester, suffit de copier/coller le code dans un fichier 'styles.css' pour l'un et 'ce_que_vous_voulez.html' pour l'autre, de mettre ça dans le même répertoire et de l'ouvrir dans le navigateur. Il devrai fonctionner parfaitement sous Firefox et safari, et pas sous IE.
Donc il me faudrai faire une nouvelle partie CSS spéciale pour IE (TEST du navigateur avec PHP, puis echo de la partie adéquat) juste pour ce menu. Mais comment faire? Rendre tous mon menu sous forme de lien pour pouvoir utiliser :hover?
merci de votre contribution, il faut vraiment que je termine ce site, c'est la dernière étape pour qu'il soit vraiment fonctionnel à 100% (bon, euh 99%, personne n'est parfait...)
Modifié par mini_gspot (02 Jun 2009 - 14:29)
à la votre! vous l'avez bien mérité! 
please, help!
