Html/css: faire une belle barre de recherche [Résolu/Fermé]

Signaler
-
 lao1tseu -
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;
	}
Afficher la suite

3 réponses

Réponse 1 / 3
Messages postés
711
Date d'inscription
dimanche 7 décembre 2008
Statut
Membre
Dernière intervention
12 février 2015
 78
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 .::.
20
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 76687 internautes nous ont dit merci ce mois-ci

Réponse 2 / 3

Merci beaucoup c'est impeccable!
Signaler
Messages postés
711
Date d'inscription
dimanche 7 décembre 2008
Statut
Membre
Dernière intervention
12 février 2015
 78
De rien, par contre enregistres les liens d'images qui sont dans le css, car c'est pas cool d'utiliser leur bande passante, et c'est mieux pour toi qu'il soit en local (plus rapide).

Passe le sujet en [Résolu] si c'est bon.
Signaler

pas de problème, j'utilise mes images^^
Réponse 3 / 3
Messages postés
711
Date d'inscription
dimanche 7 décembre 2008
Statut
Membre
Dernière intervention
12 février 2015
 78
Je vais te faire un petit code attends.
Posez votre question