Barre di scorrimento in un layer con i Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Può tornare utile in una pagina simulare un frame in linea, sia che si tratti di una pagina tipo portale, sia che si vogliano simulare i frame.

Sia che si vogliano assegnare le barre ad una cella, sia che le si vogliano assegnare ad un normale Tag di testo, il codice Css da utilizzare deve essere comunque assegnato ad un Tag <div>.

Occupiamoci del primo caso, assegnazione delle barre di scorrimento ad una cella, vediamo il codice:

<table width="100" border="1">
 <tr>
   <td>
      <div style="overflow: Auto; width: 200px; height: 200px;">
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
         esempio<br>
      </div>
   </td>
 </tr>
</table>
Abbiamo utilizzato nello stile dell'elemento di testo l'attributo overflow che agisce, per l'appunto, sulla barra di scorrimento, gli abbiamo assegnato il valore Auto in modo che, se per qualsiasi motivo il testo contenuto dovesse essere più piccolo dello spazio a disposizione, la barra non comparirà.

Ecco un esempio

esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio
esempio

E' possibile colorare la barra di scorrimento del layer, per questo leggete il trucco Colorare le barre di scorrimento del browser.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (47.859)

:: Referenze dei fogli di stile Css (41.725)

:: Menu ad effetto mouseover con i Css (39.069)

:: Effetti sui link con i Css (29.539)

:: Testo verticale coi Css (19.848)

:: Angoli smussati in un box coi Css (18.827)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.115)

:: Box con effetto ombra con i CSS3 (16.113)

:: Stilizzare i form Html con i Css (15.868)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.516)

IN EVIDENZA
DOWNLOAD