5568 sujets

Sémantique web et HTML

Souci avec une liste deroulante

BONJOUR
je veux mettre une liste deroulante verticale et j'ai des soucis je n'arrive pas a ce que dans une des option il y es deux sous options
ex: Ligue 1: bordeaux , lyon
pour moi il n'y en a que un sur les 2 qui s"affiche donc est ce que cela vient du code html ou css , je n'arrive pas a voir ma faute
Sans code source, il sera difficile de t'apporter efficacement de l'aide.

Toutefois, si j'ai bien compris, tu veux regrouper les options selon une taxonomie précise. Dans ce cas, il existe un élément qui s'appelle optgroup et qui permet de regrouper les éléments option, comme suit (l'attribut label de l'élément optgroup permet de nommer le groupement d'options) :
<select id="club" name="club">
  <optgroup label="Ligue 1">
    <option>Bordeaux</option>
    <option>Lyon</option>
  </optgroup>
  <optgroup label="Ligue 2">
    <option>Nantes</option>
  </optgroup>
</select>
je vous envoi mn css et html

html

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http;//www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml.lang="fr">
<head>
<title>site des chantiers</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<link rel="stylesheet" media="screen" type="text/css" href="chantiers.css" />
<script type="text/javascript">
<!--
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
-->
</script>
if (window.attachEvent) window.attachEvent("onload", sfHover);

</head>

<body bgcolor=black>

<div id="en_tete">
<h1>Les chantiers de l'Atlantique</h1>
</div>
<div id="menus">

<ul id="menu">
<li><a href="file:///J:/projet%20chantier/projet%20web/web2/actu.htm">Atualités</a></li>
<li><a href="">Historique</a>
<ul>
<li><a href="file:///F:/projet%20chantier/projet%20web/Untitled-2.htm">photos</a></li>
</ul>
</li>
<li>
<a href="file:///I:/projet%20chantier/projet%20web/web2/Untitled-2.htm">Concepetion d'un bateau</a>
<ul>
<li><a href="file:///I:/projet%20chantier/projet%20web/web2/Untitled-2.htm">photos</a></li>
</ul>
</li>
<li>
<a href="">Les différents bateaux construits</a>
<ul>
<li><a href="file:///F:/projet%20chantier/projet%20web/Untitled-2.htm">photos</a></li>
</ul>
</li>
<li><a href="file:///J:/projet%20chantier/projet%20web/web2/Untitled-2.htm">Queen Mary</a>
<ul>
<li><a href="file:///J:/projet%20chantier/projet%20web/web2/photoqueen.htm">photos et video</a></li>
</ul>
<ul>
<li><a href="file:///J:/projet%20chantier/projet%20web/web2/photoqueen.htm">photos et video</a></li>
</ul>

<li><a href="">Plan</a></li>
<li><a href="">Visite</a></li>
</ul>

</div>
<div id="corps">
</div>
</body>
</html>

css:

body
{
background:url("zvbxjg95.gif") no repeat;
font-family:Arial;
width:90%;
margin-left:auto;
margin-right:auto;
}
li
{
color:#F7E444;
}
a
{
color:blue;
}
a:hover
{
color:red;
}
h1
{
color:#0099FF;
font-size:24px;
text-align:center;
padding-top:25px;
}


/*-----------------------définition stle des blocs----------------*/
/*--------------------style div en-tête------------------*/

#en_tete
{
font-family:lucida handwriting;
background-image:url("juju.bmp");
height:150px;
z-index:1;

}

/*---------------------------style menus----------------------*/

#menus
{
width:20%;
float:left;
margin-left:-5px;
margin-top:50px;
}


/*----------------------style corps--------------------------------*/
#corps
{
margin-left:22.5%;
margin-top:50px;
padding:20px;
color:black;
background-image:url("chnaties.jpg");
background-repeat:no-repeat;
height:500px;
}


/*----------------style pied de page-----------------------*/

#menu, #menu ul /* Liste */
{
padding : 0;
margin : 0;
list-style : none;
line-height : 30px;
text-align : center;
}

#menu /* Ensemble du menu */
{
font-weight : bold;
font-family : Arial;
font-size : 12px;
}

#menu a /* Contenu des listes */
{
display : block;
padding : 0;
background : #000;
color : #fff;
text-decoration : none;
width : 144px;
}

#menu li /* Elements des listes */
{
float : left;
border-right : 1px solid #fff;
}

html>body #menu li
{
border-right: 1px solid transparent ;
}

#menu li ul /* Sous-listes */
{
position: absolute;
width: 144px;
left: -999em;
}


#menu li ul li /* Éléments de sous-listes */
{
border-top : 1px solid #fff;
position: absolute;
top: -30px;
left: 144px;
}

html>body #menu li ul li
{
border-top : 1px solid transparent;
}

#menu li ul ul
{

border-left : 1px solid #fff ;
}


html>body #menu li ul ul
{
border-left : 1px solid transparent ;
}
#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #000;
background: #fff;
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: 2;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto;
min-height: 5;
}
[/i]
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif


