HTML and CSS Reference
In-Depth Information
<section id="content">
<section id="navbar">Barra di navigazione</section>
<div id="innerContent">Contenuto del sito</section>
</section>
<footer id="footer">Header</footer>
</body>
</html>
Esempio 4.18
- CSS
#header, #footer, #content {
clear:both;
background: #c0c0c0;
}
#navbar {
float:left;
width:30%;
background: #f0f0f0;
}
#innerContent{
float:right;
width:70%;
background: #d0d0d0;
}
Il markup che abbiamo utilizzato non funzionerebbe benissimo in presenza di browser che
non abbiano il supporto a HTML5, quindi, in genere, si preferisce sfruttare questi nuovi tag
insieme ad altrettanti tag
div
, per mantenere la compatibilità.
Nell'esempio precedente possiamo notare l'uso di
float
e
clear
, che indicano, ri-
spettivamente, che l'elemento deve fare spazio ad altri, oppure deve ripulire tutto lo spa-
zio che gli sta attorno. Comporre layout utilizzando queste proprietà è molto semplice e
consente di ottenere risultati molto complessi, quando si combinano in maniera opportuna
blocchi di questo tipo. Il risultato del layout è visibile nella
figura 4.7
.
