4991 sujets

Sémantique web et HTML

Bonjour,

j'ai besoin d'aide pour adapter plusieurs codes que j'ai trouvé sur internet. Je n'y connais pas grand chose en HTML et CSS ce pourquoi je souhaite tomber sur une âme charitable qui pourrait m'aiguiller.

Mon but est de créer un menu déroulant sous ce que j'ai déjà effectué. Celui que j'ai ne fonctionne pas et je ne vois pas pourquoi.

Il ne sert à rien de m'envoyer vers différents liens ou tutoriaux, je m'y suis arraché les cheveux tout l'après midi et une bonne parti de la soirée, je n'arrive pas à adapter.

Merci par avance pour votre aide


HTML

<code>

<div id="menu">

<li class="current"><a href="#">Accueil</a></li>
<li><a href="#">Qui sommes nous ?</a></li>
<gras><ul class="menuderoulant">
<li><a href="#2">sous menu a</a></li>
<li><a href="#3">sous menu b</a></li>
<li><a href="#4">sous menu c</a></li>
</ul></gras>
<li><a href="#">Circuits</a></li>
<li><a href="#">L'Inde du sud</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Contact</a></li>

</div>

</code>

CSS

<code>

#menu {
list-style-type: none;
border-top:#fff solid 5px;
background-color:#000033;
width:1000px; height:35px;
}

#menu li {
float:left;
left: 30px;
}

#menu li a {
display:block;
color:#fff;
font-size:13px;
font-weight:bold;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
margin-top:3px;
border-right: 10px solid #000033;
border-left: 10px solid #000033;
cursor:pointer;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
}

#menu li a:hover {
background-color:#98869c;
}

#menu li.current a {
background-color:#77b800;
}

#menu .menuderoulant
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position:absolute;
}
#menu .menuderoulant li
{
margin: 0;
padding: 0;
border: 0;
width: 140px;
}
#menu .menuderoulant li a
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
}
#menu .menuderoulant li a:hover
{
background-color: #eab;
}

#menu .menuderoulant li a:visited {
background-color: #9933CC;
}

#menu li:hover > .menuderoulant { display: block; }

</code>
Bonsoir,

Tout d'abord je ne peux que te conseiller d'aller te documenter un petit peu sur les bases du html et css, ce qui te permettra déjà de corriger quelques erreurs présentes dans ton code.

Ensuite si tu formules le but recherché ça donnerait : Au survol d'un élément d'une liste, je souhaite afficher la liste qu'il contient (le sous menu).

En css, avec les sélecteurs qui vont bien ça donnerait quelque chose comme :


#menu ul li ul {display:none;} /* on cache les sous menus par défaut */
#menu ul li:hover ul {display:block;} /* au survol d'un élément de la liste principale on affiche la liste qu'il contient */


A toi d'adapter selon tes besoins.
Modifié par 22px (26 Aug 2012 - 01:34)
Bonjour,

merci pour ta réponse mais du coup je me suis rabattu sur un autre code vu que je n'y arrive pas du tout.

C'est beaucoup moins joli mais il y a un semblant de fonctionnement.

J'espère pouvoir revenir dessus avant la fin de mon site.

Encore merci.

Pour info dès que je colle du <ul> il me place de point hors je mets bien la formule qui les efface et me déplace tout à partir du sous menu sans me le faire disparaître alors j'ai bien mis le "display:none;"

Une journée complète que je suis dessus, là je baisse les bras ou je vais vers l'AVC
Bonjour,

finalement je n'ai pas laché le truc et ça fonctionne mais maintenant j'ai un autre soucis.

je n'arrive pas mettre le sous menu en colonne et centré sous le menu "circuit"

Auriez vous une solution

Merci par avance

-------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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>titre</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css2.css" rel="stylesheet" type="text/css" /><body>
<div id="block">
<div id="haut">

</div>

<div id="photo">
<div id="logo">
<img src="images/logo.gif" alt="logo" />
</div>
<div id="texthaut">
<div class="titrea">
  <p>CIRCUITS SUR MESURE</pr>
  </div>
</div>
</div>

<ul id="menu"> 

<li class="current"><a href="#">Accueil</a></li> 
<li><a href="#">Qui sommes nous ?</a></li> 
<li><a href="#">Circuits</a>
<ul class="menuderoulant"> 
<li><a href="#2">sous menu a</a></li> 
<li><a href="#3">sous menu b</a></li> 
<li><a href="#4">sous menu c</a></li>	
</ul> </li> 
<li><a href="#">L'Inde du sud</a></li> 
<li><a href="#">Photos</a></li> 
<li><a href="#">Contact</a></li> 

</ul>

</div>
</body>
</html>


-----css------

#menu {
	list-style-type: none;
	background-color:#000033;
	width:959px;
	height: 34px;
	display: block;
  }

#menu li {
	float:left;
	left: 0px;
}

#menu li a {
	display:block;
	color:#fff;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	cursor:pointer;
	padding-top: 6px;
	padding-right: 10px;
	padding-bottom: 6px;
	padding-left: 10px;
	margin-top: 3px;
  }

#menu li a:hover {
	background-color:#FF9900;
  }
  
#menu li.current a { 
  background-color:#77b800;
  }

#menu .menuderoulant      
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position:absolute;
	background-color: #CCCCCC;
}
#menu .menuderoulant li
{
margin: 0;
padding: 0;
border: 0;
width: 140px;
}
#menu .menuderoulant li a
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
}
#menu .menuderoulant li a:hover
{
	background-color: #FFCC33;
}

#menu .menuderoulant li a:visited {
background-color: #9933CC;
}

#menu li:hover > .menuderoulant { display: block; }