Décalage de ma liste déroulante

**juno88** · 01/08/2014, 12h18

Bonjour

je suis nouveau en css, coté php/html ça passe mais niveau css ...

est-ce que vous pourriez m'aider ?

But : faire une recherche en jquery qui affichera dynamiquement le nom des stars en passant par un input (genre recherche google)

voici mon problème : je souhaite que ma liste déroulante

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<li><a href="">Suzanne Boyle</a></li>
<li><a href="">Jennifer Lawrence</a></li>

soit correctement en dessous de l'input.

Comment dois-je procéder ? (Merci d'avance)

Voici le code dans son intégralité :

page html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
	<link rel="stylesheet" href="primary2.css" type="text/css">
</head>
<body>
	<form method="POST" action="">
		<span>Entrez le nom de la star :</span>
		<input type="text" id="search_user_name" value="" />
		<div id="resultat">
			<ul>
				<li><a href="">Suzanne Boyle</a></li>
				<li><a href="">Jennifer Lawrence</a></li>
			</ul>
		</div>
	</form>		
</body>
</html>

et voici ma feuille de style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#search_user_name,#resultat, ul{
	margin:0;
	padding:0;
	border:0;
	width:200px;
	line-height:1.5em;
}
 
#resultat li{
list-style-type:none;
margin:0;
padding:0;
}
 
#resultat ul li a{
color:#000;
text-decoration:none;
width:200px;
height:30px;
display:block;
text-align:center;
border:1px solid black;
}
 
#search_user_name{
border:1px solid red;
}
 
#resultat{
 
bottom:18px;
}
 
#resultat ul li a:hover{
background-color:#333;
color:#FFF;
}

**s0h3ck** · 01/08/2014, 19h31

Bonjour,

comme vous dimensionnez aux pixels, voici une solution rapide à votre problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#resultat
{
  position: relative;
  left: 164px;
  top: 0px;
}

Toutefois, votre code est un peu moche si vous me permettez... la balise span et div sont inutiles ici. La balise span peut être remplacée par la balise label. De plus, div pourrait être une balise sémantique d'HTML5, c'est-à-dire l'utilisation de la balise nav. Enfin, n'oubliez pas de spécifier l'encodage de votre page internet et l'utilisation de la balise title qui définit le titre de votre document.

Bonne journée!

(PS: J'invite les modérateurs ou autres membres à poster une réponse plus flexible.)

**juno88** · 02/08/2014, 14h01

Ok merci je teste cela ce soir , :-)
Oui cest normal que ce soit un peu brouillon et laid >_<
Jai voulu reduire au max le code en plus je suis aussi en train de me former au div css pour la creation de tableau
Vu qu avant j utilisais que des table pour la mise en forme de mes pages :-$
Moi et le design graphique cela fait 10 et c est une enorme lacune qu il faut que je comble pour ma vie professionnelle en tant que dev :-)

Bon week end :-D

Décalage de ma liste déroulante

CSS

Discussions similaires

Partager

Partager