Occhio al Codice ~ Episodio 2

Finestre, barre di scorrimento, immagini nel testo

« Older   Newer »
 
  Share  
.
  1. Mike Portnoyz
     
    .

    User deleted


    Oggi su OCCHIO AL CODICE...
    Oggi parleremo dell'uso dei DIV per ottenere post e schede più compatte senza ricorrere ai fastidiosissimi SPOILER che ci disintegrano le ruolate con la loro pessima programmazione che fa spostare intere ruolate ogni volta che ne apriamo uno.
    "DIV". Ma di che si tratta? Semplice: è un codice simile a fieldset o a < b >, ma consente di applicare una serie di parametri in una certa area del testo.

    In definitiva, una volta letta questa guida sarà possibile, sfruttando i div e codici semplicissimi, dei risultati simili a questo:

    woff_|
    La folla di Ninja Kiriani era senz'altro la più svestita e accaldata. Abituati al freddo-umido, erano stati catapultati nel mezzo del caldo-secco, con tutti i suoi risultati deterrenti.

    Kyle: Shinobi e Kunoichi, ninja di ogni rango... amici miei.
    Vi chiedo di farmi un giuramento, prima di lanciarvi in battaglia.
    Se mai vi venisse in mente di restare sulla bestia più del previsto, se qualcuno volesse fare l'eroe, se qualcuno mettesse la propria vita in gioco, desistete.
    Giuratelo davanti al vostro Kage, giuratelo sul vostro villaggio:
    "Oggi io non morirò."
    Non voglio eroi in questo giorno, non ne avremo bisogno.
    Non c'è tempo per morire oggi, c'è solo tempo per spaccare il culo a quell'enorme bestia!


    Alzando un pò la voce, il Kage ottenne una breve reazione slanciata dalla folla. Erano effettivamente impazienti di vendicarsi per i famigliari persi, e molti vedevano nel Leviathano un qualcosa su cui scaricare le tensioni dopo tutte le perdite avute dal virus.

    Kyle: Per questo, quando ricevete il segnale, voglio che non vi tratteniate sul posto, sgomberate immediatamente. Non prendete iniziativa. Quella ci servirà dopo, nel caso qualcosa vada storto.

    Il Kage chiuse poì gli occhi per qualche istante ed eseguì con calma qualche sigillo, per poi far fuoriuscire dalle sue mani un enorme quantità d'acqua con cui creò una piccolissima oasi di acqua cristallina, che già cominciava a calare venendo assorbita dalla sabbia.

    Kyle: Rinfrescatevi e tenetevi pronti. Non avrete mai più l'occasione di confrontarvi con qualcosa di così potente. Io l'ho già incontrato. E' davvero grande, è potente. Non volete sapere com'è da sveglio. Per cui vedete di fargli un culo così mentre è a terra!
    Scagliate fino all'ultimo colpo, metteteci tutti voi stessi!
    Dovranno ricordare con terrore noi Kiriani!


    Un altro breve momento di euforia guerriera pervase buona parte dei presenti, ad eccezione dei più preoccupati.
    Tornando più serio il Mizukage lasciò un ultimo ammonimento, calando il tono.

    Kyle: E se ogni cosa dovesse andare male... niente eroi. Non sprecate la vostra vita, piuttosto fuggite, possiamo riorganizzarci e attaccare un altra volta. E un'altra volta ancora, e ancora finchè la luce non abbandonerà i suoi occhi di serpe schifosa.
    Ora andate in posizione, il dado è tratto.



    " Niente ripensamenti, niente dubbi. Solamente andiamo e finiamo questa storia: è durata anche troppo. Hokage, Kokage, Mizukage: chiudiamo questa storia. Vi prego di seguire il piano alla lettera: sono sicuro che non fallirà. "

    Gli shinobi ritornano, Koike lancia un ultimo e decisivo sguardo agli altri tre dunque, indietreggiando, si avvicina al bordo dell'altura, del palazzo su cui sono tutti e tre. Chiude gli occhi, allarga le braccia e si lascia cadere indietro, nel vuoto, come fece quel giorno a Konoha quando dovevano prelevare Subuza.
    La giacca viene tolta in volo, il Suo Mondo viene controllato: la Sabbia ne attutisce la caduta, la smorza.
    La posizione la sanno, lo raggiungeranno e ne è sicuro.

    Quello che ora viaggia verso il Leviatano è un fulmine bianco che attraversa le fila dei ritornanti dalla Furia.
    Un Fulmine incerto e timoroso che però sa che tutto questo è necessario...
    ...sorride, è passato così tanto...




    Come abbiamo ottenuto questo risultato? Andiamo per ordine.

    FIELDSET

    Il fieldset è quello con cui abbiamo creato il riquadro esterno, la finestrella. Questo stesso post è basato su un fieldset, benchè sia molto più complesso e contenga esso stesso un Div.
    Il codice di base è

    CODICE
    <fieldset>
    Testo qui
    </fieldset>


    La prima riga determina dove inizia la finestra e l'ultima dove finisce. Tutto quello che si inserirà in mezzo, apparirà dentro al fieldset. Attenzione perchè usare troppi fieldset uno dentro l'altro (i div hanno la stessa meccanica), può rendere malfunzionanti alcune cose, come ad esempio la barra di scorrimento nell'esempio precedente, che può non funzionare se inserita dentro ad un fieldset, che sta dentro ad un altro fieldset. Peraltro, Forumcommunity continua a cambiare i suo codici quindi ogni tanto una cosa complessa che prima funzionava, diventa malfunzionante. Tenetevi semplici e state sul sicuro!

    Ora, come si può arricchire un fieldset? Prendiamo d'esempio quello usato in questa pagina. Non spaventatevi, è molto complesso ma basta guardarlo pezzo per pezzo.

    CODICE
    <fieldset style="background:#eff6fd; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;border: 2px solid #004a99; width: 90%;"><legend align="right">[color=#004a99]Oggi su <b>OCCHIO AL CODICE</b>...[/color]</legend>

    Tutto il post con le varie istruzioni ecc sta qua in mezzo

    </fieldset>


    Come potete notare il fieldset non è soltanto < fieldset > ma ha in seguito la parola una serie di istruzioni.
    Style = serve ad iniziare le istruzioni.
    Le istruzioni sono contenute tutte tra virgolette, una " per aprire e una " per chiudere. Infine le istruzioni sono spesso composte in questo modo

    Istruzione : numero;

    Come ad esempio

    width: 90%;

    oppure

    border: 2px solid #004a99;

    Ora, è chiaro che non tutti conoscono queste istruzioni, ma sapere che possono essere inserite e dove è un primo passo. Io personalmente ne conosco e ne uso molte poche, e nel caso particolare del Fieldset non ne uso nessuna, mi accontento del semplice riquadro, e in quanto tale mi serve solo scrivere < fieldset >.
    Comunque molte funzioni si possono dedurre ad occhio: ad esempio

    background:#eff6fd; -> Lo sfondo sarà di colore #eff6fd, che è colore espresso in codice HTML (google vi darà la risposta a questo)
    -moz-border-radius-topright: 10px; Qui definisce che il bordo in alto a destra della finestra è rotondo e ha raggio 10 pixel
    -webkit-border-top-right-radius: 10px; Non lo so 8D
    -moz-border-radius-topleft: 10px; Lo stesso del topright, ma a sinistra
    -webkit-border-top-left-radius: 10px; Non lo so 8D
    border: 2px solid #004a99; Questo definisce che il bordo della finestra è spesso 2 pixel, in stile solid (ci sono altri stili) ed ha colore #004a99
    width: 90%; Qui indica che la larghezza della finestra sarà il 90% della larghezza predefinita del forum. Io di solito non la indico, e quindi ottengo in automatico il 100%. Volendo mettere 50% verrebbe fuori un fieldset molto stretto. Volendo si può anche usare la stessa cosa per height (altezza) e indicare il numero in pixel invece che percentuale (250px).

    Si ma... questa parte?

    CODICE
    <legend align="right">[color=#004a99]Oggi su <b>OCCHIO AL CODICE</b>...[/color]</legend>


    Quella parte è il titoletto che si vede in alto a destra. Con tutti i fieldset, anche quelli dove non è indicato NESSUN parametro, è possibile usare il "legend" che permette di infilare un titoletto giusto giusto sul bordo superiore del fieldset.
    Un'esempio semplice semplice

    CODICE
    <fieldset><legend>[color=#004a99]Liva da  <b>NARUTOSPRINT</b>...[/color]</legend>Inserire testo qui</fieldset>


    Ci da questo risultato

    Liva da NARUTOSPRINT...Inserire testo qui


    In questo topic in realtà il < legend > iniziale è scritto con seguito da
    align="right"
    che causa l'allineamento a destra del titoletto.

    DIV E ALLINEAMENTO IMMAGINI
    I div sono pressochè la stessa identica cosa. L'unica evidente differenza che, personalmente, ho notato è che mentre fare un fieldset crea in automatico un riquadro con il bordo grigio, il divset non crea nessun riquadro. A meno che non glielo si specifichi nei parametri.

    Il div è quello che io uso per creare barre di scorrimento all'interno dei post, ed è anche quello che uso per ALLINEARE le immagini all'interno del post, senza dover per forza INTERROMPERE il testo con le immagini, perchè come sapete il testo di solito va sopra e sotto alle immagini, e mai di fianco. Bene, a noi questa cosa sta sul cazzo, e vogliamo fare le immagini di fianco, per rendere più guardabile il post. Come facciamo?

    Semplice, si inserisce l'immagine in un div, e nel parametro del div si specifica che l'immagine va allineata a sinistra.

    CODICE
    <div style="float:left;">[IMG=woff]http://narutosprint.yourff.it/wiki/images/thumb/1/11/AnimeMaleMage.jpg/173px-AnimeMaleMage.jpg[/IMG]_|</div>


    woff_|
    Come notate, tutto il testo scritto IN SEGUITO a tale codice, appare alla destra dell'immagine.
    Vogliamo l'immagine a destra invece che a sinistra? Mettiamo "float:right".
    Semplice, no?

    Ci tengo a ricordare che tutti i parametri utilizzabili nel fieldset si possono utilizzare anche nel div, e sta al gusto di ognuno scegliere dove utilizzarli. Sfiga creò questo template con un div esterno che serviva solo a centrare tutto il testo e un fieldset interno che dava il colore di background, il titoletto e la larghezza.
    Noi nel regolamento abbiamo fatto il contrario: c'è un div esterno che determina il colore di sfondo e il colore del bordo, e dei fieldset interni che suddividono le parti del regolamento. Quei fieldset interni hanno dentro a loro volta degli altri DIV, con le barre scorrevoli. Lol.

    BARRE SCORREVOLI

    Orbene, questa è una cosa che personalmente venero come SACRO GRAAL e che mi ha fatto abbandonare gli spoiler nel modo più totale.
    Il codice è semplicemente questo, e come avrete già intuito si tratta di un semplice DIV.

    CODICE
    <div style="overflow:auto; float:left;width:100%;height:200;">

    Testo e roba varia qui

    </div>


    Come vedete, come nei fieldset, la parola div è seguita da style="variparametri;"

    Il float indica l'allineamento, OVERFLOW serve a creare la barra di scorrimento, Width a dare la larghezza, mentre HEIGHT serve a dire quanto alta sarà la finestra.

    Mettere height:100; significherà avere una finestra molto bassa, e la barra di scorrimento permetterà di scorrere all'interno del testo inserito NEL DIV.
    Mettere height:400; creerà una finestra molto alta. ATTENZIONE: se il testo che avete inserito è tipo due righe, non vi si creerà nessuna barra di scorrimento, per il semplice fatto che non ha motivo di esistere. Non c'è nulla da scorrere, il testo è tutto già visualizzato e non c'è nessuna parte nascosta.

    IL MIO CONSIGLIO è di usare il codice di overflow per le citazioni di finepost. Così potete impostare VOI quanto spazio occuperà la citazione, potrete evitare di usare il quote (a che servirebbe) e non vi serve nessuno spoiler. Per vedere il contenuto del quote, per quanto lungo potrà essere, basterà usare la barra di scorrimento. Attenti però a non mettere un altezza di 100 pixel a un quote di fine post lungo miliardi di km, perchè vi si creerà una barra che, al minimo movimento, sposterà la visuale di decine di righe rendendo la cosa molto scomoda.

    Per chi lo volesse, ecco il codice dell'esempio all'inizio.

    CODICE
    <fieldset><div style="overflow:auto; float:left;width:100%;height:200;"><div style="float:left;">[IMG=woff]http://narutosprint.yourff.it/wiki/images/thumb/1/11/AnimeMaleMage.jpg/173px-AnimeMaleMage.jpg[/IMG]_|</div>



    Post qui

    <hr> <- questa crea una linea orizzontale di separazione

    Resto del post qui
    </div>
    </fieldset>


    Giusto per spiegare, nella mia nabbezza io metto _| dopo l'immagine nel div per fare in modo che il testo non sia appiccicato al testo. E' un trucchetto che m'ha spiegato =giannini=.

    Bene, e con questo penso di avere finito. Avvertitemi se sapete altro, provvederò a modificare il prima possibile.
    Grazie della gentile attenzione,

    © by Mike Portnoyz & Naruto Sprint. Chiedere il permesso prima di utilizzarlo altrove, Grazie.


    Edited by Mike Portnoyz - 24/8/2011, 18:25
     
    Top
    .
  2. Peter Returns
     
    .

    User deleted


    davvero bella guida mike, penso che la userò per la mia prossima creazione, anche se questa che ho adesso nn è creata XD
     
    Top
    .
  3. Mike Portnoyz
     
    .

    User deleted


    Cosa cavolo significa XD
     
    Top
    .
  4. Peter Returns
     
    .

    User deleted


    ke la prossima volta che mi servono hli html per farmi la skin uso questi xD invece di andarla a fregare da qualcuno e modificandola xD
     
    Top
    .
  5. ~[*ANDREA*]~
     
    .

    User deleted


    <.< tipo me xD

    comunque non sapevo solo il fatto del _|

    comunque dopo devi mettere come inserire un immagine dato che non tutti ci riescono... e viene tipo questo


    Itako Uchito

    Un giorno Itako vide un nabbo.
    Sbaglio o è quel nabbo di Isawa?
    Isawa nabbo!!!
    Sono nabbo sono nabbo sono nabbo!!!





    STATISTICHE - ARMIVita: 400
    Chakra: 800
    Esperienza: 366
    Forza: 40
    Resistenza: 20+10+20=50
    Velocità: 146+10%=161
    Distanza Avversarii:

    Oggetti Equipaggiati: 2 Tonici da Guerra; 2 Tonici Coagulanti; 5 Kunai; 5 Shuriken; 1 Katana; 1 Divisa Ambu; Antitodo livello III; 1 Armatura di cuoio borchiato"krotenhaut"; 4 Fumogeni; Coprifronte Konoha tagliato sulla fronte abbassato sull'occhio sinistro; Coprifronte Honorary Member nascosto nella gamba destra.
    Oggetti in mano: 1 Paio di guanti con lamina d'acciaio

    TECNICHE UTILIZZATETecnica avvistamento nabbo. (Ninjutsu: 80)
    Consiste nell'avvistare un nabbo senza diventarlo.
    Consumo:0

    Narrato - Parlato - Pensato - Parlato Altrui




     
    Top
    .
  6. Mike Portnoyz
     
    .

    User deleted


    Eh questo però usa un table per impaginare... che andrebbero abbastanza evitati ma ancora non li so spiegare
     
    Top
    .
  7. ~[*ANDREA*]~
     
    .

    User deleted




    bla bla bla




    CODICE
    <div style="background-image: url(http://img1.jurko.net/wall/uploads/wallpaper_8358.jpg) ; width: 600px">

    [CENTER]bla bla bla[/CENTER]

    </div>
     
    Top
    .
  8. Mc Cavallo
     
    .

    User deleted


    Ho cambiato colori e ho tolto la barra scorrevole. Grazie Mike!

    Hiro Nakamura
    woff_|
    Narrato Parlato Pensato


    TESTO
     
    Top
    .
7 replies since 9/7/2011, 11:54   335 views
  Share  
.