Progettazione e realizzazione di siti web

Le proprietà delle immagini di sfondo e la sostituzione del testo con un’immagine di sfondo per il logo identificativo del sito: file della lezione del 12 maggio 2008 (archivio ZIP).

Pubblicato da Paolo Sordi e archiviato in Realizzazione
I commenti sono chiusi

In questo esempio, un semplice layout a due colonne con testata contenente il nome del sito. La posizione del menu può essere facilmente spostata a destra del corpo centrale della pagina, sostituendo la proprietà left con la proprietà right del blocco del menu e azzerando la proprietà left per il blocco del contenuto.

La struttura

<h1>Il mio sito</h1>

<div id="contenuto">

<h2>Titolo della pagina</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod
  tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco <a href="#">laboris</a> nisi
  ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate
  velit esse cillum dolore <em>eu fugiat nulla</em> pariatur. Excepteur
  sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.
  </p>

<h3>Titolo del paragrafo</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod
  tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco <a href="#">laboris</a> nisi
  ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate
  velit esse cillum dolore <em>eu fugiat nulla</em> pariatur. Excepteur
  sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.
  </p>

<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod
  tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco <a href="#">laboris</a> nisi
  ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate
  velit esse cillum dolore <em>eu fugiat nulla</em> pariatur. Excepteur
  sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.
  </p>
  </div>

<div id="navigazione">
  <h2>Navigazione</h2>
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Chi siamo</a></li>
  <li><a href="#">Blog</a></li>
  </ul>
  </div>

Lo stile

body, div, h1,h2,h3,h4,h5,h6,p,ul,li,table, tr, td, dl,dt,dd {
margin: 0;
padding: 0;
}
body {
font-family: "Lucida Grande", "Lucida sans", Verdana, sans-serif;
font-size: 14px;
}
h1 {
background: black;
color: red;
text-align: center;
padding: 10px;
height:60px;
}
div#contenuto {
position: relative;
left: 30%;
width: 70%;
}
div#navigazione {
position: absolute;
top: 80px;
background: green;
width: 30%;
left: 0;
}

Pubblicato da Paolo Sordi e archiviato in Realizzazione
I commenti sono chiusi