Pagina 1 di 1
creare dei pulsanti
Inviato: 06/08/2011, 10:45
da BlackLake
Il titolo forse é un pò troppo gnerico come inizio, ma non avevo nessun'altra idea buona.
Comunque, ho un piccolo problema a livello di CSS, se sbaglio sezione ditemelo.
Ho creato con Photoshop un pulsante e l'ho spezzato in 3 parti: parte sinistra, destra e parte centrale.
Ora lo devo "assemblare" ma non so come fare.
Non so che tag utilizzare e sopratutto il codice, ho gia fatto parecchi e troppi tentativi senza nessun risultato buono... sfortunatamente.
Qualcuno sa aiutarmi ??
Sono stato abbastanza chiaro??
Re: creare dei pulsanti
Inviato: 06/08/2011, 11:57
da Micogian
Si può fare con i CSS oppure con i <div>.
Un <div> che contiene tre <div> con le relative immagini.
Dipende anche dallo stile che usi, in subsilver potresti anche usare il <table>, in prosilver i <div>.
Il principio è lo stesso che viene usato per creare i bordi arrotondati, due immagini laterali arrotondano il contenitore centrale.
Re: creare dei pulsanti
Inviato: 06/08/2011, 12:33
da BlackLake
Lo stile é prosilver, ma ha poco di originale.
A me interessava sapere almeno il codice.
Per i div intendi dire così ??
E per i CSS, che codice posso mettere ??
Re: creare dei pulsanti
Inviato: 06/08/2011, 15:19
da Micogian
Con i <div> puoi fare così:
Codice: Seleziona tutto
<div>
<div style="float: left; padding: 0;"><img src="./images/pulsante_left.jpg" ></div>
<div style="float: left; padding: 0;"><img src="./images/pulsante_center.jpg" ></div>
<div style="float: left; padding: 0;"><img src="./images/pulsante_right.jpg" ></div>
<div style="clear: both;"></div>
</div>>
Oppure:
Codice: Seleziona tutto
<div>
<div style="background: url('./images/pulsante_left.jpg') no-repeat; width: 10px; height: 100px; float:left;" ></div>
<div style="background: url('./images/pulsante_center.jpg') no-repeat; width: 100px; height: 100px; float:left;" ></div>
<div style="background: url('./images/pulsante_right.jpg') no-repeat; width: 10px; height: 100px; float:left;" ></div>
<div style="clear: both;"></div>
</div>
Con i CSS devi inserire in un file css oppure nella parte <head> del file stesso il codici seguenti:
Codice: Seleziona tutto
div.panel-right{
background: url('./images/pulsante_right.jpg') no-repeat;
width: 10px;
height: 100px;
float: left;
padding: 0 ;
}
div.panel-left{
background: url('./images/pulsante_left.jpg') no-repeat;
width: 10px;
height: 100px;
float: left;
padding: 0;
}
div.panel-center{
background: url("images/pulsante_center.jpg") no-repeat;
width: 100px ;
height: 100px;
float: left;
padding: 0;
}
mentre nella parte <body> devi inserire:
Codice: Seleziona tutto
<div>
<div class="panel-left" ></div>
<div class="panel-center" ></div>
<div class="panel-right" ></div>
<div style="clear: both;"></div>
</div>
Ovviamente devi creare le immagini ma se usi i CSS devi inserire anche le dimensioni width e height, altrimenti non funziona.
Re: creare dei pulsanti
Inviato: 06/08/2011, 17:47
da BlackLake
Ok, ho provato il primo codice e sembrava funzionare, ma appena metto dentro il testo la parte destra si stacca e rimane uno spazio bianco.
Con il secondo invece é tutto diverso, ho solo cambiato 2 dimensioni e le immagini e ora funziona.
Ho aggiunto un ulteriore tag <p> per farlo stare dove volevo io.
Ecco qui il risultato, ora mi sa che lo applico al mio stile.
Poi se mi va rilascio uno sctile tutto mio.
Re: creare dei pulsanti
Inviato: 06/08/2011, 18:03
da Micogian
Tu non avevi spiegato che il pulsante doveva contenere del testo, ma comunque si risolve tutto con i css.
Si può anche inserire una immagine sopra un'altra immagine, nella posizione voluta, come si può vedere nella testata di questo Forum.
Re: creare dei pulsanti
Inviato: 06/08/2011, 18:05
da BlackLake
Esatto.
Vabbe per il testo non é un problema grosso per fortuna.
Vado un pò ad occhio, un pò di fondo schiena e lo risolvevo.
Il problema grosso era far stare le immagini dove volevo io.
Comunque grazie mille per l'aiuto !!