codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* è buona norma impostare a zero i valori margin e padding dell'elemento body per tenere conto delle diverse impostazioni predefinite dei browser*/
padding: 0;
text-align: center; /* centra il contenitore nei browser IE 5*. Il testo viene quindi impostato con l'allineamento predefinito a sinistra nel selettore #container */
color: #000000;
}
.twoColFixLt #container {
width: 780px; /* utilizzando 20 px in meno rispetto alla dimensione piena di 800 px, si lascia spazio per gli elementi grafici e strutturali del browser e si evita che venga visualizzata una barra di scorrimento orizzontale */
background: #FFFFFF;
margin: 0 auto; /* i margini auto (insieme a una larghezza) centrano la pagina */
border: 1px solid #000000;
text-align: left; /* sostituisce l'impostazione text-align: center nell'elemento body. */
}
.twoColFixLt #sidebar1 {
float: left; /* poiché questo elemento è mobile, occorre specificare una larghezza */
width: 200px; /* la larghezza effettiva di questo div, nei browser conformi agli standard, o la modaltià standard di Internet Explorer includerà i valori padding e border in aggiunta alla larghezza */
background: #EBEBEB; /* il colore di sfondo verrà visualizzato per tutta la lunghezza del contenuto all'interno della colonna, ma non oltre */
padding: 15px 10px 15px 20px;
}
.twoColFixLt #mainContent {
margin: 0 0 0 250px; /* il margine sinistro di questo elemento div crea la colonna sul lato sinistro della pagina; indipendentemente dalla quantità di contenuto presente nel div sidebar1, lo spazio della colonna rimane inalterato. È possibile rimuovere questo margine se si desidera che il testo del div #mainContent riempia lo spazio di #sidebar1 quando il contenuto di #sidebar1 finisce. */
padding: 0 20px 20px; /* ricordare che i valori padding e margin corrispondono rispettivamente allo spazio interno ed esterno al riquadro div */
}
.fltrt { /* questa classe può essere utilizzata per rendere mobile un elemento a destra nella pagina. L'elemento reso mobile deve precedere l'elemento al quale deve essere affiancato sulla pagina. */
float: right;
margin-left: 8px;
}
.fltlft { /* questa classe può essere utilizzata per rendere mobile un elemento a sinistra nella pagina.*/
float: left;
margin-right: 8px;
}
.clearfloat { /* questa classe deve essere inserita in un elemento div o break e deve essere l'elemento finale prima della chiusura di un contenitore che deve contenere per intero un elemento mobile */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* inserire in questo commento aggiuntivo le correzioni del modello di riquadro css per IE 5* */
.twoColFixLt #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* inserire in questo commento condizionale le correzioni css per tutte le versioni di IE */
.twoColFixLt #sidebar1 { padding-top: 30px; }
.twoColFixLt #mainContent { zoom: 1; }
/* la proprietà zoom proprietaria riportata sopra fornisce a IE l'elemento hasLayout necessario per evitare vari bug */
</style>
<![endif]--></head>
<body class="twoColFixLt">
<div id="container">
<div id="sidebar1">
<h3>Contenuto Sidebar1</h3>
Il colore di sfondo di questo div viene visualizzato solo per tutta la lunghezza del contenuto. Se invece si desidera visualizzare una linea di divisione, inserire un bordo sul lato sinistro del div #mainContent se esso conterrà sempre una quantità maggiore di contenuto. </p>
Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
</div>
<div id="mainContent">
<h1> Contenuto principale</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>Titolo di livello H2 </h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
<br class="clearfloat" />
</div>
</body>
</html>
Rispondi quotando
