Barre de recherche HTML/CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Barre de recherche HTML/CSS

Profil supprimé

Messieurs Dames [:super citron]

J'essaie de faire mon site e-commerce (enfin faire le "template html" puis l'intégrer à Wordpress), je n'y connais presque rien en la matière et je viens de tomber sur un problème.

J'ai fait mon menu, et en dessous je souhaiterais faire une barre de recherche comme sur mon fichier psd :

J'en suis là :

Please ne me traitez pas de fou ou noob si le code (ou du moins tentaive de code) est naze
J'essaie avec des tutos etc..mais dès que ça se complique un peu, je suis perdu. [:hish:4]

Le code html pour la barre :

Code :

<div id="searchbar">
<h1>What would you like to search?</h1>
<form action="" class="formulaire">
<input class="champ" type="text" value="Search...)"/>
<input class="bouton" type="button" value=" " />
</form>
</div>

Le CSS :

Code :

#searchbar {position:relative; width:1040px; height:auto;}
.formulaire {display:inline-block;}
.formulaire .champ {width:600px; height:35px;}
.formulaire .bouton { background-image: url(images/searchbar_button.png);background-repeat: no-repeat;width: 35px;height: 35px;padding: 0; }

Ce que je n'arrive pas à faire :

Aligner le formulaire à la droite du texte
Forcer le formulaire à faire 35 pixels de haut et 600 de large. J'ai mis les trucs..mais ça marche pas , j'ai pas du les mettre comme il faut..
Supprimer les "effets" liés au bouton. J'aimerais virer les ombres et autres trucs pour avoir un bouton Flat.
Coller la barre blanche et le carré bleu.

Je suis pas certain que le h1 soit la bonne technique pour mettre mon texte d'ailleurs

Si quelqu'un a des suggestions, tacles

Message édité par Profil supprimé le 08-03-2014 à 13:52:38

Publicité

amateurduweb

Tu as deux solutions:
1. utilisation des div
<div> texte</div>
<div> formulaire</div>
Après, en utilisant le css, tu alignes les deux div comme tu veux.
2. tu place le texte à cote de l'input

Code :

<form action="" class="formulaire">
le texte ici <input class="champ" type="text" value="Search...)"/>
<input class="bouton" type="button" value=" " />
</form>

Message cité 1 fois

---------------
www.samomoi.com : Cours et astuces informatiques, électronique et télécoms

gatsu35

Blablaté par Harko

amateurduweb a écrit :

Tu as deux solutions:
1. utilisation des div
<div> texte</div>
<div> formulaire</div>
Après, en utilisant le css, tu alignes les deux div comme tu veux.
2. tu place le texte à cote de l'input

Code :

<form action="" class="formulaire">
le texte ici <input class="champ" type="text" value="Search...)"/>
<input class="bouton" type="button" value=" " />
</form>

et le <label> c'est pour les chiens ?

Code :

<form action="" class="formulaire">
<label for="monchampderecherche">le texte ici </label> <input id="monchampderecherche" class="champ" type="text" value="Search...)"/>
<input class="bouton" type="button" value=" " />
</form>

---------------
Blablaté par Harko

FORUM HardWare.fr

Programmation

HTML/CSS

Barre de recherche HTML/CSS

Sujets relatifs
[powershell] recherche global catalog [résolu]	Forum en HTML/CSS
faire son propre moteur de recherche/indexeur	Créer une page web html avec zone pour laisser un commantaire
notepad++ coloration syntaxique smarty+html	probleme CSS avec ie8
Fonction recherche [html,...et?]	Intégrer liste/boucle php dans un tableau html.
Plus de sujets relatifs à : Barre de recherche HTML/CSS

Page générée en 0.048 secondes