28172 sujets

CSS et mise en forme, CSS3

Sous-menu qui ne veut pas aller en dessous du menu [résolu]

Bonjour,

voilà j'ai créer un menu et le 1er item a un sous-menu en lien avec la bdd. Le problème étant que le <li><ul> se met à coté de son <li> et non en dessous comme le présente l'image ci-dessous :

upload/31676-menu.jpg

code html de ma page :
a écrit :
<?php
include("connexion.php");
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>La cuisine de cécile</title>
<link rel="stylesheet" media="screen" href="styles/styles2.css">
</head>
<body>
<ul class="recettes-men">
<li id="li-r"><a href="recettes.php">Recettes</a></li>
<ul class="ulrecettes">
<?php

$sql= "SELECT idFamilles, Famille from familles";
$rez=mysql_query($sql);
$nb_lignes = mysql_affected_rows();
while($nf=mysql_fetch_array($rez)){
echo "<li><a href=\"recettes.php?id=".$nf[0]."\">" . $nf[1] ."</a></li>";
}?>
</ul>
<li id="li-co"><a href="cours.php">Cours</a></li>
<li id="li-cal"><a href="calendrier.php">Calendrier</a></li>
<li id="li-cont"><a href="contact.php">Contact</a></li>
<li id="li-av"><a href="livredor.php">Vos avis</a></li>
</ul>
</body>
</html>


code css :


a écrit :
.recettes-men{list-style:none; padding-left:285px; margin-top:-15px; font-weight:bold; position:absolute z-index:2}
.recettes-men li{float:left; width:96px; height:29px; text-align:center;}
.recettes-men a{margin-top:7px; font-family: Arial, "Times New Roman", Courier; text-decoration:none; font-size:14px; display:block;}
.recettes-men a:hover{text-decoration:none; color:#000000;}

#li-r{background-color:#f8e6a8; color:#000000;}
#li-co{background-color:#dd9f19; color:#000000;}
#li-cal{background-color:#552908; color:#FFFFFF;}
#li-cont{background-color:#ebb575; color:#000000;}
#li-av{background-color:#d61818; color:#FFFFFF;}

#li-r a{color:#000000;}
#li-co a{color:#000000;}
#li-cal a{color:#FFFFFF;}
#li-cont a{color:#000000;}
#li-av a{color:#FFFFFF;}

#li-r a:hover{color:#000000; text-decoration: none;}
#li-co a:hover{color:#000000; text-decoration: none;}
#li-cal a:hover{color:#FFFFFF; text-decoration: none;}
#li-cont a:hover{color:#000000; text-decoration: none;}
#li-av a:hover{color:#FFFFFF; text-decoration: none;}

.recettes li{display:none; list-style:none; padding:0px; margin-top:0px; width:96px;}
.recettes li ul{width:96px; padding:0px; margin:0px; height:29px;}
.recettes-men li:hover .ulrecettes{display:block;}
.recettes li ul a{color:#000000; text-decoration:none;}


voila si quelqu'un a une meilleure vision de tout ça que moi, suis open ^^

cordialement,
Riwalenn
Modifié par riwalenn (13 Aug 2010 - 11:38)
Je viens de m'aperçevoir que je n'ai pas mis un </li> là ou il fallait, code revu :

<ul class="recettes-men">
<li id="li-r"><a href="recettes.php">Recettes</a></li>
<ul class="ulrecettes">
<?php

$sql= "SELECT idFamilles, Famille from familles";
$rez=mysql_query($sql);
$nb_lignes = mysql_affected_rows();
while($nf=mysql_fetch_array($rez)){
echo "<li><a href=\"recettes.php?id=".$nf[0]."\">" . $nf[1] ."</a></li><br \>";
}?>
</ul>
<li id="li-co"><a href="cours.php">Cours</a></li>
<li id="li-cal"><a href="calendrier.php">Calendrier</a></li>
<li id="li-cont"><a href="contact.php">Contact</a></li>
<li id="li-av"><a href="livredor.php">Vos avis</a></li>
</ul>


cela ne change pas mon problème qui est que le display:none n'est pas actif... avec le code ci-dessus j'ai bien le sous-menu en dessous(et encore j'ai un doute pour le 1er item) mais visible...
Modifié par riwalenn (13 Aug 2010 - 11:06)
c'est normal, ton display: none s'applique aux éléments <li> enfant d'un élément dont la classe est recettes.
Or, je ne vois pas dans ton code d'élément dont la classe est recettes !

pour cacher ton sous-menu, tu devrais avoir ce style ci-dessous :
.ulrecettes {
  display: none;
}
je te remercie.. j'ai refait mon code à partir d'un mes ancien code et effectivement je n'ai pas mis le display:none comme tu le dis ^^
euh... je me trompe peut-être, mais je crois que justement dans son cas, riwalenn, veut rendre invisible ses sous-menus que ce soit graphiquement ou autrement.
Ils ne deviendront visibles que sous conditions (clic, survol, ...)
Administrateur
RACBasket a écrit :
euh... je me trompe peut-être, mais je crois que justement dans son cas, riwalenn, veut rendre invisible ses sous-menus que ce soit graphiquement ou autrement.
Ils ne deviendront visibles que sous conditions (clic, survol, ...)

Oui, ils seront donc complètement inaccessibles aux personnes non voyantes par exemple si elles sont en display none.

Pour être accessible, il faut que tout fonctionne sans aucun script ni artifice au chargement de la page. ENSUITE, s'il s'agit de masquer des éléments, cela peut se faire via JavaScript. La personne qui n'a pas JS ni CSS pourra donc naviguer puisque les éléments seront présents.
OK, merci de la précision ca me rassure sur ma compréhension du display: none qu'il faut utiliser en comprenant bien son fonctionnement.

D'ailleurs pas la peine de limiter le problème aux personnes non-voyantes, avec IE6, un sous-menu en display: none qui apparait sur un :hover sur les autres navigateurs sera totalement impossible à afficher juste avec un CSS (il faudra ajouter une couche de JS).
Sujet clos
Aller à