Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1472 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Barre de recherche HTML/CSS

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Barre de recherche HTML/CSS

n°2221860
Profil sup​primé
Posté le 08-03-2014 à 10:01:29  answer
 

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 :
 
http://img15.hostingpics.net/pics/511598image2.png
 
 
J'en suis là :
 
http://img15.hostingpics.net/pics/931337image.png
 
Please ne me traitez pas de fou ou noob si le code (ou du moins tentaive de code) est naze :o
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 :
  1. <div id="searchbar">
  2.                
  3.                         <h1>What would you like to search?</h1>
  4.                 <form action="" class="formulaire">
  5.                  <input class="champ" type="text" value="Search...)"/>
  6.                     <input class="bouton" type="button" value=" " />
  7.                    
  8.                 </form>
  9.                 </div>


 
 
Le CSS :
 

Code :
  1. #searchbar     {position:relative; width:1040px; height:auto;}
  2. .formulaire                     {display:inline-block;}
  3. .formulaire .champ           {width:600px; height:35px;}
  4. .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 :o, 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 :o
 
Si quelqu'un a des suggestions, tacles :o


Message édité par Profil supprimé le 08-03-2014 à 13:52:38
mood
Publicité
Posté le 08-03-2014 à 10:01:29  profilanswer
 

n°2222194
amateurduw​eb
Posté le 13-03-2014 à 02:25:57  profilanswer
 

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 :
  1. <form action="" class="formulaire">
  2.                le texte ici  <input class="champ" type="text" value="Search...)"/>
  3.                     <input class="bouton" type="button" value=" " />
  4. </form>


---------------
www.samomoi.com : Cours et astuces informatiques, électronique et télécoms  
n°2222195
gatsu35
Blablaté par Harko
Posté le 13-03-2014 à 05:25:54  profilanswer
 

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 :
  1. <form action="" class="formulaire">
  2.                le texte ici  <input class="champ" type="text" value="Search...)"/>
  3.                     <input class="bouton" type="button" value=" " />
  4. </form>



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

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


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

Aller à :
Ajouter une réponse
  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/indexeurCréer une page web html avec zone pour laisser un commantaire
notepad++ coloration syntaxique smarty+htmlprobleme 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


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR