PCdaZERO.it - Guida facile per usare il computer

Acquista o scarica gratis, i libri di "PC da Zero"

CREARE SITI WEB in HTML e CSS    >     Quando il contenuto supera le dimensioni del blocco





Quando il testo è sovrabbondante,
il blocco si espande in verticale fino a contenere tutto il testo (per IE e Opera) ;
oppure il testo sconfina oltre il bordo (per Firefox e Chrome).
In quest'ultimo caso gli effetti visuali sono molto spiacevoli (il testo si sovrappone al blocco successivo).
Per risolvere questo problema è possibile:
– non dichiarare la proprietà height; l'altezza del blocco (in questo caso il blocco si adatterà al contenuto).
Oppure,
– dichiarare la proprietà overflow e assegnargli il valore "scroll"

overflow: scroll;

oppure,
– dichiarare la proprietà overflow e assegnargli il valore "auto"
overflow: auto;

scroll - rende visibili le barre di scorrimento anche se non necessarie.
auto - le rende visibili solo se necessarie, ovvero solo quando il contenuto supera le dimensioni del blocco.

Ecco le caratteristiche visuali dei due esempi con relativo codice:.

codice HTML    risultato pagina web   
... <style type="text/css">
div {
background-color: yellow;
height: 80px;
width: 300px;
border: 5px solid gray ;
margin: 20px;
 overflow: scroll;
 }
</style>
</head>
<body>
<div>Zona numero uno</div>
<div>Zona numero due</div>
<div>Zona numero tre - In questa zona vengono inserite più parole, per vedere come si comporta un blocco quando quest'ultimo ha delle misure che non soddisfano l'ingombro del contenuto.<br />
Vediamo quindi come gestire il blocco DIV con la proprietà "overflow".
</div>
<div>Zona numero
quattro</div>
</body>
</html> 		10-overflow-scroll (17K)

codice HTML    risultato pagina web   
...
<style type="text/css">
div {
background-color: yellow;
height: 80px;
width: 300px;
border: 5px solid gray ;
margin: 20px;
 overflow: auto;
 }
</style>
... 		11-overflow-auto (19K)

Esiste una terza soluzione, assegnare l'attributo hidden (nascosto) alla proprietà overflow; ma in questo modo il testo verrebbe troncato e non sarebbe più visibile al normale visitatore della pagina web. Nulla toglie comuque che può essere usato per altri scopi. Tutto viene demandato alla fantasia del webmaster.

Come esercizio, inserisci delle immagini all'interno di un blocco DIV e analizza come vengono visualizzate utilizzando i vari attributi (scroll, auto, hidden, visible) della proprietà overflow.

visible (valore predefinito)
hidden
scroll
auto





[ Acquista il Manuale completo Creare siti web da zero - Volume 1 ]



Link sponsorizzati