Simulare i frame con i CSS
Articolo scritto da Luca Ruggiero
L'utilizzo dei frame è sconsigliato sin dai tempi dell'HTML 4.0 per una questione di supporto da parte dei browser obsoleti ed è tutt'oggi sconsigliato anche dall'XHTML per una questione di accessibilità, pur avendo l'XHTML una DTD dedicata.
Grazie ai CSS possiamo simulare dei frameset che tornano sempre e comunque visivamente molto comodi, specialmente nell'ambito di un'applicazione Web che gestisce un sistema attraverso un pannello di controllo.
(L'articolo continua più sotto...)
Guardate la seguente immagine
Di seguito il codice HTML per la creazione di un layout che simula dei frame
<html>
<head>
<title>Simulare i frame con i CSS</title>
<link rel="stylesheet" type="text/css" href="frame.css">
</head>
<body>
<div id="TOP">
<h1>FRAME TOP</h1>
</div>
<div id="LEFT">
<span>FRAME LEFT</span>
</div>
<div id="RIGHT">
<span>
FRAME RIGHT<br>FRAME RIGHT<br>FRAME RIGHT<br>
FRAME RIGHT<br>FRAME RIGHT<br>FRAME RIGHT<br>
FRAME RIGHT<br>FRAME RIGHT<br>FRAME RIGHT<br>
FRAME RIGHT<br>FRAME RIGHT<br>FRAME RIGHT<br>
FRAME RIGHT<br>FRAME RIGHT<br>FRAME RIGHT<br>
FRAME RIGHT<br>FRAME RIGHT<br>FRAME RIGHT<br>
FRAME RIGHT<br>FRAME RIGHT<br>FRAME RIGHT<br>
</span>
</div>
</body>
</html>
Il codice CSS è comunque dei più semplici
body
{
background-color: #E0E0E0;
color: #000000;
margin: 0px;
overflow: Hidden;
}
div
{
font: Normal 12px Verdana;
}
h1
{
font: Bold 35px 'Times New Roman';
}
#TOP
{
background-color: #008080;
color: #FFFFFF;
height: 15%;
padding: 5px;
overflow: Hidden;
}
#LEFT
{
float: Left;
width: 20%;
padding: 5px;
overflow: Auto;
}
#RIGHT
{
background-color: #FFFFFF;
float: Left;
width: 80%;
height: 85%;
padding: 5px;
overflow: Auto;
}
In grassetto ho evidenziato le fasi salienti; il resto è solo stile indipendente dall'effetto finale.
