bottoni di navigazione

applicazione del posizionamento assoluto: i bottoni sono resi in questo documento html usando la classe navbutton

<div class="navbuttons">
   <a href="dummy.html">
   <img class="button" src="./vintage_img/2.1.jpg" alt="back" width="50" />

   </a> <a href="dummy.html">
   <img class="button" src="./vintage_img/anim_earth.gif" alt="next" width="50" /></a>

   <a href="dummy.html">
   <img class="button" src="./vintage_img/2.1.jpg" alt="home" width="50" /></a>
</div>

la classe navbutton e quella button (notare che il posizionamento della caption e' "relative", volendo cosi' dire che le specifiche date vengono attuate "a partire dalla posizione naturale dell'elemento":

.navbuttons {
   position:absolute;
   top:0%;
   left:0%;
   background: #09F;
   border:5px outset;
   margin:10px;
   z-index:7
}

.button {border:5px outset #339933; margin:4px}

Intestazione (titolo?)

il titolo e' posizionato in modo assoluto, usando la classe headerText

<div class="headerText">
Posizionamento assoluto di oggetti
</div>

la classe headerText:

.headerText {
   position:absolute;
   top:0%;
   left:30%;
   background: black;
   border-style: ridge;
   margin-top:10px;
   padding:.5ex .5em;
   text-align:center;
   font-weight:bold;
   z-index:1
}

L'immagine a sinistra, cosi' e cosi'

e pure l'immagine e' sistemata in modo assoluto, usando la classe picture pe il suo posizionamento e usando la classe aption per formattare e posizionare il testo che funge da "caption" della figura

<div class="picture">
<img src="Casablanca.jpg" alt="il film!" width="300px" /><br />
<div class="caption">Fig 3 - poster</div>
</div>

le classi picture e caption:

.picture  {
   position:absolute;
   top:20%;
   left:2%;
   z-index:2
}

.caption {
   position:relative;
   top:-1.5ex;
   left:0.5em;
   font-style:italic;
   font-size: 120%;
   font-weight: bold;
   color: black;
   z-index:3
}