Tutorial: Come inserire una scrollbar in un contenitore

domenica 1 dicembre 2013 16 commenti:

Buon pomeriggio bloggers! Oggi vi spiegherò come inserire una scrollbar in dei contenitori che utilizzerete poi come più vi piace. Questo Tutorial vi risulterà molto utile per creare - ad esempio - dei box di testo con le vostre informazioni oppure fare una raccolta dei vostri banner mantenendo il blog ordinato e curato grazie alle scrollbar.

Graphic Drops
Rubrica di cadenza casuale che vi aiuterà a gestire al meglio la parte grafica, sia HTML che non, dei vostri blog. Troverete elementi grafici da utilizzare, tutorial specifici e consigli utili. Se volete contattarmi potete farlo tramite il modulo delle richieste che trovate nel menù in alto, sezione Graphic Drops. Risponderò alle vostre domande.

Come inserire una scrollbar in un contenitore

Per inserire una scrollbar dovremo usare il seguente codice HTML, che ci permetterà di visualizzare un box munito di scrollbar al cui interno potremo mettere quello che più ci piace.
<div style="height: 200px; width: 200px; overflow: auto; "> contenuto </div>
Andiamo a spiegare un po' più nel dettaglio questo codice. Il Tag DIV ci permetterà di creare un contenitore virtuale. Per personalizzare questo contenitore abbiamo bisogno anche dell'attributo STYLE, grazie al quale possiamo inserire la nostra scrollbar o fare altre personalizzazioni grafiche come ad esempio cambiare il bordo o lo sfondo.

Guardiamo in dettaglio il codice overflow

Il codice overflow è quello che permette di aggiungere la scrollbar al nostro contenitore, si può personalizzare così:
<div style="height: 200px; width: 200px; overflow: hidden; "> contenuto </div>
- La scrollbar non verrà visualizzata e il contenuto che supererà le dimensioni del contenitore verrà nascosto.
<div style="height: 200px; width: 200px; overflow: scroll; "> contenuto </div>
- La scrollbar verrà sempre visualizzata, in qualsiasi caso.
<div style="height: 200px; width: 200px; overflow: auto; "> contenuto </div>
- Se il contenuto supera i valori di altezza e larghezza del contenitore, una scrollbar verrà automaticamente inserita.
Questi sono i valori base ed i più utili che possiamo dare alla nostra scrollbar a seconda delle necessità.



Facciamo un esempio pratico:
Voglio creare dei contenitori al cui interno metterò del testo, userò rispettivamente: il valore hidden per il primo, il valore scroll per il secondo e il valore auto per il terzo.

contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto

contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto

contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto

Esempio n.1: Come potete vedere nel primo box, a cui abbiamo dato il valore hidden, la scrollbar non viene visualizzata e gli elementi che non stanno nel contenitore vengono nascosti.
Esempio n.2: Nel secondo box, in cui abbiamo usato il valore scroll, la scrollbar sia in verticale che in orizzontale viene sempre visualizzata.
Esempio n.3: Mentre nel terzo box, in cui abbiamo dato il valore auto, troviamo solo una scrollbar verticale perché il contenuto non necessita in questo caso di quella orizzontale.

Come personalizzare il contenitore

Andiamo a vedere alcune personalizzazioni base che possiamo fare al contenitore. All'interno dell'attributo STYLE, width ed height determineranno rispettivamente la larghezza e l'altezza del box, background ci permetterà di colorare lo sfondo mentre border aggiungerà un bordino al box.
<div style=" qui vanno inserite le personalizzazioni "> contenuto </div>
- width:200px; height:200px;
Potete sostituire 200px con le misure che preferite.
- background: #FFFFFF;
Qui potete sostituire #FFFFFF con il colore che preferite, ricordate che il codice colore deve essere in formato HTML, qui potete trovare alcuni esempi di colori.
- border: 1px solid #000000;
Per quanto riguarda il border, potete sostituire 1px e #000000 con lo spessore e il colore che preferite, invece solid determina il tipo di bordo utilizzato e si può cambiare in:

dotted: crea un bordo a pallini.

dashed: crea un bordo a linee tratteggiate.

solid: crea un bordo uniforme.

double: crea un bordo a doppia linea.

Per questo Tutorial è tutto. Se avete domande, difficoltà o avete bisogno di delucidazioni sono sempre disponibile. Lasciate un commento o scrivetemi tramite email. Alla prossima! :)

16 commenti:

  1. grazie mille per questi post! <3 per una incapace come me, sono il massimo!

    RispondiElimina
    Risposte
    1. Figurati Ika, sono contenta di essere di aiuto!

      Elimina
  2. condivido le parole di Ika! Per me è più o meno arabo, quindi è tutto utilissimo*-*

    RispondiElimina
  3. è proprio quello di cui avevo bisogno!!!
    se passi da me c'è un premio per te!!
    http://lalepremarzolina.altervista.org/premio-dellamicizia-lovely-blog-awards-2014/

    RispondiElimina
    Risposte
    1. Ti ringrazio Licia! Anche per il premio :) appena posso rispondo sicuramente :D

      Elimina
  4. Grazie mille Leb, era da un po' di tempo che mi chiedevo come mettere questi contenitori per risparmiare spazio ma non riuscivo a trovare delle istruzioni così chiare. Grazie davvero :)

    RispondiElimina
    Risposte
    1. E' un piacere aiutarvi, io stessa ho imparato grazie ai tutorial in giro per la rete anni fa! Quindi so quanto possano essere utili sopratutto se semplici :D Poi un po' di pratica e si riesce in tutto! ^-^

      Elimina
  5. Cercherò di metterlo in pratica al più presto, grazie davvero Leb per averlo pubblicato di nuovo!!!! *_*

    RispondiElimina
    Risposte
    1. Non c'è di che ^-^ Spero riuscire a pubblicarli presto tutti :)

      Elimina
  6. Utilissima questa rubrica!!! Adesso me lo studio come si deve, soprattutto i bordini ^.^

    RispondiElimina
    Risposte
    1. Grazie Rosa! Fammi sapere come ti sei trovata :D

      Elimina
  7. Leb, questo tutorial mi ci voleva proprio :)

    RispondiElimina