Sujet Précédent Sujet Suivant

Html/css: faire une belle barre de recherche

Résolu/Fermé
Html Css
lao1tseu - 17 mai 2012 à 19:19
 lao1tseu - 17 mai 2012 à 21:02
Bonjour,

J'essaye depuis hier de créer une belle barre de recherche pour un site, et ça me pose quelques problèmes, malgré toutes les recherches que j'ai pu faire sur internet:

Mon site est sur un fond bleu, et je veux faire une barre avec une petite loupe à gauche et une flèche cliquable à droite, le tout dans une forme blanche... J'ai dessiné tout ça, la barre entière et j'ai les 3 images (gauche, milieu, centre).

Maintenant pour mettre ça en application, j'ai pas mal de problèmes, j'ai essayé de tout mettre dans un tableau avec un cellspacing nul, de faire les 3 éléments du formulaire à a la suite avec soit les images en background , soit un <form> de type image(pour la droite), et j'ai toujours un problème, soit d'ajustement verticale , soit d'espace entre les images...

Je met à la fin un exemple de code sans tout ce que j'ai pu essayer, sous forme d'une ligne de tableau...

Quelqu'un aurait une idée pour avancer?
Merci d'avance!


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>
		<title>essai-recherche</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="style" href="Untitled-1.css" />
	</head>
<body>


<form method="post" id="recherche">
<table cellspacing="0" >
<tr> 

<td id="gauche"><img src="Design/recherche/gauche.jpg" /></td> 

<td id="centre" ><input name="saisie" type="text" ></td> 

<td id="droite"><img src="Design/recherche/droite.jpg" /></td>
</tr> 
</table> 
</form>

</body>
</html>


CSS: 
body{
	background-color:rgb(43,127,192);
}

#recherche{
	width:150px;
	height:29px;
}

#centre{
	height:29px;
	width:144px;
	}
#droite{
	height:29px;
	width:43px;
	}
A voir également:

3 réponses

Réponse 1 / 3
Navid_92
Messages postés
711
Date d'inscription
dimanche 7 décembre 2008
Statut
Membre
Dernière intervention
12 février 2015
 87
Modifié par Navid_92 le 17/05/2012 à 20:22
Voilà comme promis :)
Note: Si tu as des questions n'hésite pas ;)

▶ Rendu visuel
▶ Code source (css+html5)
Amicalement Navid, alias DestEN-
.::. Contributeur Sécurité Niveau Intermédiaire .::.
22

Discussions similaires

Créer une barre de recherche HTML de la longueur de la page ?
DrFreeze -
Hestia44 -

8 réponses
Code HTML barre de recherche
Edward Cullen -
eone2 -

4 réponses
comment agrandir une image en css
Lili_754 -
Lili_754 -

3 réponses
Deplacer une image avec HTML et CSS
CurSeAuthentic -
Marius -

21 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Relier une page CSS à une page HTML
SopalinSopalin -
Man -

18 réponses