Barre de recherche HTML/CSS

Marsh Posté le 08-03-2014 à 10:01:29

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

Reply

Marsh Posté le 08-03-2014 à 10:01:29

Reply

Marsh Posté le 13-03-2014 à 02:25:57

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

Reply

Marsh Posté le 13-03-2014 à 05:25:54

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

Reply

Barre de recherche HTML/CSS

Sujets relatifs:

Leave a Replay