28220 sujets

CSS et mise en forme, CSS3

[résolu] Positionnement d'une liste déroulante dans un div

Bonsoir !

Je reviens à la charge avec une question plus précise cette fois.
Je ne parviens pas à positionner ma liste déroulante correctement. Je souhaite la placer complètement à droite dans le le div pagination.

Merci de votre aide !


<!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" lang="fr" xml:lang="fr">
<head>
  <title>Test Classe cl_pagination</title>
	<style type="text/css">
		/* Conteneur de tout les éléments de la barre de navitation */
		.pagination {
			background-color: #2760A0;
			white-space: nowrap;
			border: 1px solid #000;
			padding: 2px;
			
		}
		
		/* Présentation du bloc Page 1 sur 10 */
		.reponse {
			float: left;
			background-color: #2760A0;
			font-weight: bolder;
			color: #ffffff;
			margin-right: 10px;
		}
		
		/* Présentation de la liste déroulante */ 
		.combo {
			
			font-weight: bolder;
			color: #ffffff;
		}
		
		/* Présentation du bloc contenant les liens << < 1 2 3 4 > >> */
		.numerotation {
			background-color: #2760A0;
			
		}
		
		.numerotation a {
			font-weight: bolder;
			text-decoration: none;
			color: #ffffff;
			background-color: #2760A0;
			border: 1px solid #F0F24E;
			padding-left: 2px;
			padding-right: 2px;
		}
		
		.numerotation a:hover {
			background-color: #3D6CE3;
			color: #000;
			text-decoration: none;
		}
		
		.numerotation a:visited {
			color: #000;
			text-decoration: none;
		}
		
		.numerotation a:active {
			color: #000;
			text-decoration: none;
		}

	</style>
</head>
<body>
<div class="pagination">
	<div class="reponse">
		Page 9 sur 10
	</div>

<div class="numerotation">
<a href="index.php?nbDebut=0" title="page &lt;&lt;">&lt;&lt;</a>&middot;
<a href="index.php?nbDebut=21" title="page &lt;">&lt;</a>&middot;
<a href="/AffichageParPage/index.php?nbDebut=12" title="page 5">5</a>
<a href="/AffichageParPage/index.php?nbDebut=15" title="page 6">6</a>
<a href="/AffichageParPage/index.php?nbDebut=18" title="page 7">7</a>
<a href="/AffichageParPage/index.php?nbDebut=21" title="page 8">8</a>
<a href="#" title="Page 9">9</a>
&middot;<a href="index.php?nbDebut=27" title="page &gt;">&gt;</a>
&middot;<a href="index.php?nbDebut=27" title="page &gt;&gt;">&gt;&gt;</a></div>
	<div class="combo"> <!-- code de la liste -->

		Page : <select size="1" name="combo_page" onChange="window.location.href = '/AffichageParPage/index.php?nbDebut=' + this.value;">
			<option value="0">1</option>
			<option value="3">2</option>
			<option value="6">3</option>
			<option value="9">4</option>
			<option value="12">5</option>

			<option value="15">6</option>
			<option value="18">7</option>
			<option value="21">8</option>
			<option value="24">9</option>
			<option value="27">10</option>
		</select>

</div>

</div>
<ul>
	<li>26 - v</li>
	<li>27 - b</li>
	<li>28 - n</li>
</ul>
<div class="pagination">
	<div class="reponse">

		Page 9 sur 10
	</div>
<div class="numerotation">
<a href="index.php?nbDebut=0" title="page &lt;&lt;">&lt;&lt;</a>&middot;
<a href="index.php?nbDebut=21" title="page &lt;">&lt;</a>&middot;
<a href="/AffichageParPage/index.php?nbDebut=12" title="page 5">5</a>
<a href="/AffichageParPage/index.php?nbDebut=15" title="page 6">6</a>
<a href="/AffichageParPage/index.php?nbDebut=18" title="page 7">7</a>
<a href="/AffichageParPage/index.php?nbDebut=21" title="page 8">8</a>
<a href="#" title="Page 9">9</a>
&middot;<a href="index.php?nbDebut=27" title="page &gt;">&gt;</a>

&middot;<a href="index.php?nbDebut=27" title="page &gt;&gt;">&gt;&gt;</a></div>
	<div class="combo">
		Page : <select size="1" name="combo_page" onChange="window.location.href = '/AffichageParPage/index.php?nbDebut=' + this.value;">
			<option value="0">1</option>
			<option value="3">2</option>
			<option value="6">3</option>
			<option value="9">4</option>

			<option value="12">5</option>
			<option value="15">6</option>
			<option value="18">7</option>
			<option value="21">8</option>
			<option value="24">9</option>
			<option value="27">10</option>

		</select>
     </div>

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

Modifié par exotux (28 Sep 2005 - 15:28)
Par exemple :
CSS
.combo select{
float:right;
}
.combo p{
width:50px
}

HTML
<div class="combo">
<select size="1" name="combo_page" >
<option value="0">1</option>
</select>
<p>Page :</p> 
</div>
Administrateur
exotux a écrit :
Je reviens à la charge avec une question plus précise cette fois.

Hello,

La question est peut-être pécise, mais le titre ne l'est pas du tout malheureusement.
Or dans ce forum, la grande majorité des sujets sont des "problèmes de mise en page".
Pourrais-tu modifier ton titre et de le rendre un peu plus explicite comme cela est demandé dans les règles ?
Merci d'avance Smiley smile
Merci d'avoir répondu Smiley smile

