Layout liquido

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: 97%;
    font-family: Arial, Verdana, sans-serif;
    color: #000000;
    margin: auto;}
h1 {
    background-color: #efefef;
    margin: 1% 0 1%;
    padding: 1%;}
h2 {
    text-align: center;
    padding: 5px;}
p {
    width: auto;
    margin: auto;
    }
    
.feature, .footer {
    width: 97%;
    background-color: #FFFFFF;
    padding: 0px;
    margin: auto;
    }
  
hr { 
    border: 0;
    width: 100%;
    color: #000000;
    background-color: #000000;
    height: 1px;
    }  

  
  /* reset stili */

ul  {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

/* lista orizzontale */

#menu li {
    display: inline-block;
    position: relative;
    }

/* menu */

#menu {
    width: 100%;
    background-color: black;
    background: -moz-linear-gradient(#444, #111); /* firefox*/
    background: linear-gradient(#444, #111);
    border: 1px solid #222;
    border-radius: 6px;
    box-shadow: 1px 1px 4px #777;
    text-align: center;
    }

/* links */

li a {
    display: block;
    padding: 12px 20px;
    width: 150px;
    color: #999;
    text-transform: uppercase;
    font: bold 0.7em Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px #000;
    border-right: 1px solid #222;
    box-shadow: 1px 0 #444;
    }

/* rimuoviamo il bordo e l'ombreggiatura dall'ultimo link del menu */

#donate {
    border: none;
    box-shadow: none;  
    }

/* links hover */

a:hover {
    color: #C8C8C8;
    }
/* sub menu */

#menu li .hidden {
    display: block;
    position: absolute;
    top: 100px;
    left: 0;
    background-color: black;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    }

/* links sub menu */

#menu li .hidden li a {
    width: 100px;
    border-bottom: 1px solid #202020;
    border-right: none;
    box-shadow: none;
}
/* menu hover */

#menu li:hover .hidden {
    margin-top: -65px;
    opacity: 1;
    -webkit-transition: all 0.5s ease; /* safari and chrome */
    -moz-transition: all 0.5s ease; /* firefox */
    -o-transition: all 0.5s ease; /* opera */
    transition: all 0.5s ease;
    visibility: visible;
    }
@media only screen and (max-width: 768px) {
  
#menu {
    background: none;
    border: none;
    border-radius: 0;  
    box-shadow: none;
    text-align: center;
    display: none;  
}
  
/* rendiamo gli elementi dei menu elementi di blocco */  
  
ul li {
    display: block;
    }
  
/* impostiamo la larghezza massima per gli elementi dei menu e i links */  
  
ul li, ul li a {
    padding-right: 0;
    padding-left: 0;
    width: 100%;
    }
  
#menu li .hidden li, #menu li .hidden li a {
    width: 100%;
    }

/* rendiamo visibili gli elementi del sub menu solo al passaggio del mouse */  
  
#menu li .hidden li {
    display: none;
    }
 
#menu li:hover .hidden li {
    display: block;
    }  

/* aumentiamo la grandezza dei links */ 
  
li a {
    font: bold 0.9em Arial, Helvetica;
    } 
  
/* resettiamo la posizione degli elementi del menu */  
  
#menu li {
    position: static;
    }  
  
/* resettiamo la posizione del sub menu e lo rendiamo visibile */  

#menu li .hidden {
    position: static;
    opacity: 1;
    visibility: visible;
    }
  
/* rimuoviamo bordo e ombreggiatura dai links del menu */
  
#menu li a {
    border: none;
    box-shadow: none;  
}  
  
/* nessuna animazione al passaggio del mouse */  
  
#menu li:hover .hidden {
    margin: 0;
    } 
  
/* rimuoviamo il bordo dai links del sub menu */  
  
#menu li .hidden li a {
    border: none;
    }
  
/*diamo un colore di sfondo agli elementi del menu e del sub menu */
  
#menu li {
    background-color: black;
    }
  
#menu li .hidden li {
    background-color: #003366;
    } 
    
    }

/* diamo uno stile al pulsante del menu e nascondiamolo */

.showMenu {
    padding: 10px 0;
    color: white;
    background: #0066FF;
    text-align: center;
    display: none;
    }
/* nascondiamo il checkbox */

input[type=checkbox]{
    display: none;
    }

/* mostriamo il menu quando il checkbox viene selezionato */

input[type=checkbox]:checked ~ #menu {
    display: block;
    }
/* mostriamo il pulsante del menu */
        
.showMenu {
    display: block;
    }

.column1of2 {
    float: left;
    width: 46%;
    margin: 1%;}
.column2of2 {
    float: left;
    width: 46%;
    margin: 1%;}
  
  </style>

</head>

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

<div>
  <label for="showMenu" class="showMenu">
  <i class="fa fa-align-justify fa-lg"></i>
  Menù
</label>
<input type="checkbox" id="showMenu" role="button">
 <ul id="menu"> 
  <li><a href="http://">Home</a></li>
  <li><a href="http://">LyX</a></li>
  <li><a href="http://">Tutorial</a>
    <ul class="hidden"> 
      <li><a href="http://">Tutorial 1</a></li>
      <li><a href="http://">Tutorial 2</a></li>
      <li><a href="http://">Tutorial 3</a></li>
    </ul>
  </li>
  <li><a href="http://">Guide LyX</a></li>
  <li><a href="http://">Modelli</a>
    <ul class="hidden"> 
      <li><a href="http://">Modello 1</a></li>
      <li><a href="http://">Modello 2</a></li>
      <li><a href="http://">Modello 3</a></li>
      <li><a href="http://">Modello 4</a></li>
      <li><a href="http://">Modello 5</a></li>
    </ul>
  </li>
  <li><a id="donate" href="http://">Contatti</a></li>
</ul>
</div>
<br>
<br>

<div class="feature"> 
<p align='justify'> Questo è un paragrafo normale. In questa pagina possiamo vedere
l'impostazione di un paragrafo creato mediante un file CSS che imposta la nostra pagina web con un il layout liquido.
Quindi l'aspetto della pagina cambierà allargando o stringendo la finestra del browser.</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 liquido

Codice HTML intera pagina web
