HTML Tutorial

CSS: layout a larghezza fissa


Un layout a larghezza fissa non contempla alcuna variazione dimensionale quando l'utente aumenta o riduce le dimensioni della finestra del browser. In genere le misurazioni vengono fornite in pixel.

Per creare un layout a larghezza fissa, la larghezza dei box principali della pagina dovranno normalmente essere specificati in pixel. Talvolta dovrà essere specificata anche l'altezza.

Occorre anche definire le classi per i <div> di ciascun elemento della pagina e le relative caratteristiche. Occorre specificare queste informazioni nel file CSS.

Nel file CSS indicheremo anche la lunghezza dalla pagina, dei paragrafi, che font intendiamo usare e l'allineamento che volgliamo usare per i titoli. Occorre altresì specificare l'immagine o il colore dello sfondo della nostra pagina web.

Occorre anche definire le classi per i div che intendiamo usare e le relative caratteristiche. Quindi definire i menù di navigazione delle pagine, i pulsanti e ogni elemento che intendiamo usare nella pagina web. Con il file CSS possiamo definire lo stile di qualunque elemento inseriamo nella nostra pagina web.

Facciamo ora l'esempio del codice HTML di una semplice pagina web con layout a larghezza fissa:

<!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>

Il risultato lo potete vedere qui.