Link + scritte in un'immagine

« Older   Newer »
 
  Share  
.
  1. SilverDragonfly
        +1   Top   Dislike
     
    .

    User deleted


    Questo Tutorial è stato scritto per il GimpWorld ed è di proprietà del GimpWorld e dell'utente che lo ha realizzato
    Per favore non copiate :)
    ------------------------------------


    image




    Ed ecco adesso il codice in cui andare ad inserire ogni singolo pezzo di immagine e la cella in cui andare ad inserire il testo:

    CODICE
    <table align=center cellpadding=0 cellspacing=0 width=350 height=150>

    <tr>
    <td>[IMG]LINK IMMAGINE 01[/IMG]</td>
    <td>[IMG]LINK IMMAGINE 02.[/IMG]</td>
    <td>[IMG]LINK IMMAGINE 03.[/IMG]</td>
    </tr>

    <tr>
    <td>[IMG]LINK IMMAGINE 04[/IMG]</td>
    <td align=center style="background-image:url(LINK IMMAGINE 05);"><div style="width:px;height:px; overflow:auto; >
    TESTO TESTO TESTO TESTO TESTO TESTO
    TESTO TESTO TESTO TESTO TESTO TESTO
    TESTO TESTO TESTO TESTO TESTO TESTO
    </div></td>
    <td>[IMG]LINK IMMAGINE[/IMG]</td>
    </tr>

    <tr>
    <td>[IMG]LINK IMMAGINE[/IMG]</td>
    <td>[IMG]LINK IMMAGINE[/IMG]</td>
    <td>[IMG]LINK IMMAGINE[/IMG]</td>
    </tr>

    </table>


    Le parti cui dobbiamo prestare maggiore attenzione sono le seguenti:
    CODICE
    <table align=center cellpadding=0 cellspacing=0 width=350 height=150>

    Poichè dobbiamo inserire le giuste misure della nostra immagine!
    width=larghezza
    height=altezza

    e

    CODICE
    <div style="width:px;height:px; overflow:auto; >
    Poichè dobbiamo inserire le giuste misure del riquadro in cui inserire il testo:
    width=larghezza
    height=altezza


    ------------------------------------

    Spero sia chiaro, se avete problemi dite pure ^^

    Altra cosa: potete realizzare firme personali, ma se utilizzate l'idea per creare firme simili su vostri forum vi spezzo le braccine >___<

    Edited by SilverDragonfly - 7/3/2010, 11:37
     
    .
  2.     Top   Dislike
     
    .
    Avatar

    Icons © GW ♥

    Group
    Posts
    11,410
    Wilberini
    +456

    Status
    Offline
    Wow!!!!!!!!!!!!!!! grazie silver!!!!!!!!!!!!!!!!!!! :=D: :=D: :=D: :=D: mi metto subito a lavoro!
     
    .
  3.     Top   Dislike
     
    .
    Avatar

    Icons © GW ♥

    Group
    Posts
    11,410
    Wilberini
    +456

    Status
    Offline
    Scusate il doppio post ma ecco il mio lavoretto:


    Rock 'n' roll! Music in the blood!!!!!


    .:GIMP WORLD:.




    Non mi piace assai =(
     
    .
  4. SilverDragonfly
        Top   Dislike
     
    .

    User deleted


    All'interno della tabella non puoi utilizzare l'opzione per c'entrare il testo di forumfree, perchè aggiunge uno spazio e sballa tutto :P

    Basta aggiungere
    CODICE
    align=center
    nella cella in cui inserire il testo :)

    Lo aggiungo nel codice del tutorial ^^

    Ecco qui il tuo lavoro eliminando il p align center :)


    Rock 'n' roll! Music in the blood!!!!!
    .:GIMP WORLD:.
     
    .
  5.     Top   Dislike
     
    .
    Avatar

    Icons © GW ♥

    Group
    Posts
    11,410
    Wilberini
    +456

    Status
    Offline
    oh thanks silver! ora ho capito! =) Ora mi esercito un pò :=D: :woot:
     
    .
  6. SilverDragonfly
        Top   Dislike
     
    .

    User deleted


    Comunque dopo aver postato il tutorial (ovviamente -.-) ho pensato che è possibile fare il tutto anche dividendo l'immagine in 3 pi uttosto che in nove, ed utilizzando una tabella di 3 celle XD XD

    Se avete pazienza rifaccio il tutorial :P
     
    .
  7. .Kobrax.
        Top   Dislike
     
    .

    User deleted


    ecco il mio: :=D:




    MILKSTYLE

     
    .
  8. SilverDragonfly
        Top   Dislike
     
    .

    User deleted


    E', più o meno, giusto :)
    Il meno è colpa mia, poichè ho trascurato alcuni particolari nel tutorial XD

    Ad esempio, nella cella in cui dobbiamo inserire il nostro testo dobbiamo assoluamente inserire un div.

    Cos'è il div.. non ho studiato html, quindi non vi posso dare una definizione tecnica, ma solo quello che so da esperienza.
    In questo caso il tag div crea un box virtuale in cui inserire il nostro testo (immagini, link etc)
    Il tag div è il seguente:
    CODICE
    <div> </div>


    Ad esempio, senza il tag div, nellla firma di kobrax, aggiungendo altro testo, la tabella si deforma.
    Guardate:
    SPOILER (click to view)



    MILKSTYLE
    testo testo testo testo testo testo testo testo testo testo



    Come risolvere?
    Inserendo il tag div e dando a questo tag le misure esatte del nostro riquadro (nel caso della firma di kobrax 243px larghezza, 71px altezza) ed inserendo la proprietà overflow.
    SPOILER (click to view)
    La proprietà overflow indica al browser cosa fare se il contenuto del div supera il riquadro che gli abbiamo assegnato.

    Se inseriamo overflow visible (visibile) il contenuto uscirà dal nostro riquadro
    Se inseriamo overflow hidden (nascosto) il contenuto in eccesso non verrà visualizzato
    Se inseriamo overflow scroll (scorrevole) nel nostro riquadro verranno aggiunte delle barre di scorrimento verticale e orizzontale sia che siano necessarie, sia che non lo siano.
    Se inseriamo overflow auto saranno aggiunte barre di scorrimento verticale e/o orizzontale solo quando necessarie.

    Noi quindi dobiamo prediligere l'overflow auto :)


    Oltre a questo possiamo inserire anche il carattere del font, le dimensioni, il colore:
    CODICE
    <div style="width:243px; height:71px; overflow:auto;
    font-family:Times;
    font-size:15px;
    color:#ffffff;">testo testo testo
    </div>


    Inserendo il div ecco come si presenta la firma di kobrax
    SPOILER (click to view)

    MILKSTYLE
    testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
     
    .
  9.     Top   Dislike
     
    .
    Avatar

    Icons © GW ♥

    Group
    Posts
    11,410
    Wilberini
    +456

    Status
    Offline
    silver ora ho capito!!!!! se riesco pomeriggio posto un altro outcome :=D:
     
    .
  10. SilverDragonfly
        Top   Dislike
     
    .

    User deleted


    Ok, anche se comunque dovrò rimodificare il tutorial per renderlo più semplice.
    Basterebbe infatti dividere l'immagine(e la tabella di conseguenza) in 3 e non in 9 XD
    Ad esempio:
    Le immagini delle firme di bansky sono solo 3

    image

    image

    image



    ed il codice è il seguente:

    CODICE
    <table align=center cellpadding=0 cellspacing=0 width=284 height=134>

    <tr>
    <td>[URL=http://gimpworld.forumfree.it/][IMG]http://creativesdf.altervista.org/_altervista_ht/html/firme/24/gw_01.png[/IMG][/URL]</td>
    </tr>

    <tr>
    <td align=center style="background-image:url(http://creativesdf.altervista.org/_altervista_ht/html/firme/24/gw_02.png);" width:284px><div style="width:262px;height:36px; overflow:auto; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#BA4652;">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
    [URL=http://gimpworld.forumfree.it]&#10084;<b> GIMPWORLD </b>&#10084;[/URL]</div></td>
    </tr>

    <tr>
    <td >[URL=http://gimpworld.forumfree.it/][IMG]http://creativesdf.altervista.org/_altervista_ht/html/firme/24/gw_03.png[/IMG][/URL]</td>
    </tr>

    </table>

    image
    testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
    GIMPWORLD
    image


    Qui è importante non dimenticare di inserire nel td (cella) del riquadro l'allineamento della cella: align=center
    e la larghezza della cella: width:284px
    CODICE
    <td align=center style="background-image:url(LINK IMMAGINE);" width:284px>


    Ovviamente poi andrà inserito il div, la cui larghezza NON è quella di tutta la cella, ma solo dello spazio in cui andrà il testo. In questo caso width:262px
    CODICE
    <div style="width:262px; height:36px; overflow:auto; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#BA4652;">testo testo testo testo testo testo testo
    </div>
     
    .
  11. % Nicolove
        Top   Dislike
     
    .

    User deleted


    Muoio... però mi metterò d'impegno e ci proverò. Intanto grazie per il tutorial =)
     
    .
  12. .Kobrax.
        Top   Dislike
     
    .

    User deleted




    9 e 13, nota personale: quando ero piccolo mia madre mi diceva che non bisogna mai guardare fisso il sole, ma una volta, a sei anni, l'ho fatto. I dottori non sapevano se i miei occhi sarebbero guariti, io ero terrorizzato, ero solo in mezzo a tutto quel buio. A poco a poco la luce cominciò a farsi strada fra le bende e io riacquistai la vista, ma qualcosa era cambiato dentro di me, e cominciarono le emicranie.
    12 e 45, enuncio di nuovo le mie teorie. Primo: la natura parla attraverso la matematica; secondo: tutto ciò che ci circonda si può rappresentare e comprendere attraverso i numeri; terzo: tracciando il grafico di qualunque sistema numerico ne consegue uno schema. Quindi ovunque, in natura, esistono degli schemi. Ecco le prove. La ciclicità delle epidemie, la crescita e la riduzione delle mandrie di caribù, la ciclicità delle macchie solari, le piene e le secche del Nilo. E allora parliamo della Borsa, di quell'universo composto da numeri che rappresenta l'economia globale, milioni di mani che lavorano, miliardi di cervelli, un'immensa rete umana che grida alla vita: un organismo, un organismo vivente. La mia ipotesi: anche nella borsa esiste uno schema, ed è proprio davanti a me, nascosto fra i numeri: è sempre stato lì.
    12 e 50: premo invio.


     
    .
  13. SilverDragonfly
        Top   Dislike
     
    .

    User deleted


    Bene bene bene^^
    Come detto in galleria opacizzerei un po' di più la parte in inserire la scritta per renderla più visibile ^^

    Curiosità: perchè i bordi arrotondati a destra non sono in trasparenza? :P
     
    .
  14. .Kobrax.
        Top   Dislike
     
    .

    User deleted


    CITAZIONE (SilverDragonfly @ 9/3/2010, 13:03)
    Curiosità: perchè i bordi arrotondati a destra non sono in trasparenza? :P

    perche' sicuramente ho cancellato male ;P
     
    .
  15.     Top   Dislike
     
    .
    Avatar

    www.youtube.com/videonauting

    Group
    Posts
    5,684
    Wilberini
    +11
    Location
    Asti

    Status
    Offline
    :XD: :XD: :XD: :XD: cosa c'è di sbagliato???

    imageimageimage
    image

    TESTO TESTO TESTO TESTO TESTO TESTO
    TESTO TESTO TESTO TESTO TESTO TESTO
    TESTO TESTO TESTO TESTO TESTO TESTO
    image
    imageimageimage


    SPOILER (click to view)
    CODICE
    <table align=center cellpadding=0 cellspacing=0 width=350 height=150>

    <tr>
    <td>[IMG]http://i1018.photobucket.com/albums/af309/cioue/01.png[/IMG]</td>
    <td>[IMG]http://i1018.photobucket.com/albums/af309/cioue/02-1.png[/IMG]</td>
    <td>[IMG]http://i1018.photobucket.com/albums/af309/cioue/03-1.png[/IMG]</td>
    </tr>

    <tr>
    <td>[IMG]http://i1018.photobucket.com/albums/af309/cioue/04.png[/IMG]</td>
    <td align=center style="background-image:url(http://i1018.photobucket.com/albums/af309/cioue/05.png);"><div style="width:350px;height:150px; overflow:auto; >
    TESTO TESTO TESTO TESTO TESTO TESTO
    TESTO TESTO TESTO TESTO TESTO TESTO
    TESTO TESTO TESTO TESTO TESTO TESTO
    </div></td>
    <td>[IMG]http://i1018.photobucket.com/albums/af309/cioue/06.png[/IMG]</td>
    </tr>

    <tr>
    <td>[IMG]http://s1018.photobucket.com/albums/af309/cioue/?action=view&current=07.png[/IMG]</td>
    <td>[IMG]http://i1018.photobucket.com/albums/af309/cioue/08.png[/IMG]</td>
    <td>[IMG]http://i1018.photobucket.com/albums/af309/cioue/09.png[/IMG]</td>
    </tr>

    </table>
     
    .
93 replies since 6/3/2010, 14:18   1242 views
  Share  
.
Top