pulsante modulo invio trasparente

[pettedemon]

Ciao a tutti!
io ho il mio form in php...
con tutti i campi con le text area

alla fine ho il mio pulsante invia...
ci devo applicare una mia immagine al pulsante... ma non riesco a capire come con gli stili css...
sapete darmi una mano ?

questo il codice htlm

<div id="campo_invia"><input name="" type="submit"  class="send_style" id="invio" title="invio" />
</div> 

questi gli stili

#campo_nome
{
	float: left;
	width: 830px;
	height: 25px;
	background-image: url(../images/registrazione/nome.png);
}

#campo_cognome
{
	float: left;
	width: 830px;
	height: 25px;
	background-image: url(../images/registrazione/cognome.png);
	margin-top: 10px;
}

#campo_indirizzo
{
	float: left;
	width: 830px;
	height: 25px;
	background-image: url(../images/registrazione/indirizzo.png);
	margin-top: 10px;
}

#campo_cap
{
	float: left;
	width: 830px;
	height: 25px;
	background-image: url(../images/registrazione/cap.png);
	margin-top: 10px;
}

#campo_citta
{
	float: left;
	width: 830px;
	height: 25px;
	background-image: url(../images/registrazione/citta.png);
	margin-top: 10px;
}

#campo_provincia
{
	float: left;
	width: 830px;
	height: 25px;
	background-image: url(../images/registrazione/provincia.png);
	margin-top: 10px;
}

#campo_mail
{
	float: left;
	width: 830px;
	height: 25px;
	background-image: url(../images/registrazione/mail.png);
	margin-top: 10px;
}

#campo_telefono
{
	float: left;
	width: 830px;
	height: 25px;
	background-image: url(../images/registrazione/telefono.png);
	margin-top: 10px;
}

#campo_nascita
{
	float: left;
	width: 830px;
	height: 25px;
	background-image: url(../images/registrazione/nascita.png);
	margin-top: 10px;
}

#campo_informativa
{
	float: left;
	width: 830px;
	height: 200px;
	background-image: url(../images/registrazione/informativa.png);
	margin-top: 10px;
}

.informativa
{

	font: 12px Arial, Helvetica, Geneva, sans-serif;
	color: #333333;
	text-align: justify;
}

.informativa a:link {
	color: #333333;
	text-decoration: none;
}
.informativa a:visited {
	color: #333333;
	text-decoration: none;
}
.informativa a:hover {
	color: #ffffff;
	text-decoration: none;
}
.informativa a:active {
	color: #333333;
	text-decoration: none;

}


#interno_informativa
{
	
	float: left;
	width: 585px;
	height: 186px;
    margin-left: 230px;
	margin-top: 7px;
	margin-right: 11px;
	margin-bottom: 7px;
	padding-right: 8px;
	overflow: auto;
	
}

#campo_invia
{
	float: left;
	width: 830px;
	height: 25px;
	background-image: url(../images/registrazione/invia.png);
	margin-top: 10px;
}


#campo_privacy
{
	float: left;
	width: 830px;
	height: 25px;
	background-image: url(../images/registrazione/privacy.png);
	margin-top: 10px;
}

.scritte_form
{
	font: 12px Arial, Helvetica, Geneva, sans-serif;
	color: #333333;
}

#check
{
	float:left;
	width:260px;
	height:25px;
}

#accetto
{
	float:left;
	width:570px;
	height:25px;
}

.scritte_accetto
{
	font: 12px Arial, Helvetica, Geneva, sans-serif;
	color: #333333;
	text-align:left;
	
    
}

[Mich_]

Usa il bottone <input type="image" ... />

Non puoi modificare l'aspetto dei bottoni, non in maniera crossbrowser per lo meno.

[pettedemon]

perfetto!
risolto!
grazie!

[pettedemon]

e se dovesse essere una cosa simile ?

vi lascio il link....




grazie!!!


contatti


io vorrei che invia diventasse pulsante.... come posso risolvere ?

grazie!!

[Mich_]

Anzitutto evita di usare nomi uguali per oggetti diversi.
A stretto rigore i nomi di name= e di id= dovrebbero stare in livelli diversi, ma ci sono browser che danno a name ed a id lo stesso significato, per cui con il tuo metodo crei sovrapposizioni pericolose.

Ed e` anche molto pericoloso usare lo sfondo per veicolare informazioni: non sempre vengono caricate le imamgini di sfondo. Il tuo codice e` assolutamente non accessibile. Inoltre se MrGoogle e colleghi si accorgono della non-semanticita` della cosa (cosa molto probabile nei motori moderni), ti sbattono in ultima pagina.

Quindi:
Le scritte nome, email, messaggio devono diventare oggetti <label>.
Gli sfondi vanno dati ad oggetti <fieldset>, ciascuno dei quali conterra` un <label> ed un <input>. Gli spazi fra i fieldset vanno gestiti tramite margini (in px)
Per la <textarea> dovrai fare un <filedset> che contiene:
- la <label>
- la <textarea>
- il bottone (ad esempio un <input type="image" ... /> )
Visto che la textarea e` molto piu` stretta del fieldset, puoi inserire il bottone dentro il filedset, e puoi posizioanrlo ad esempio mediante posizionamento assoluto.

Attenzione pero` che i posizionamenti assoluti non sono facili da gestire: molte volte portano con se` sovrapposizioni o buchi, se realizzati senza cognizione di causa.
Vedi se riesci a capire questi articoli:
I posizionamenti assoluti
Capire i posizionamenti relativi

Probabilmente nel tuo caso dovrai usare misure in em, in modo da adatatre l'area del blocco al carattere usato nel form (ricorda che il carattere non puoi deciderlo a priori: puo` sempre venir sovrascritto dal browser).