[resolu] liste html/css
Forum Programmation : [resolu] liste html/css
bonjour
j'ai fait une liste qui me sert de menu pour mon site; c'est une liste en ligne avec déroulement des éléments au survol de la souris. mais j'ai 2 problèmes: mes éléments ne s'alignent pas avec le menu correspondant, les rendant ainsi impossible à cliquer.. et sous ie ils ne s'affichent pas.
Voici le code css:
Code :
|
et le html:
Code :
|
Voilà, merci pour votre aide.
Message édité par sleepless2101 le 12-06-2008 à 19:42:56
IE ne reconnait pas :hover sur un élément de type <li>, il ne reconnait que sur les <a> si je ne m'abuse.
Il faut passer par du javascript si tu veux mettre un hover (en changeant de classe dans le onmouseover et le onmouseout), ou sinon mettre ton hover sur le lien
merci OmaR_ShaRif
j'ai donc résolu mes 2 problèmes mais un 3eme est arrivé: lorsque mes menus se déroulent, tout le contenu par dessus lequel le menu doit se placer, se décale...
Vous comprendrez très vite ce que je veux dire en le voyant..
fichier css.css
#menuDeroulant
{
border-bottom: 1px solid #ccc;
margin: 0;
padding-bottom: 19px;
padding-left: 10px;
z-index: 100;
}
#menuDeroulant li
{
float: left;
list-style-type: none;
margin: 0;
padding: 0;
width: 100px;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
background: #E8EBF0;
border: 1px solid #ccc;
color: #666;
font-size: small;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}
#menuDeroulant a:link#current, #menuDeroulant a:visited#current
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
#menuDeroulant li a:hover
{
color: #f00;
background: #E0E0F0;
}
#menuDeroulant li a
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
#menuDeroulant .sousMenu
{
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li
{
list-style-type: none;
margin: 0;
padding: 0;
}
#menuDeroulant .sousMenu li a
{
background: #E8EBF0;
border: 1px solid #ccc;
color: #666;
font-size: small;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover
{
color: #f00;
background: #E0E0F0;
}
body
{
background: url(latte.gif) repeat-x top #EEEEEE fixed;
}
#navcontainer
{
width: 800px;
background: #E0E0E0;
}
#titre
{
background: url('pendule.jpg') no-repeat top;
height: 150px;
width: 800px;
}
#contenu
{
margin-left: 20px;
margin-right: 20px;
text-align: left;
width: 760px;
position: absolute;
top: 220px;
z-index: 0;
}
#content
{
z-index: 1;
}
span
{
padding-left:20px;
}
hr
{
color: #ccc;
background-color: #ccc;
border: 1px;
}
page.html
<!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" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!-- @import url(css.css);-->
</style>
</head>
<body>
<center>
<div id="navcontainer">
<br>
<div id="titre">
</div>
<ul id="menuDeroulant">
<li id="active"><a href="../index.html" id="current">Introduction</a></li>
<li style="width:9em;"><a href="fiche.html">Fiche synoptique</a></li>
<li style="width:8em;" onmouseover="document.getElementById('ssm1').style.display='block';" onmouseout="document.getElementById('ssm1').style.display='none';"><a href="javascript:void('0')">Etude théorique</a>
<ul class="sousMenu" style="display:none;" id="ssm1">
<li style="width:8em;"><a href="miseequation.html">Mise en équation</a></li>
<li style="width:8em;"><a href="maple.html">Etude sous Maple</a></li>
</ul>
</li>
<li style="width:12em;" onmouseover="document.getElementById('ssm2').style.display='block';" onmouseout="document.getElementById('ssm2').style.display='none';"><a href="javascript:void('0')">Construction du pendule</a>
<ul class="sousMenu" style="display:none;" id="ssm2">
<li style="width:12em;"><a href="difficultes.html">Difficultés</a></li>
<li style="width:12em;"><a href="construction.html">Construction</a></li>
<li style="width:12em;"><a href="resultats.html">Résultats</a></li>
</ul>
</li>
<li><a href="conclusion.html">Conclusion</a></li>
<li><a href="about.html">À propos</a></li>
</ul>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipisci elit. Corrupte religionis, cohaerescant non ab et sentit ad non quod sit, ad leniat, displicet tritani, cum dicam accurate ratio, texit si contemnit, quidem legendum ipsum, homero reddidisti sed vitam ut.. In a, sciscat vituperandae amicitia adipiscendarum eius eamque sapienti accommodare volumus quod, discere igitur propositum mors, quorum sit ut excelsus ferentur autem facerem cum transferre illum ista a ita ut quam deorsus vero natura, quae ratione qua latina non non ne animos minus non a erit, efficiendi recte alii, de labitur.. Opes inermis continent et, impetum aut.
</div>
<br><br><br>
</div>
</center>
</body>
</html>
Hello,
Une solution peut être d'ajouter :
Code :
|
Yop! ça marche! enfin, le fait de rajouter
#menuDeroulant .sousMenu {
...
position:absolute;
}
dans ie ça décale les menus déroulant vers la droite.. j'ai mis un
*html #menuDeroulant .sousMenu {
position:static;
}
et ça s'affiche au bon endroit.. mais quand un menu déroule, tout le contenu de la page pars vers la bas..!
enfin, j'ai ie6, je sais pas ce que ça donne avec le 7.
Edit : c'est parce que pour qu'il puisse passer au dessus, il faut qu'il soit en position absolute, ou sinon en float.
je sais pas quoi faire là pour IE6
Message édité par OmaR le 12-06-2008 à 16:23:35
merci pour tout OmaR_ShaRif.
j'ai essayé des float et position, ça marche pas; tant pis pour les gens qui veulent pas utiliser FF!
Il y a 3011 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.
