Layout a larghezza fissa

Contenuto alternativo per i browser che non leggono gli iframe.
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
 <title>pagina_prova_fisso</title>

<style type="text/css">

body {
 width: 950px;
 font-family: Arial, Verdana, sans-serif;
 color: #000000;
 margin: auto;}
h1 {
 background-color: #efefef;
 margin: 20px 0 20px;
 padding: 15px;}
h2 {
 text-align: center;
 padding: 5px;}
p{
 width: auto;
 margin: 10px;
 }

.feature, .footer {
 background-color: #FFFFFF;
 padding: 0px;
 margin: auto;
 }

hr {
 border: 0;
 width: 100%;
 color: #000000;
 background-color: #000000;
 height: 1px;
 }

#menu ul {
 padding: 0;
 margin: 0;
 z-index: 1000;}

#menu li {
 position: relative;
 float: left;
 width: 190px;
 text-align: center;
 list-style: none;
 }
#menu li a {
 background-color: #454545;
 color: #FFF;
 padding: 15px 20px;
 text-decoration: none;
 display: block;
 }
#menu li a:hover {
 background-color: #0186ba;
 text-shadow: 0px 0px 1px #FFF;
 }
#menu ul ul {
 position: absolute;
 top: 48px;
 visibility: hidden;
 }
#menu ul li:hover ul {
 visibility: visible;
 }
#menu ul ul:hover {
 box-shadow: 0px 20px 30px #7C7C7C;
 }
#menu ul ul li a {
 background-color: #3A3A3A;
 }
#menu ul ul li a:hover {
 background-color: #0186ba;
 }

.column1of2 {
 float: left;
 width: 455px;
 margin: 10px;}
.column2of2 {
 float: left;
 width: 455px;
 margin: 10px;}

</style>

</head>

<body>
<h1 align='center'>Elenco Tutorial</h1></p>

<div id="menu">
 <!-- Lista generale -->
 <ul>
 <!-- 1° Elemento -->
 <li><a href="#">Punto Informatico</a></li>
 <!-- 2° Elemento -->
 <li><a href="#">Texbuntu tutorial</a></li>
 <!-- 3° Elemento: (Sottomenu) -->
 <li><a href="#">LyX tutorial</a>
 <ul>
 <li><a href="#">LyX</a></li>
 <li><a href="#">Tutorial</a></li>
 <li><a href="#">Homepage LyX</a></li> </ul>
 </li>

 <li><a href="#">Markdown tutorial</a></li>
 <li><a href="#">Html tutorial</a></li>
 </ul>
</div>
<br>
<br>
<br>
<br>

<div class="feature">
<p> Questo è un paragrafo normale di largo quanto la pagina html. In questa pagina possiamo vedere l'impostazione di un paragrafo creato mediante un file CSS che
imposta il layout della nostra pagina web con un allineamento fisso.</p>
</div>

<div class="column1of2">
<h2> LyX </h2>

<p align='justify'> LyX è un word processor multi-piattaforma open source che potete usare con linux,
Windows o col Mac. E' uno dei programmi più usati dagli studenti all'università per scrivere le tesi.
Questo perché oltre a permettere di fare lavori di impaginazione all'altezza di lavori professionali consente di
risparmiare molto tempo. </p>
</div>

<div class="column2of2">
<h2> Immagina </h2>
<p align='justify'> Immaginate poter scrivere un documento come un libro o una lunga tesi divisa in
capitoli, sezioni e sottosezioni. Poi si dice al programma di creare l'indice e lui lo crea. Da solo crea
l'indice indicando i numeri di pagina e se in seguito noi andiamo a modificare il nostro documento
lui aggiorna l'indice automaticamente. Potete immaginare che bel risparmio di tempo non dover creare
l'indice manualmente e non doverlo aggiornare manualmente per ogni modifica che noi facciamo
al documento.</p>
</div>

<div class="footer">
<p> <hr /> Caio Sempronio &copy; 2017</p> </div>

</body>
</html>
Guida creare con i CSS

Guida creare con i CSS

Layout a larghezza fissa

Codice HTML intera pagina web