ps. : EDITER n'est pas CITER, j'ai supprimer ta citation de toi même car le post devenait illisible.
Modifié par Laurie-Anne (01 Dec 2009 - 19:03)
Bonsoir,

vinc44 a écrit :
quelquun aurait til une idee de comment faire??

Oui:

1. Ne pas écrire en majuscules dans un titre de sujet.
2. Ne pas écrire PROBLEME en majuscules dans un titre de sujet. La quasi-totalité des sujets sur ce forum parlent d'un problème, pas besoin de le crier.
3. Prendre en compte les remarques des modérateurs quant à la mise en forme (et donc la lisibilité) de tes messages.

C'était la réponse à «comment faire pour accroitre mes chances d'être lu par des personnes susceptibles de m'aider?» Smiley cligne

Pour le «comment faire pour résoudre mon problème?», vu que le code est en l'état peu lisible et que quoi qu'il en soit un flot de code est rarement aisé à examiner directement, je te suggère de proposer un lien vers la page qui pose problème ou vers une page de test en ligne qui reproduit ce problème.

Bonne continuation. Smiley smile

PS: vu le code HTML (ou ce que j'en comprends), il s'agit plutôt d'un menu déroulant que d'une liste d'options. Si tu parles d'une liste d'options, on pensera plutôt à l'élément OPTION en HTML, justement, qui permet (avec SELECT) de créer des listes d'options dans les formulaires HTML.
Victor BRITO a écrit :
Sans code source, il sera difficile de t'apporter efficacement de l'aide.

Toutefois, si j'ai bien compris, tu veux regrouper les options selon une taxonomie précise. Dans ce cas, il existe un élément qui s'appelle optgroup et qui permet de regrouper les éléments option, comme suit (l'attribut label de l'élément optgroup permet de nommer le groupement d'options) :
<select id="club" name="club">
  <optgroup label="Ligue 1">
    <option>Bordeaux</option>
    <option>Lyon</option>
  </optgroup>
  <optgroup label="Ligue 2">
    <option>Nantes</option>
  </optgroup>
</select>

Bonjour, tu n'as pas réagi à la proposition de Victor...
Cela ne te convient pas ?
As-tu essayé ?
Arrives-tu à prendre en compte les messages des autres intervenants ?

Merci

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http;//www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml.lang="fr">
<head>
	<title>site des chantiers</title>
	<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
	<link rel="stylesheet" media="screen" type="text/css"  href="chantiers.css" />
	<script type="text/javascript">
	<!--
	sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
	}
	-->
	</script>
if (window.attachEvent) window.attachEvent("onload", sfHover);

</head>

<body bgcolor=black>

<div id="en_tete">
	<h1>Les chantiers de l'Atlantique</h1>
</div>
<div id="menus">

	<ul id="menu">
		<li><a href="file:///J:/projet%20chantier/projet%20web/web2/actu.htm">Atualités</a></li>
		<li><a href="">Historique</a>
			<ul>
				<li><a href="file:///F:/projet%20chantier/projet%20web/Untitled-2.htm">photos</a></li>
			</ul>
		</li>
		<li>
		<a href="file:///I:/projet%20chantier/projet%20web/web2/Untitled-2.htm">Concepetion d'un bateau</a>
			<ul>
				<li><a href="file:///I:/projet%20chantier/projet%20web/web2/Untitled-2.htm">photos</a></li>
			</ul>
		</li>
		<li>
			<a href="">Les différents bateaux construits</a>
			<ul>
				<li><a href="file:///F:/projet%20chantier/projet%20web/Untitled-2.htm">photos</a></li>
			</ul>
		</li>
		<li><a href="file:///J:/projet%20chantier/projet%20web/web2/Untitled-2.htm">Queen Mary</a>
			<ul>
				<li><a href="file:///J:/projet%20chantier/projet%20web/web2/photoqueen.htm">photos et video</a></li>
			</ul>
			<ul>
				<li><a href="file:///J:/projet%20chantier/projet%20web/web2/photoqueen.htm">photos et video</a></li>
			</ul>
			
	<li><a href="">Plan</a></li>
	<li><a href="">Visite</a></li>
	</ul>

</div>
<div id="corps">
</div>
</body>
</html>


body
{
	font-family:Arial;
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
li
{
	color:#F7E444;
}
a
{
	color:blue;	
}
a:hover
{
	color:red;
}
h1
{
	color:#0099FF;
	font-size:24px;
	text-align:center;
	padding-top:25px;
}


/*-----------------------définition stle des blocs----------------*/
/*--------------------style div en-tête------------------*/

#en_tete
{
    font-family:lucida handwriting;
    background-image:url("juju.bmp");
	height:150px;
	z-index:1;
	
}

/*---------------------------style menus----------------------*/

#menus
{
	width:20%;
	float:left;
	margin-left:-5px;
	margin-top:50px;	
}


/*----------------------style corps--------------------------------*/
#corps
{
	margin-left:22.5%;
	margin-top:50px;
	padding:20px;
	color:black;
	background-image:url("chnaties.jpg");
	background-repeat:no-repeat;
	height:500px;
}


/*----------------style pied de page-----------------------*/

#menu, #menu ul /* Liste */     
{
        padding : 0; 
        margin : 0; 
        list-style : none; 
        line-height : 30px; 
        text-align : center; 
}

#menu /* Ensemble du menu */
{
        font-weight : bold; 
        font-family : Arial;
        font-size : 12px; 
}

#menu a /* Contenu des listes */
{
        display : block; 
        padding : 0; 
        background : #000;       
        color : #fff; 
        text-decoration : none; 
        width : 144px; 
}

#menu li /* Elements des listes */      
{ 
        float : left;
        border-right : 1px solid #fff; 
}

html>body #menu li
{
        border-right: 1px solid transparent ; 
}

#menu li ul /* Sous-listes */
{ 
        position: absolute; 
        width: 144px; 
        left: -999em; 
}


#menu li ul li /* Éléments de sous-listes */
{
        border-top : 1px solid #fff; 
		position: absolute;
        top: -30px;
        left: 144px; 
}

html>body #menu li ul li                
{
        border-top : 1px solid transparent;
}

#menu li ul ul 
{
        
        border-left     : 1px solid #fff ;    
}


html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; 
}
#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #000; 
        background: #fff; 
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: 2; 
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; 
        min-height: 5; 
}
[/i][/i]
voila mon code css et html
et je n'arrive pas a avoir le deuxieme element de queen mary , photo et videos dans mon menu deroulant
Sujet clos
Aller à