Fede 88
10-11-2009, 16:06
EDIT
View Full Version : [css-html] fare div come input type
kurts
10-11-2009, 17:25
no, non puoi farlo.
ma cosa intendi esattamente con "trasformarle in div delle input" ??
ma cosa intendi esattamente con "trasformarle in div delle input" ??
Fede 88
10-11-2009, 17:33
Niente, ho fatto confusione io, in pratica mi servivavo delle input type trasparenti (o semi...) e pensavo non si potesse fare.
Comunque sono riuscito a risolvere parzialmente il problema, infatti così sono semitrasparenti su tutti i browser che ho provato fin ora:
<input type="text" name="username" style="width: 230px; filter:alpha(opacity=50); moz-opacity: .50; opacity: .50;" onBlur="check_user()"/>
Ora quello che devo fare è mettere un bordo solid di 1px, per sostituire il clasico bordo che da l'effetto concavo. Ho fatto in questo modo, su IE è perfetto però su Firefox mi crea dei problemi.
<input type="text" name="username" style="width: 230px; border: 1px solid; filter:alpha(opacity=50); moz-opacity: .50; opacity: .50;" onBlur="check_user()"/>
PS:
Posso creare una classe con quelle caratteristiche per assegnarla a tutte le input type?
Comunque sono riuscito a risolvere parzialmente il problema, infatti così sono semitrasparenti su tutti i browser che ho provato fin ora:
<input type="text" name="username" style="width: 230px; filter:alpha(opacity=50); moz-opacity: .50; opacity: .50;" onBlur="check_user()"/>
Ora quello che devo fare è mettere un bordo solid di 1px, per sostituire il clasico bordo che da l'effetto concavo. Ho fatto in questo modo, su IE è perfetto però su Firefox mi crea dei problemi.
<input type="text" name="username" style="width: 230px; border: 1px solid; filter:alpha(opacity=50); moz-opacity: .50; opacity: .50;" onBlur="check_user()"/>
PS:
Posso creare una classe con quelle caratteristiche per assegnarla a tutte le input type?
kurts
10-11-2009, 17:39
certo che si, una classe (o un id) puoi assegnarla senza problemi, in alternativa se le modifiche riguardano tutti gli input puoi anche non assegnare una classe
eccoti un esempio:
<style>
body{
background: #ad35f1;
}
input{
background: #235335;
border: 1px solid yellow;
margin: 50px;
padding-left: 15px;
float: right;
clear: both;
width: 100px;
height: 40px;
font-size: 30px;
}
</style>
<input type="text" name="username" style="width: 230px"/>
<input type="password" name="pass" style="width: 230px"/>
ok,ok, sorvoliamo sui colori penosi ma per il resto mi pare che sia abbastanza chiaro.
non so come mai ma quando sparo dei codici a caso escono sempre dei colori di m....
eccoti un esempio:
<style>
body{
background: #ad35f1;
}
input{
background: #235335;
border: 1px solid yellow;
margin: 50px;
padding-left: 15px;
float: right;
clear: both;
width: 100px;
height: 40px;
font-size: 30px;
}
</style>
<input type="text" name="username" style="width: 230px"/>
<input type="password" name="pass" style="width: 230px"/>
ok,ok, sorvoliamo sui colori penosi ma per il resto mi pare che sia abbastanza chiaro.
non so come mai ma quando sparo dei codici a caso escono sempre dei colori di m....
Fede 88
10-11-2009, 17:51
GIà, davero un bel abbinamento :D
A cosa serve clear: both; ?
A cosa serve clear: both; ?
kurts
10-11-2009, 17:55
l'attributo clear può avere 4 valori: left, right, both, none.
serve a dire quale lato vuoi liberare dal resto degli elementi.
in parole povere, clear: left vuol dire che a sinistra di questo elemento non vuoi niente e così via.
se ad esempio tu avessi un contenitore di larghezza 100 e due div interni di larghezza 20 ognuno normalmente andrebbero uno a fianco all'altro, con il clear puoi mandarne a capo uno.
se togli il clear dal mio esempio i due input si affiancheranno, provare per credere!
serve a dire quale lato vuoi liberare dal resto degli elementi.
in parole povere, clear: left vuol dire che a sinistra di questo elemento non vuoi niente e così via.
se ad esempio tu avessi un contenitore di larghezza 100 e due div interni di larghezza 20 ognuno normalmente andrebbero uno a fianco all'altro, con il clear puoi mandarne a capo uno.
se togli il clear dal mio esempio i due input si affiancheranno, provare per credere!
Fede 88
10-11-2009, 18:02
Una spiegazione che non fa una piega... ;)
Comunque ho visto che applicare la classe a tutti gli input come il tuo esempio non va bene nel mio caso, infatti mi applica lo stile anche hai bottoni e addirittura alle checkbox.
Per creare una classe per le div facevo in questo modo:
div.container {
...
...
...
}
Per gli input che parola devo mettere al posto di DIV?
Comunque ho visto che applicare la classe a tutti gli input come il tuo esempio non va bene nel mio caso, infatti mi applica lo stile anche hai bottoni e addirittura alle checkbox.
Per creare una classe per le div facevo in questo modo:
div.container {
...
...
...
}
Per gli input che parola devo mettere al posto di DIV?
kurts
10-11-2009, 18:11
nono, aspetta, io non ho definito nessuna classe nel mio esempio, prima avevo detto che se volevi applicare uno stile a tutti gli input potevi seguire il mio esempio.
ad ogni modo, diciamo che vuoi mettere lo sfondo blu al campo della password, ok?
<style>
.campo_password{
background-color: 0000ff;
}
</style>
<input type="password" name="pass" class="campo_password"/>
<input type="password" name="pass" class="campo_password2"/>
insomma, nel tag HTML dell'input aggiungi la voce class="qualcosa" e poi nel css (in questo caso ne ho usato uno inline per velocità) metti da qualche parte .qualcosa{attributi vari}
come vedi il campo con classe campo_password2 rimane invariato
ad ogni modo, diciamo che vuoi mettere lo sfondo blu al campo della password, ok?
<style>
.campo_password{
background-color: 0000ff;
}
</style>
<input type="password" name="pass" class="campo_password"/>
<input type="password" name="pass" class="campo_password2"/>
insomma, nel tag HTML dell'input aggiungi la voce class="qualcosa" e poi nel css (in questo caso ne ho usato uno inline per velocità) metti da qualche parte .qualcosa{attributi vari}
come vedi il campo con classe campo_password2 rimane invariato
Fede 88
10-11-2009, 18:21
Capito.
Ho creato questa classe e l'ho applicata agli input type text e password.
Però ho 2 problemi:
1. Il mio obiettivo era quello di far diventare le celle semitrasparenti, però così diventa semitrasparente. Mi spiego meglio, se metto il testo di colore nero, viene visualizzato grigio. E' possibile rendere semitrasparente l'input type ma non il testo?
2. Credo sia dovuto al cambio di carattere, però applicando quello stile alle password, quando digito la pass, al posto di visualizzare i pallini visualizza dei quadratini con dentro dei punti di domanda. Si può risolvere mantenendo il "Calibri"?
.input_reg{
background: white;
border: 1px solid black;
padding: 0px 0px 0px 5px;
float: left;
clear: none;
width: 230px;
height: 19px;
font-family: Calibri;
font-size: 16px;
filter: alpha(opacity=50);
moz-opacity: .50;
opacity: .50;
}
Ho creato questa classe e l'ho applicata agli input type text e password.
Però ho 2 problemi:
1. Il mio obiettivo era quello di far diventare le celle semitrasparenti, però così diventa semitrasparente. Mi spiego meglio, se metto il testo di colore nero, viene visualizzato grigio. E' possibile rendere semitrasparente l'input type ma non il testo?
2. Credo sia dovuto al cambio di carattere, però applicando quello stile alle password, quando digito la pass, al posto di visualizzare i pallini visualizza dei quadratini con dentro dei punti di domanda. Si può risolvere mantenendo il "Calibri"?
.input_reg{
background: white;
border: 1px solid black;
padding: 0px 0px 0px 5px;
float: left;
clear: none;
width: 230px;
height: 19px;
font-family: Calibri;
font-size: 16px;
filter: alpha(opacity=50);
moz-opacity: .50;
opacity: .50;
}
kurts
10-11-2009, 18:43
E' possibile rendere semitrasparente l'input type ma non il testo?
boh... a dire il vero non avevo mai sentito parlare di questi attributi che stai usando per le trasparenze, dal nome immagino che siano robe di FF infatti su IE non si notano differenze
2. Credo sia dovuto al cambio di carattere, però applicando quello stile alle password, quando digito la pass, al posto di visualizzare i pallini visualizza dei quadratini con dentro dei punti di domanda. Si può risolvere mantenendo il "Calibri"?
si, quello è dovuto al fatto che probabilmente questo "calibri" non ha il carattere per il pallno, però, guarda, cambiare tipo di carattere è nel 99% dei casi una cosa inutile, se uno non ha quel carattere installato sul suo sistema non lo può visualizzare quindi viene utilizzato quello di default del sistema o quello specificato nelle preferenze del browser, infatti io vedo le scritte col solito carattere
boh... a dire il vero non avevo mai sentito parlare di questi attributi che stai usando per le trasparenze, dal nome immagino che siano robe di FF infatti su IE non si notano differenze
2. Credo sia dovuto al cambio di carattere, però applicando quello stile alle password, quando digito la pass, al posto di visualizzare i pallini visualizza dei quadratini con dentro dei punti di domanda. Si può risolvere mantenendo il "Calibri"?
si, quello è dovuto al fatto che probabilmente questo "calibri" non ha il carattere per il pallno, però, guarda, cambiare tipo di carattere è nel 99% dei casi una cosa inutile, se uno non ha quel carattere installato sul suo sistema non lo può visualizzare quindi viene utilizzato quello di default del sistema o quello specificato nelle preferenze del browser, infatti io vedo le scritte col solito carattere
Fede 88
10-11-2009, 18:51
boh... a dire il vero non avevo mai sentito parlare di questi attributi che stai usando per le trasparenze, dal nome immagino che siano robe di FF infatti su IE non si notano differenze
Io su IE8 le vedo trasparenti, tu che versione hai di IE?
si, quello è dovuto al fatto che probabilmente questo "calibri" non ha il carattere per il pallno, però, guarda, cambiare tipo di carattere è nel 99% dei casi una cosa inutile, se uno non ha quel carattere installato sul suo sistema non lo può visualizzare quindi viene utilizzato quello di default del sistema o quello specificato nelle preferenze del browser, infatti io vedo le scritte col solito carattere
Ok, metto quello di default. Pensavo che calibri potesse andare bene dato che ce l'avevo di default in windows vista.
Io su IE8 le vedo trasparenti, tu che versione hai di IE?
si, quello è dovuto al fatto che probabilmente questo "calibri" non ha il carattere per il pallno, però, guarda, cambiare tipo di carattere è nel 99% dei casi una cosa inutile, se uno non ha quel carattere installato sul suo sistema non lo può visualizzare quindi viene utilizzato quello di default del sistema o quello specificato nelle preferenze del browser, infatti io vedo le scritte col solito carattere
Ok, metto quello di default. Pensavo che calibri potesse andare bene dato che ce l'avevo di default in windows vista.
kurts
10-11-2009, 20:20
Io su IE8 le vedo trasparenti, tu che versione hai di IE?
umh... lemme check
ah, ecco: 7.0.5730.13
umh... lemme check
ah, ecco: 7.0.5730.13
Fede 88
10-11-2009, 20:40
Quindi direi che circa il 50% degli utenti non la supportano dato che se non la supporta il 7 non la supporterà anche il 6...
Comunque non è un problema, chi può le vedrà in trasparenza chi no le vedrà normali.
Comunque non è un problema, chi può le vedrà in trasparenza chi no le vedrà normali.
vhost87
10-11-2009, 20:52
Quindi direi che circa il 50% degli utenti non la supportano dato che se non la supporta il 7 non la supporterà anche il 6...
Comunque non è un problema, chi può le vedrà in trasparenza chi no le vedrà normali.
La trasparenza la vede solo Firefox 2.x, IE 8 e Safari 3.x mi pare :)
Comunque non è un problema, chi può le vedrà in trasparenza chi no le vedrà normali.
La trasparenza la vede solo Firefox 2.x, IE 8 e Safari 3.x mi pare :)
Fede 88
10-11-2009, 21:30
Grazie per l'info...
Per caso sai se è possibile applicare la trasparenza solo alla cella e non alla scritta contenuta in essa?
Per caso sai se è possibile applicare la trasparenza solo alla cella e non alla scritta contenuta in essa?
kurts
10-11-2009, 21:49
se dai alla cella di input un "background: transparent;" la scritta non viene influenzata, l'effetto è supportato da tutti i browser, il problema di questo metodo è che non hai l'efffetto di trasparenza al 50% come vuoi tu ma al 100%
in alternativa puoi mettere una bella immagine di sfondo semi-trasparente così isolvi tutto
:mc:
in alternativa puoi mettere una bella immagine di sfondo semi-trasparente così isolvi tutto
:mc:
Fede 88
10-11-2009, 22:12
Hai ragione, così eliminerei anche il problema di IE6-7, giusto?
Fede 88
11-11-2009, 08:41
Ho provato a fare come mi hai consigliato, però anche se metto un immagine semitrasparente viene visualizzata come se fosse un immagine normale non trasparente.
E' normale?
E' normale?
kurts
11-11-2009, 18:17
E' normale?
no, non è normale, io ho fatto una pagina di prova e la vedo perfettamente sia con FF che con IE
te la allego così provi anche tu
no, non è normale, io ho fatto una pagina di prova e la vedo perfettamente sia con FF che con IE
te la allego così provi anche tu
Fede 88
11-11-2009, 19:27
Può essere dovuto al fatto che io ho usato una PNG tutta colorata però con trasparenza al 50%? Anche se mi sembra strano...
Faccio qualche prova e ti faccio sapere.
Faccio qualche prova e ti faccio sapere.
Fede 88
11-11-2009, 19:31
Non funzionava perchè non usavo il comando: background: transparent;
Il fatto è che però così mettendo uno sfondo bianco di 1x1pixel con trasparenza al 50% mi vede lo sfondo completamente trasparente.
Con quel comando vede solo o completamente trasparente oppure solido?
Il fatto è che però così mettendo uno sfondo bianco di 1x1pixel con trasparenza al 50% mi vede lo sfondo completamente trasparente.
Con quel comando vede solo o completamente trasparente oppure solido?
kurts
11-11-2009, 20:17
Il fatto è che però così mettendo uno sfondo bianco di 1x1pixel con trasparenza al 50% mi vede lo sfondo completamente trasparente.
umh... non capisco, come fa un pixel ad essere semitrasparente?
un pixel o è trasparente oppure no, unimmagine può essere semitrasparente.
Con quel comando vede solo o completamente trasparente oppure solido?
'attributo "background-color: transparent" serve per dire che quell'elemento (in div, un input o qualunque altra cosa) non deve assumere il suo colore di sfondo standard, in questo caso una finestra di input dovrebbe essere bianca, con "transparent" gli dici che la vuoi trasparente.
a questo punto gli piazzi anche una bella immagine di sfondo (la png inclusa nello zip) che serve a dare l'effetto di semitrasparenza.
la png come vedi è una 3x3px fatta in questo modo:
XOO
OXO
OOX
dove le O simboleggiano un pixel trasparente mentre le X uno nero.
questo più o meno dovrebbe servire a creare una trasparenza del 33%
se vuoi una trasparenza del 50% prova con un'immagine di 2x2px così:
OX
XO
non so se sono stato chiaro, in caso chiedi
umh... non capisco, come fa un pixel ad essere semitrasparente?
un pixel o è trasparente oppure no, unimmagine può essere semitrasparente.
Con quel comando vede solo o completamente trasparente oppure solido?
'attributo "background-color: transparent" serve per dire che quell'elemento (in div, un input o qualunque altra cosa) non deve assumere il suo colore di sfondo standard, in questo caso una finestra di input dovrebbe essere bianca, con "transparent" gli dici che la vuoi trasparente.
a questo punto gli piazzi anche una bella immagine di sfondo (la png inclusa nello zip) che serve a dare l'effetto di semitrasparenza.
la png come vedi è una 3x3px fatta in questo modo:
XOO
OXO
OOX
dove le O simboleggiano un pixel trasparente mentre le X uno nero.
questo più o meno dovrebbe servire a creare una trasparenza del 33%
se vuoi una trasparenza del 50% prova con un'immagine di 2x2px così:
OX
XO
non so se sono stato chiaro, in caso chiedi
Fede 88
11-11-2009, 20:24
A ok non avevo capito bene, pensavo si potesse mettere un immagine semitrasparente.
Fatto sta che non capico perchè non debba vederla come un immagine semitrasparente. Alla fine le PNG semitrasparenti ci sono e si possono creare, quindi in linea teoria se io togliessi lo sfondo alla form e gli mettessi di sfondo un immagine semitrasparente dovrebbe fare come dico io. Però non lo fa...
Fatto sta che non capico perchè non debba vederla come un immagine semitrasparente. Alla fine le PNG semitrasparenti ci sono e si possono creare, quindi in linea teoria se io togliessi lo sfondo alla form e gli mettessi di sfondo un immagine semitrasparente dovrebbe fare come dico io. Però non lo fa...
kurts
11-11-2009, 20:30
ma si, le immagini semitrasparenti esistono certo, ma se tu la guardi pixel per pixel noterai che ognuno di essi può essere solido oppure trasparente, creando una maglia di pixel trasparenti e non trasparenti si ottiene l'effetto che vuoi.
puoi farmi vedere l'immagine semitrasparente che cerchi di mettere come sfondo?
puoi farmi vedere l'immagine semitrasparente che cerchi di mettere come sfondo?
Fede 88
11-11-2009, 20:38
Nello zip allegato c'è il file che voglio metter edi sfondo (tras50.png), è un immagine png bianca 1x1pixel con tras 50%.
Mentre se apri il file html vedrai quello che intendo con immagine semi-trasparente.
Mentre se apri il file html vedrai quello che intendo con immagine semi-trasparente.
kurts
11-11-2009, 21:40
Nello zip allegato...
:mbe: :confused: quale?
:mbe: :confused: quale?
Fede 88
11-11-2009, 22:01
A ok non me l'ha caricato perchè occupava troppo...
Comunque l'immagine che voglio mettere di sfondo è tras50.png
Comunque l'immagine che voglio mettere di sfondo è tras50.png
Fede 88
11-11-2009, 22:06
Questa è l'immagine di sfondo del esempio che volevo farti vedere...
e questo è il codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Senza nome 1</title>
<style type="text/css">
.style1 {
text-align: center;
}
</style>
</head>
<body style="background-image: url('grey029.jpg')">
<br/><br/><br/><br/>
<center><img alt="" src="1.png" width="480" height="273" /></center>
</body>
</html>
e questo è il codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Senza nome 1</title>
<style type="text/css">
.style1 {
text-align: center;
}
</style>
</head>
<body style="background-image: url('grey029.jpg')">
<br/><br/><br/><br/>
<center><img alt="" src="1.png" width="480" height="273" /></center>
</body>
</html>
Fede 88
11-11-2009, 22:08
E questa è l'immagine trasparente...
Ho fatto più risposte perchè non me li faceva mettere tutti in una.
Ho fatto più risposte perchè non me li faceva mettere tutti in una.
kurts
11-11-2009, 22:15
ok, e tu vuoipiazzare un input traparente sopra a quell'immagine?
Fede 88
11-11-2009, 22:22
Se proprio non si può fare altrimenti anche quella è un'idea.
Il fatto è che non capisco perchè un immaigne può essere così e venir visualizzata con l'img scr, però se la metto come background a una input text non viene visualizzata in quel modo.
Il fatto è che non capisco perchè un immaigne può essere così e venir visualizzata con l'img scr, però se la metto come background a una input text non viene visualizzata in quel modo.
Fede 88
11-11-2009, 22:24
Ok, devo essere impazzito io... ho provato con un altra immagine semitrasparente e sembra funzionare. :mbe:
vBulletin® v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.