Html/css: faire une belle barre de recherche
Résolu
lao1tseu
-
lao1tseu -
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:
CSS:
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:
- Faire une barre de recherche html
- Faire une barre de recherche html css - Meilleures réponses
- Barre de recherche personnalisée css - Meilleures réponses
- Comment faire une recherche à partir d'une photo - Guide
- Recherche automatique des chaînes ne fonctionne pas - Guide
- Windows 11 barre des taches a gauche - Guide
- Editeur html - Télécharger - HTML
- Je recherche une chanson - Guide
3 réponses
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 .::.
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 .::.
