18041 sujets

Questions générales et questions de débutants

Aide creation menu déroulant

Salut à tous,

Après plusieurs recherche à ce sujet, et malheureusement sans avoir pu en comprendre le fonctionnement, je viens solliciter votre aide afin de réaliser un menu déroulant pour lequel je souhaiterais que les containers "B1TC et B2TC" puisse affiche en dessous le même containers:


#A {
	font-size: 11px;
}
#B1 {
	background-color: #6CF;
	color: #999;
	float: left;
	margin-top: 4px;
	margin-left: 5px;
	font-weight: bold;
}
#B1TC {
	float: left;
}
#B1T1 {
	background-color: #6CF;
	color: #999;
	float: left;
	margin-top: 4px;
	margin-right: 1px;
	font-weight: bold;
}
#B1T2 {
	background-color: #6CF;
	color: #999;
	float: left;
	margin-top: 4px;
	margin-right: 5px;
	font-weight: bold;
}
#B2 {
	background-color: #6CF;
	color: #999;
	float: left;
	margin-top: 4px;
	font-weight: bold;
}
#B2TC {
	float: left;
}
#B2T1 {
	background-color: #6CF;
	color: #999;
	float: left;
	margin-top: 4px;
	margin-right: 1px;
	font-weight: bold;
}
#B2T2 {
	background-color: #6CF;
	color: #999;
	float: left;
	margin-top: 4px;
	margin-right: 5px;
	font-weight: bold;
}
</style>
</head>

<body>
<div id="A">
  <div id="B1">LANGUE:</div>
  <div id="B1TC">
    <div id="B1T1">&nbsp;FR</div>
    <div id="B1T2"><img src="Nouvelle annonce/Fra.png" width="18" height="12" /></div>
    </div>
  <div id="B2">DEVISES:</div>
  <div id="B2TC">
    <div id="B2T1">&nbsp;EUR</div>
    <div id="B2T2"><img src="Nouvelle annonce/Fra.png" width="18" height="12" /></div>
    </div>
</div>
</body>
</html>


Merci d'avance pour vos info
Modifié par qwertz1 (23 Jul 2011 - 12:40)
Bonjour,

tu as attrapé la DIVite aigüe. cela doit pouvoir se soigner et permettra de simplifier ton CSS par la même occasion. Smiley cligne .
Tu devrais utiliser les balises ul et li (listes non ordonnées) ou les balises select / options.
Je te propose 2 codes pour le prix d'un. Sympa, non? Smiley murf 


<!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" >
<head>
<style type="text/css">
<!--
ul {
    font-size: 11px;
	background-color: #6CF;
	color: #999;
	margin-top: 4px;
	margin-left: 5px;
	font-weight: bold;
}
//-->
</style>
</head>
 <body>
   <ul>
    <li>LANGUE:</li>
	 <ul>
      <li>&nbsp;FR</li>
      <li><img src="Nouvelle annonce/Fra.png" width="18" height="12" /></li>
	 </ul>
   </ul>
   <ul>
    <li>DEVISES:</li>
     <ul>
      <li>&nbsp;EUR</li>
      <li><img src="Nouvelle annonce/Fra.png" width="18" height="12" /></li>
	 </ul>
   </ul>
 </body>
</html>




<!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" >
<head>
<style type="text/css">
<!--
select{
    font-size: 11px;
	background-color: #6CF;
	color: #999;
	margin-top: 4px;
	margin-left: 5px;
	font-weight: bold;
}
//-->
</style>
</head>
 <body>
   <select name="LANGUE:">
      <option>&nbsp;FR</option>
      <option><img src="Nouvelle annonce/Fra.png" width="18" height="12" /></option>
	
   </select>
   <select name="DEVISES:">
      <option>&nbsp;EUR</option>
      <option><img src="Nouvelle annonce/Fra.png" width="18" height="12" /></option>
   </select>
 </body>
</html>


Je ne sais pas si cela répond tout à fait à ta question, mais le code est plus simple.
Ok merci. C'est absolument pas le résultat que je recherche. Je souhaite conserver le même rendu avec les div. Donc je vais essayer d'adapter ton code au miens.
Bon j'ai plus ou moins réussi à obtenir le résultat souhaité mais...

Bien que le div que je veux faire apparaitre ("B") ce trouve à l'intérieur de "A" est-il possible de faire en sorte que ce dernier s'affiche en dessous de "B"???
oui, en le faisant sortir du flux. donc, il faut jouer avec les "position:absolute;" ou relative d'ailleurs...
Modifié par FloydinBremen (24 Jul 2011 - 18:56)
Sujet clos
Aller à