CSS Tip #16 – Flussi e overflussi
Scritto da Salvo il 2 maggio 2011 con 0 commenti
Tags: css tip , testo , webdesign
Il problema è: un elemento (div o quello che volete) che ha un’altezza fissa e il contenuto al suo interno che supera il valore di questa altezza. Normalmente succede che il box mantiene le sue dimensioni e il testo semplicemente “sborda” esce dalla dimensioni fisse del box e scavalca altri elementi, generando un bel pasticcio!
Normalmente se a un elemento non viene specificata l’altezza tende a essere alto tanto quanto il suo concenuto (più il padding e i bordi come ci dice il box-model) ma magari la nostra esigenza è proprio quella di mantenere i box all’altezza definita ma fare i conti con il troppo testo…
Entra in gioco overflow
I Css (già dalla versione 2.1 quindi uno standard) mettono a disposizione la proprietà “overflow” per sistemare questo tipo di problemi con 3 possibili valori: “hidden”, “visible” e “scroll”. Da questo esempio potete vedere le 3 differenze, ma sappiate fin da subito che “visible” è il comportamento di default (in questo esempio sto usando tre paragrafi messi in colonne con un’altezza fissa di 200px e mooolto testo):
- Visible – lascia “overflussare” il contenuto (e fare pasticci)
- Hidden – nasconde il contenuto di troppo tagliandolo barbaramente (utile per nascondere le briciole sotto il tappeto in casi di emergenza)
- Scroll – fa apparire una simpatica barra di scorrimento intorno solo al nostro elemento
La quarta proprietà
Esiste una quarta proprietà “auto” che permette al browser di decidere come comportarsi, ma il più delle volte ripiega sullo “scroll”, quindi per evitare casini tanto vale dirgli chiaro e tondo cosa vogliamo… se lo sappiamo!
Quando NON usare scroll
Principalmente in ambito mobile, se realizzate pagine per tablet o smartphone abolite l’uso di scrollbar in quanto entrano in conflitto con l’azione di fare scroll su tutta la pagina, specialmente se sono barre piccole o sottili. Ci sono altri modi per “comprimere” i contenuti senza le barre di scorrimento!
E per cambiare l’aspetto della barra?
I Css normalmente non permettono di cambiare colore o dimensioni delle barre di scorrimento generate con questa proprietà, ma esiste un simpatico plugin di jQuery neanche troppo complesso da usare che permette questo lavoro: jScrollPane.
Come al solito trovate la raccolta di tutti codici usati nel Tips nel mitico file CSS Tips - File di riferimento !
Articoli correlati:
- CSS Tip #14 – Testo su più colonne Uno dei casi più comuni nel design CSS è quello di suddividere del testo in più colonne, con gli standard attuali l’unico modo “rapido” per ottenere l’effetto è quello di [...]...
Riguardo Salvo...
Web designer/developer (aka Interactive Designer) dal 2006, ho lavorato in varie aziende che operano dall'e-commerce alla comunicazione multimediale, sono stato speaker a conferenze come Better Software, Codemotion e due WordCamp. Dal 2010 insegno linguaggi web alla scuola Mohole di Milano.
Se ti e' sembrato utile perche' non mi offri un caffe'?
Tutto quello che trovi su MoebiusMania.net puo' essere utilizzato liberamente e gratuitamente, se magari hai trovato qualcosa di particolarmente utile puoi mostrare il tuo apprezzamento con una minuscola donazione con Paypal o cliccando sui banner!
Quanto silenzio qui... pare che non ci siano commenti! Perche' non scrivi tu il primo?