J'ai modifié le titre du post suite à vos remarques.

Pour l'heure, la solution proposée par Xavier ne fonctionne pas. Comme vous pouvez le constater ci-dessous. Il doit y avoir une subtilité ou une énorme erreur dans mon code...

upload/1377-capt.png

J'avais déjà pensé au float: rignt; mais je ne comprend pas pourquoi mon <select> sort du <div> conteneur.

J'ai déjà un float left, dans ce div peut que cela vient de là ?

Merci encore de votre aide
Modifié par exotux (27 Sep 2005 - 18:11)
1/ je ne crois pas que la copie d'écran que tu présentes corresponde au code que je que proposais, ni à celui que tu listais dans ton premier post (sinon il y aurait au moins l'expression "page :" sur l'image non ?)

2/ peut-être devrais-tu être plus clair dans l'expression de ton besoin ?
Effectivement tu as raisons. J'ai essayé de simplifier au maximum pour éviter des interférences. J'ai testé ta solution sur le script que j'ai fourni précédement sans succès.

Je place ci-dessous le code le plus simplifié possible afin de mieux déceler mon problème.

L'objectif est d'obtenir tout sur un seule ligne comme le montre ma capture précédente et d'aligner à droite la liste déroulante. Actuellement elle est a droite mais elle sort du div, elle plus basse.

J'espère que je suis assez clair.

Merci de m'accorder un peu de ton temps.


<html>
<head>
  <title>Test Classe cl_pagination</title>
	<style type="text/css">
		/* Conteneur de tout les éléments de la barre de navitation */
		.pagination {
			background-color: #2760A0;
			white-space: nowrap;
			border: 1px solid #000;
			padding: 2px;
			
		}
		
		/* Présentation du bloc Page 1 sur 10 */
		.reponse {
			float: left;
			background-color: #2760A0;
			font-weight: bolder;
			color: #ffffff;
			margin-right: 10px;
		}
		
		/* Présentation de la liste déroulante */
		.combo select {
			float:right;
		}

		
		
		/* Présentation du bloc contenant les liens << < 1 2 3 4 > >> */
		.numerotation {
			background-color: #2760A0;
			
		}
		

	</style>
</head>
<body>
<div class="pagination">
	<div class="reponse">

		Page 1 sur 10
	</div>
	<div class="numerotation">
		<<·
		<·
		<a href="#" title="Page 1">1</a>
		·<a href="index.php?nbDebut=3" title="page &gt;">></a>
		·<a href="index.php?nbDebut=27" title="page &gt;&gt;">>></a>
	</div>
	<div class="combo">
		<select size="1" name="combo_page" onChange="#">
			<option value="0">1</option>
			<option value="3">2</option>
			<option value="6">3</option>
		</select>
	</div>
</div>
<ul>
	<li>1 - a</li>
	<li>3 - e</li>
	<li>4 - r</li>
</ul>


</body>
</html>

Modifié par exotux (27 Sep 2005 - 18:34)
D'après ton code :
<style type="text/css">
/* Conteneur de tout les éléments de la barre de navitation */
.pagination {
background-color: #2760A0;
white-space: nowrap;
border: 1px solid #000;
padding: 2px;
}

/* Présentation du bloc Page 1 sur 10 */
.reponse {
font-weight: bolder;
color: #ffffff;
margin-right: 10px;
}

/* Présentation de la liste déroulante */
.combo select {
float:right;
}

/* Présentation du bloc contenant les liens << < 1 2 3 4 > >> */
.numerotation {
}
</style>

<body>
<div class="pagination">
<div class="combo">
<select size="1" name="combo_page" onChange="#">
<option value="0">1</option>
<option value="3">2</option>
<option value="6">3</option>
</select>
</div>
<div >
<span class="reponse">Page 1 sur 10</span>
<span class="numerotation">
<<·
<·
<a href="#" title="Page 1">1</a>
·<a href="index.php?nbDebut=3" title="page &gt;">></a>
·<a href="index.php?nbDebut=27" title="page &gt;&gt;">>></a>
</span>
</div>
</div>
<ul>
<li>1 - a</li>
<li>3 - e</li>
<li>4 - r</li>
</ul>
</body>
salut

Merci de ta réponse. maintenant cela fonctionne.

Je vois que tu as ramplacé mes div par des span. Je sais que le premier est de type bloc et le second de type inline. Le problème venait de là donc.

J'avoue cependant ne pas trop comprendre la subtilité pour leurs différences d'interprétation du positionnement.

Merci bcp en tout cas
a écrit :
Je vois que tu as ramplacé mes div par des span. Je sais que le premier est de type bloc et le second de type inline. Le problème venait de là donc.
Non le problème n'était pas là spécialement. Mais comme tu as plusieurs informations à mettre sur la même ligne autant les mettre dans des éléments inline. On pourrait très bien conserver tes div et les mettre en display : inline, ou encore utiliser comme tu l'avais fait une div flottante à gauche (type modèle 3 colonnes). J'ai juste essayé localement de simplifier en restant logique.
OK, je vais aller re-regarder les tutos de positionnement. Je galère un peu je trouve quand même.

Merci beaucoup !
Sujet clos
Aller à