Come decorare la propria Scheda

HTML per bellezza

« Older   Newer »
 
  Share  
.
  1. videl93X
        +1   -1
     
    .

    User deleted


    Wa, ho un problema di base con questo ultimo codice... solitamente riesco a far funzionare ogni html perché ho un minimo di pratica generale ma questo, non so perché, proprio no. Mi fa vedere gli oggetti all'interno ma non la tabellina. Ecco:

    rsitem013 Pozione x3 (restituisce 20 ps)
    rsitem004 Pokéball x1
    rsitem292 Spettrosonda x1
    rsitem214 Occhialoni x1
    rsitem197ja8 Ghicocca Finder 3000 x1
    Baccanaca_Sprite_Zaino Baccanaca x2 (dimezza il danno ricevuto da un Pokémon terra, scompare dopo l'uso)
    rsitem027 Gassosa x5 (restituisce 60 ps)
    rsitem023 Cura Totale x4 (cura tutti i cambiamenti di stato)
    rsitem021 Iperpozione x2 (restituisce 200 ps)


    Codice usato:
    CODICE
    <div style="width: 300px; height: 400px; overflow-y: scroll;>[IMG=rsitem013]http://www.pokemonelite2000.com/rsitem013.png[/IMG] Pozione x3 (restituisce 20 ps)
    [IMG=rsitem004]http://www.pokemonelite2000.com/rsitem004.png[/IMG] Pokéball x1
    [IMG=rsitem292]http://www.pokemonelite2000.com/rsitem292.png[/IMG] Spettrosonda x1
    [IMG=rsitem214]http://www.pokemonelite2000.com/rsitem214.png[/IMG] Occhialoni x1
    [IMG]http://img242.imageshack.us/img242/3584/rsitem197ja8.png[/IMG] Ghicocca Finder 3000 x1
    [IMG]http://media.pokemoncentral.it/wiki/7/72/Baccanaca_Sprite_Zaino.png[/IMG] Baccanaca x2 (dimezza il danno ricevuto da un Pokémon terra, scompare dopo l'uso)
    [IMG]http://www.pokemonelite2000.com/rsitem027.png[/IMG] Gassosa x5 (restituisce 60 ps)
    [IMG]http://www.pokemonelite2000.com/rsitem023.png[/IMG] Cura Totale x4 (cura tutti i cambiamenti di stato)
    [IMG]http://www.pokemonelite2000.com/rsitem021.png[/IMG] Iperpozione x2 (restituisce 200 ps)</div>


    Se puoi aiutarmi te ne sarei grata! >_>
     
    .
  2. Red./
        +1   -1
     
    .

    User deleted


    Manca un semplice virgolette
    CODICE
    "

    prima della chiusura (>) del primo Div xD

    Correggo subito, grazie per la segnalazione! ;)
    CODICE
    <div style="width: 300px; height: 400px; overflow-y: scroll;">[IMG=rsitem013]http://www.pokemonelite2000.com/rsitem013.png[/IMG] Pozione x3 (restituisce 20 ps)
    [IMG=rsitem004]http://www.pokemonelite2000.com/rsitem004.png[/IMG] Pokéball x1
    [IMG=rsitem292]http://www.pokemonelite2000.com/rsitem292.png[/IMG] Spettrosonda x1
    [IMG=rsitem214]http://www.pokemonelite2000.com/rsitem214.png[/IMG] Occhialoni x1
    [IMG]http://img242.imageshack.us/img242/3584/rsitem197ja8.png[/IMG] Ghicocca Finder 3000 x1
    [IMG]http://media.pokemoncentral.it/wiki/7/72/Baccanaca_Sprite_Zaino.png[/IMG] Baccanaca x2 (dimezza il danno ricevuto da un Pokémon terra, scompare dopo l'uso)
    [IMG]http://www.pokemonelite2000.com/rsitem027.png[/IMG] Gassosa x5 (restituisce 60 ps)
    [IMG]http://www.pokemonelite2000.com/rsitem023.png[/IMG] Cura Totale x4 (cura tutti i cambiamenti di stato)
    [IMG]http://www.pokemonelite2000.com/rsitem021.png[/IMG] Iperpozione x2 (restituisce 200 ps)</div>
     
    .
  3. videl93X
        +1   -1
     
    .

    User deleted


    Ahaha ecco! Figurati, grazie a te per lo splendido lavoro che fai postando questi codici!
     
    .
  4. videl93X
        +1   -1
     
    .

    User deleted


    Scusa nuovamente il disturbo, ma potresti aiutarmi con i codici per inserire scritte sopra la scrollbar? In pratica vorrei sistemare lo Zaino e avrei bisogno di una scrollbar per ogni tasca con sopra il nome della tasca, una affianco all'altra... ma mi basterebbe sapere il modo per inserire il riquadrino sopra la scrollbar, al resto ci penso io xD
     
    .
  5. Red./
        +1   -1
     
    .

    User deleted


    Per fare quello che chiedi è sufficiente (e anche più pratico a mio avviso ^^) una tabella <table> e in ogni cella metti la scritta e poi sotto (andando semplicemente a capo) il <div> della scrollbar. :)

    Ti serve una mano nella creazione o pensi di riuscire a crearne una da sola? :)
     
    .
  6. videl93X
        +1   -1
     
    .

    User deleted


    Penso di riuscire. In caso ti faccio sapere ahaha! Grazie mille comunque!
     
    .
  7. Red./
        +1   -1
     
    .

    User deleted


    Oooook! ;D

    Se hai bisogno riscrivi qui. Nulla di strano che magari dovendo spiegare come fare una tabella a più celle non ne faccia direttamente una nuova guida! xD
     
    .
  8. videl93X
        +1   -1
     
    .

    User deleted


    Credo di aver bisogno di una mano invece xD ahaha se non è di disturbo forse una nuova guida ci starebbe anche, tanto avrei lo stesso problema nel fare il pokédex (tipo quello di tolomeo 22)
     
    .
  9. Red./
        +1   -1
     
    .

    User deleted


    Lezione sulle Tabelle (le basi)


    Come avevo detto, visto che devo spiegare e produrre un codice, tanto vale che mi metta gli occhiali, indossi una polo un maglione che prude e vi faccia la lezione! xD
    L'argomento odierno sono le basi che servono per creare e modificare una tabella! Vedremo assieme come si può creare scrivendo a mano pochissime istruzioni e come personalizzare una già pronta all'uso. Iniziamo con il mio aiutante Gligar che vi mostrerà diversi tipi di cella! ;)


    Tabella esempio
    pngSprdpm207
    Sprrz207
    Spror207



    Vediamo ora il codice di una tabella da 1 riga e 2 colonne:
    CODICE
    <table>
    <tr>
    <td>Colonna 1</td>
    <td>Colonna 2</td>
    </tr>
    </table>


    Analizziamo singolarmente le parti!

    CODICE
    <table></table>

    Sono l'apertura e la chiusura del codice della tabella, senza di essi è inutile stare a scrivere gli altri.

    CODICE
    <tr></tr>

    Sono l'apertura e la chiusura di una RIGA della tabella, al suo interno vanno inseriti i prossimi codici

    CODICE
    <td></td>

    Sono l'apertura e la chiusura di una COLONNA della tabella, all'interno va inserita l'immagine, il pkmn o qualunque oggetto vogliate all'interno della tabella.

    Quindi per riassumere TR+TD = 1 Cella; TR+2TD = 2 Celle; per ottenere nuove righe basterà usare un nuovo TR sempre all'interno del TABLE.


    Terminato con queste nozioni veramente elementari, passiamo ora ad alcuni strumenti che vi aiuteranno a personalizzare la tabella, li elencherò spiegandone l'utilizzo ed effetto.

    CODICE
    rules="all"

    Questo codice va inserito nell'apertura del TABLE, serve per mettere una linea che separi le varie celle, come si può vedere nell'esempio. (Torna utile se non viene usato un colore di sfondo unico per ogni cella.

    CODICE
    colspan="x"

    Colspan va inserito all'interno dell'apertura di un TD, indica quante colonne occuperà quella determinata cella. Nell'esempio, è stato usato con valore "2" per il titolo e per l'ultimo Gligar in basso. Sostituite ad x un valore numerico pari alle colonne che dovrà occupare.

    CODICE
    rowspan="y"

    Rowspan assomiglia al codice precedente, va installato nella stessa maniera, però andrà ad agire sulle righe anziché sulle colonne. Nell'esempio è stato usato con valore "2" per il Gligar in alto a sinistra. Sostituite ad y un valore numerico pari alle righe che dovrà occupare.

    CODICE
    class="???"

    Anche questo codice va inserito nell'apertura del TD. Questo può avere almeno 3 valori (da sostituire a ???) fondamentali per chi voglia destreggiarsi con le tabelle, vediamoli assieme:
    1) aa -> indica un colore di sfondo che dipende dalla skin
    2) ww -> indica un colore di sfondo che dipende dalla skin (solitamente diverso da aa)
    3) title -> aggiunge uno sfondo ed uno stile particolare alla cella (che dipende sempre dalla skin) che gli da lo stesso attributo dei "sottotitoli". Nell'esempio è stato usato nella prima riga in alto.


    Concludiamo con un semplice link di una funzione a disposizione di tutti gli utenti, un javascript creato dal circuito forumfree/community che permette di creare una tabella con la grafica della skin (le immagini che stanno sopra le sezioni, per intenderci) con il minimo sforzo.
    Infatti vi basterà indicare il numero di righe, quello di colonne (ed un eventuale cella per il sottotitolo), premere il bottone d'invio ed il codice verrà da se. Poi dovrete solo fare copia/incolla e personalizzarlo (anche con i codici che vi ho illustrato sopra) come più vi piace!
    Generatore automatico di tabelle (con grafica del forum).
    Giusto per essere precisini, vi informo che al variare della skin varierà anche la tabella, perciò mettetevi l'anima in pace quando la skin verrà cambiata, se le immagini non vi piacciono! xD


    Per ora non ho nient'altro da dire! Spero che la guida sia servita! E ricordatevi che per ogni TD e TABLE potete tranquillamente usare i vari codici visti nelle precedenti guide tramite style="..."! ;)
    Vedete di non buttarvi tutti sulle tabelle automatiche, o non imparerete ad usare i nuovi codici! A presto per altri fantastici codici e guide! ;D


    Edited by Red./ - 11/5/2013, 01:24
     
    .
  10. videl93X
        +1   -1
     
    .

    User deleted


    Grande Red. Ti ringrazio tantissimo per questa super-guida! Ovviamente il mio obiettivo è imparare a creare queste benedette tabelle, quindi mi metterò d'impegno e creerò. Ti farò sapere come va!
     
    .
  11. videl93X
        +1   +1   -1
     
    .

    User deleted


    Zaino
    Strumenti
    Pokéball
    Bacche
    MT
    Strumenti base
    rsitem013 Pozione x3 (restituisce 20 ps)
    rsitem027 Gassosa x5 (restituisce 60 ps)
    rsitem023 Cura Totale x4 (cura tutti i cambiamenti di stato)
    rsitem021 Iperpozione x2 (restituisce 200 ps)
    rsitem057 Caram. Rara x2
    rsitem028 Lemonsucco x2 (restituisce 80 ps)
    rsitem004 Pokéball x2
    Safari_Ball_Sprite Safariball x14
    rsitem002 Ultraball x2
    Baccanaca_Sprite_Zaino Baccanaca x2 (dimezza il danno ricevuto da un Pokémon terra, scompare dopo l'uso)
    Colonna 2
    rsitem292 Spettrosonda x1
    rsitem214 Occhialoni x1
    rsitem197ja8 Ghicocca Finder 3000 x1



    Ecco qua! Questa è solo la base, adesso mi metto sotto con photoshop e vedo di creare background di mio gradimento! Ma grazie ai tuoi insegnamenti sono riuscita a fare tutto ciò. *hip hip hurrà per Red.*
     
    .
  12. Red./
        +1   -1
     
    .

    User deleted


    CITAZIONE (videl93X @ 12/5/2013, 13:15) 
    Ecco qua! Questa è solo la base, adesso mi metto sotto con photoshop e vedo di creare background di mio gradimento! Ma grazie ai tuoi insegnamenti sono riuscita a fare tutto ciò. *hip hip hurrà per Red.*

    You're welcome! ;)
     
    .
  13. ¬ h a n a b i
        +1   -1
     
    .

    User deleted


    Io solitamente uso le strutture a tabelle per crearmi l'intera scheda personalizzata *w* se volete posso postare un po' di codici, tanto non ci metto molto a farli <3
     
    .
  14. Red./
        +1   -1
     
    .

    User deleted


    CITAZIONE (¬ h a n a b i @ 18/5/2013, 20:08) 
    Io solitamente uso le strutture a tabelle per crearmi l'intera scheda personalizzata *w* se volete posso postare un po' di codici, tanto non ci metto molto a farli <3

    Se intendi usare svariati <table> o cmq almeno uno organizzato in modo da rendere la scheda più ordinate ci son già le guide. Preferirei non dare troppa pappa pronta (come si suol dire) principalmente perché sembra che risolva più problemi, però in realtà c'è sempre qualcosa che qualcuno vuole modificare (uno sfondo, un colore, ecc.) e magari si incasina e in breve tempo hai la casella MP piena! xD

    Cmq se hai un nuovo codice che non è presente qui posso farci un tutorial (sicuramente lo conosco xD)

    Per ora vi anticipo che ho in programma altre 2 lezioncine su:

    *trasformazione del colore da RGB ad Esadecimale (es: #000000)
    *cambiare font e stile di scrittura per le schede
    *aggiunte da fare alla modifica dei bordi
     
    .
  15. ¬ h a n a b i
        +1   -1
     
    .

    User deleted


    Posso mettervi anche i codici per modificare le scritte in se per se, per esempio gli uppercase et simila x)
    Se non ci sono già xD
     
    .
220 replies since 20/9/2010, 10:45   12872 views
  Share  
.