Codice per barra di ricerca

di il
5 risposte

Codice per barra di ricerca

CIao, sono alle prime armi con html e css volevo mettere su una pagina che sto costruendo una barra di ricerca tipo quella di amazon ma senza le categorie, cioè che la casella di testo e il pulsante per avviare la ricerca vengono messi "attaccati" potreste aiutarmi?

5 Risposte

  • Re: Codice per barra di ricerca

    Ci sono moltissimi modi di implementarlo, una possibilità è
    
    <style type="text/css">
    
    	#search_form {
    		display:inline-block;
    		font: bold 15px Verdana,Geneva,Arial,Helvetica,sans-serif;
    		font-size:x-large;
    		color:black;
    	}
    
    	#search_form label {
    		padding : 0 15px;    
    	}
    
    	#search_form input[type="image"] {
    		display:inline-block;
    		height:35px;
    	}
    
    
    	#search_input {
    		font-size:xx-large;
    	}
    
    </style>
    
    <form id="search_form" action="/..." method="post">
    	<label>Ricerca <input id="search_input" size="30" name="keyword" /></label>
    	<input type="image" src="/my_image/search.png" />
    </form>
    
  • Re: Codice per barra di ricerca

    Non è esattamente quello che volevo oppure non riesco ad usarlo a dovere
  • Re: Codice per barra di ricerca

    Cos'è che non hai capito?,
    nell'"src" dell'immagine devi mettere l'icona dell'immagine che vuoi utilizzare per la ricerca, e nell'action l'indirizzo della risposta alla richiesta.
    Poi, come ti ho detto, ci sono 100 modi per implementare quello che hai chiesto
  • Re: Codice per barra di ricerca

    Ok, sarò più preciso, mi aiutate a farla mooolto simile a questa per favore?
    Immagine.png
    Immagine.png

    Questo invece è quello che mi stampa che è più una brutta imitazione
    Immagine.png
    Immagine.png

    La cosa principale è che nella prima immagine la casella di testo e il pulsante sono uniti mentre nella seconda sono separati e per di più non sono nemmeno allineati correttamente, non so proprio come muovermi
  • Re: Codice per barra di ricerca

    Non capisco, vuoi un aiuto o qualcuno che te lo faccia al posto tuo?
    Modifica il codice a fallo diventare quello che desideri
Devi accedere o registrarti per scrivere nel forum
5 risposte