Ipertesti di Paolo Sordi

Tennis, tv, pendolarismo, web 2.0
(e altre cose divertenti che non farò mai più)

Skip to Main Content

Un semplice layout

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;
}

I commenti sono chiusi.

A proposito dell’autore

Ipertesti è a cura di Paolo Sordi. Laureato in legge alla Sapienza si è pentito e ha scontato un anno in un corso di perfezionamento in informatica giuridica, prima di specializzarsi presso la Scuola di Specializzazione in comunicazione multimediale dell'Università di Tor Vergata. Per saperne di più

Socializzazione

Letture (su aNobii)

Scatti (su Flickr)