creare dei pulsanti

BlackLake · Messaggio da **BlackLake** » 06/08/2011, 10:45

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??

Messaggio da **Micogian** » 06/08/2011, 11:57

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.

BlackLake · Messaggio da **BlackLake** » 06/08/2011, 12:33

Lo stile é prosilver, ma ha poco di originale.
A me interessava sapere almeno il codice.

Per i div intendi dire così ??

Codice: Seleziona tutto

<div>
<div></div>
<div></div>
<div></div>
</div>

E per i CSS, che codice posso mettere ??

Messaggio da **Micogian** » 06/08/2011, 15:19

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.

BlackLake · Messaggio da **BlackLake** » 06/08/2011, 17:47

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.

Immagine

Messaggio da **Micogian** » 06/08/2011, 18:03

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.

BlackLake · Messaggio da **BlackLake** » 06/08/2011, 18:05

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 !!

phpBB Italia

creare dei pulsanti

creare dei pulsanti

Re: creare dei pulsanti

Re: creare dei pulsanti

Re: creare dei pulsanti

Re: creare dei pulsanti

Re: creare dei pulsanti

Re: creare dei pulsanti

Chi c’è in linea