Problema immagine input type

[paperinik4]

Salve a tutti,

Ho un piccolo problema (ma che si risolve credo in 10 min per voi e per me un anno). Allora ho il seguente input:

Questo è il codice originario prima della modifica:

Cognome:<input type ="text" id="Input1" name="cognome"/><div id="controllo1"><img src="" /></div>

http://s27.postimg.org/bdeagmfmr/Cognome_originale.png


Questo è il codice modificato da me e questo è il ritultato:

Cognome: <input type ="text" id="input1" name="cognome"/>
        <div id="controllo1"><img style="float: right"  src="" /></div>

Questo è il risultato:

http://s8.postimg.org/fqcxa4d7p/Cognome_modficato.png


Come potete vedere l'icona è posizionata a dx come vorrei io. Come fare ??? Grazie.

 

[MAeSI]

Ciao, se ho capito bene, puoi provare a scriverlo così:

<div style="float: left">Cognome:
    <input type="text" id="input1" name="cognome" />
    <div style="float: right" id="controllo1">
        <img src="" />
    </div>
</div>

 

[BayLollo]

Perché non metti semplicemente l'ID e lo style al <img>?

 

[paperinik4]

E poi come le gestisco le icone visto che i campi sono di lunghezza variabile ???? Domani ti mando il codice cd da modificare. A meno che tu non hai qualche idea o esempio. Scusa ma sono ora dal cell.

 

[BayLollo]

Con il codice spiega anche ciò che vuoi fare.

 

[paperinik4]

Ok allora domani lo posto adesso sto con il cell a letto. Notte e grazie.

 

[paperinik4]

Salve a tutti,

Come promesso oggi metto il codice css che non avevo messo ieri:

codice css:

<style type="text/css">
 #intestazione{
 width:100%;
 height:100px;
 position:absolute;
 font-family: Comic Sans MS;
 top:0px;
 left:0px;
 text-align: center;
}
 #divhr {
    
position:absolute;
top: 85px;    
font-family:Comic Sans MS;
}
 #input{
 display:list-item;
 margin:20px;
}
#img{
 width:20px;
 height:20px;
 position:relative;
 bottom: 25px;
 left:230px;
}

</style>

Questa mi stampa giusto l'icona dopo il campo input a fianco come la voglio io. Però se metto un secondo campo come un illuso pensavo che mi mettesse l'icona anch'essa vicina dopo l'input invece no. Questo è come l'ho strutturato per avere il risultato del primo campo il secondo campo:

<p> <p>
      Nome: <input type ="text" id="input2" name="nome"/>
       
       <div id="controllo2"> <div style = "position: relative; bottom: 245px; padding: 205px"> <img src="" /></div> </div>     
           </p></p>

Infine inserendo il terzo campo mi visualizza la seguente cosa:

http://s27.postimg.org/g9loo8hlf/Nome_Cognome_Data_di_nascita.png

C'è un sistema che allinea tutto in automatico sfruttano un div solo ???? Sicuramente si non sono molto bravo nella programmazione lo ammetto. però cerco di provarci. Grazie spero in un vostro aiuto. Il risultato finale dovrebbe essere il seguente:

http://s23.postimg.org/yrqv5x4sr/Iscrizione.png

In pratica ad ogni campo che inserisco deve comparire quell'iconcina a fianco. Ovviamente per i campi username, password ed email ci sarà anche una "X" a seconda se ssono digitatio giusti per l'email e se lo username è già presente nel db. Grazie. Spero di aver dato informazioni a sufficienza di quello che vorrei fare.

 

[BayLollo]

Come mai ci sono così tanti riferimenti CSS ad elementi non esistenti?

 

[paperinik4]

In quel codice l'unico che funziona è "intestazione". Mi sono bloccato perchè non mi mette le icone come voglio io e non capisco il motivo. Ecco perchè ci sono tanti riferimenti non ancora utilizzati.

 

[Max 1]

Annullato!

 

[paperinik4]

Ciao Max 1,

Che significa annullato ????

 

[paperinik4]

caio MAeSI,


Hai centrato in pieno il problema e sembra andare bene la tua soluzione. Una cosa sola se metto:

<div style="float: left">

così:

<div style="float: left; padding: 5px">

per dare un leggero spazio va bene ???? O aconvolgo le cose ???

 

[paperinik4]

Ciao MAeSI,

Come volevo fare io con il paddin a 5px mi avanza l'etichetta "cognome" ecc. Vorrei capire invece come poter distanziare l'uno dall'altro. Ossia ora le etichette ch eho messo sono 3 ma tutte e trer una sotto l'altra senza spazio benchè io c'è l'abbia messo. Poi dare uno spazio di 5px all'icona così com'è affiancata. Ma semtto il padding mi scende sotto. Non so come fare Questo è com'è l'ho modificato con la distanza tra un'etichetta e l'altra che non mi da.

<div style="float: left">Cognome: <input type ="text" id="input1" name="cognome"/> 
       <div style="float: right" id="controllo1"> <img src=" " /></div> </div> 
       
       <p> <p> <p> <p>

      <div style="float: left">Nome: <input type ="text" id="input2" name="nome"/> 
       <div style="float: right" id="controllo2"> <img src=" " /></div> </div> 
           </p></p>  </p></p>
 <p> <p> 
      <div style="float: left">Data di nascita: <input type ="text" id="input3" name="nascita"/> 
       <div style="float: right" id="controllo3"> <img src=" " /></div> </div> 
           </p></p>  

   </div>

Il rìsultato è il seguente:

http://s18.postimg.org/j26cmj389/Etichette_appiccicate_l_una_con_l_altra.png

Intanto ti ringrazio della precedente soluzione.

 

[Max 1]

Ciao Max 1,

Che significa annullato ????

Semplicemente volevo rispondere poi ci ho ripensato vedendo le altre risposte e ho cancellato il post tutto qui

 

[paperinik4]

Ah ok grazie max 1 se hai qualche soluzione ben venga. Notte

 

[MAeSI]

Ciao, se non hai trovato di meglio, potresti provare una roba del genere: http://jsfiddle.net/6adk5o5y/

 

[paperinik4]

Ciao Maesi,

Appena arrivo a Roma lo provo et ti faccio sapere. Intanto come al solito grazie.

 

[cory]

più pulito è meglio
http://jsfiddle.net/se6maqs7/

 

[paperinik4]

Ciao MAeSI e cory,


Grazie dell'aiuto. mi avete risolto il problema alla grande. Ora vorrei sapere un cosniglio da voi. Ho due select una per la città e una per la provincia. come le debbo gestire ??? Nel senso con input type = "text" si mette così:

Username: <input type ="text" id="input4" name="username"/><div id="controllo4"><img src="" /></div>

E con la select (menu a tendine discesa versoil basso per intenderci ??? Come dovrei fare ???? Grazie.ad entrambi