Problema immagine input type

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
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:

Codice:
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:

Codice:
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

Utente Attivo
13 Apr 2014
71
1
8
quellidelcucuzzolo.blogspot.it
Ciao, se ho capito bene, puoi provare a scriverlo così:

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

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
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.
 

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
Salve a tutti,

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

codice css:

PHP:
<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:


Codice:
<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.
 

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
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.
 

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
caio MAeSI,


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

Codice:
<div style="float: left">

così:

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

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

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
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.

Codice:
<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.
 

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
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ì:

Codice:
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
Selenio89 problema a caricare immagine con html. dove sbaglio? HTML e CSS 25
O [PHP] problema estrazione immagine da db PHP 12
M [WordPress] [HTML] Problema immagine background respondive WordPress 21
D [HTML] Problema con Dreamweaver; 1) tabella con larghezza 100% 2) Immagine che si adatta a Div HTML e CSS 28
T [PHP] Problema resize di immagine da db PHP 16
F Ho un Problema con una immagine HTML e CSS 6
P immagine responsive problema con script jquery jQuery 0
P problema memorizzazione dati o immagine PHP 18
F Problema attivare/disattivare immagine calendario datepicker da select jQuery 1
M problema immagine di sfondo e risoluzione schermo HTML e CSS 1
S Problema con il caricamento di un'immagine su aruba Hosting 11
S Problema nell'eliminare un'immagine PHP 2
Laura99 Problema per cambiare immagine PHP 7
P Problema visualizzazione immagine da database MySQL 3
A problema con il prelevamento di una immagine su internet Sviluppo app per Android 1
F Problema opacity e z-index con immagine HTML e CSS 3
A galleria jquery: problema nel caricamento di una immagine da un'anteprima HTML e CSS 10
emanuelevt zoom immagine [piccolo problema] jQuery 4
M Problema visualizzazione immagine PHP 6
helpdesk Problema Upload non ridimensiona l'immagine PHP 4
P problema blob immagine Database 3
P problema blob database immagine PHP 46
andreas88 problema animazione immagine HTML e CSS 3
A Problema estrazione e visualizzazione immagine da database PHP 16
S Problema assegnazione immagine [era: Problema che non riesco davvero a risolvere :(] PHP 1
S Problema permessi visualizzazione immagine PHP 1
V Mappe immagine problema con le coordinate HTML e CSS 1
V Dreamweaver: problema immagine testata HTML e CSS 7
F problema visualizzazione immagine dopo compilazione form Javascript 2
P Problema lightbox - Duplicazione immagine Javascript 0
M [Firefox/CSS] Problema immagine di sfondo centrata HTML e CSS 1
LaKanka Problema percorso immagine con GD PHP 0
K Aruba problema immagine Hosting 2
P Problema apertura immagine Javascript 13
Y problema nell'upload di un'immagine PHP 7
S Problema upload immagine Classic ASP 4
L problema cion immagine PHP 1
L Problema con immagine in flash a 360 gradi Flash 20
L problema nel ridimensionare un immagine... Classic ASP 2
metalgemini Problema: non mi trova immagine x background HTML e CSS 8
A Problema refresh immagine PHP 0
I Sto progettando nuovi siti utilizzando bootstrap e devo dire funziona bene, l'unico problema e la maschera -moz- HTML e CSS 0
K Problema form update PHP 2
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
S Problema nel ciclare un json Javascript 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
K Problema Inner join PHP 1

Discussioni simili