docesempio di template con barra di navigazione orizzontale
download 
Reclamo Transcript
esempio di template con barra di navigazione orizzontale
ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE
Esempio di Template con barra di navigazione orizzontale – Ultima revusione 25/05/2015
Pag. 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Esempio di template con Menu Orizzontale</title>
<style type="text/css">
/*stili per il layout fisso con posizionamenti assoluti – barra di navigazione orizzontale*/
html,body{
margin: 0;
padding:0;
}
html{ font-size:100%; }
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px; /*valore di default per tutti i browser*/
line-height: 1.13em; /*equivale a 18,08px*/
text-align: center;
background-color: #809FFE;
/*colore sfondo body*/
}
div#contenitore{
position: relative; /*la posizione relativa va messa solo sul contenitore*/
width:974px; /*larghezza del contenitore e quindi di tutto il template*/
margin: 0 auto;; /*da mettere sempre*/
top: 20px; /*può mancare */
background-color: red; /*può mancare tanto il contenitore viene coperto dagli altri elementi */
}
div#intestazione{
position: absolute;
top: 0px;
left: 0px;
width:974px; /*larghezza del contenitore*/
height: 107px; /*altezza zona intestazione*/
background-color: green; /*colore sfondo intestazione*/
color: #FFFFFF;
Esempio di Template con barra di navigazione orizzontale – Ultima revusione 25/05/2015
Pag. 2
font-size: 1em; /*equivale a 16px*/
line-height: 1em; /*equivale a 16px*/
border: 1px solid red;
}
div#navigazione{
position: absolute;
top: 108px; /*questo valore va calcolato: top intestazione + altezza intestazione*/
left: 0px;
width:974px; /*larghezza del contenitore*/
height: 46px;
background-color: transparent; /*colore sfondo navigazione*/
color: #FFFFFF;
font-size: 1.5em; /*equivale a 32px*/
line-height: 1.3em;
border: 1px solid red;
}
#lista_navigazione{
/*si definisce il box che contiene il menu*/
margin: 0;
padding: 0;
list-style-type: none; /*facciamo in modo che non vengano visualizzati i punti dell'elenco puntato*/
background: yellow; /*colore sfondo intera lista elenco puntato*/
float:left;
width:974px;
}
#lista_navigazione li{
/*si definiscono le proprietà di ogni voce del menu, cioè ogni voce dell’elenco puntato*/
padding: 0;
margin: 0;
display: inline; /*dispone orizzontalmente le voci dell'elenco puntato*/
background: yellow; /*colore sfondo singole voci dell'elenco puntato*/
}
Esempio di Template con barra di navigazione orizzontale – Ultima revusione 25/05/2015
Pag. 3
#lista_navigazione li a{
/*si definiscono le proprietà dei collegamenti ipertestuali di ogni voce del menu*/
float: left; /*allinea tutta la lista a sinistra*/
color: #000; /*colore testo singola voce dell'elenco*/
border-right: 3px solid red; /*si definisce il bordo destro di ogni voce dell’elenco puntato*/
background: yellow; ; /*colore di sfondo di ogni singola voce dell'elenco*/
text-decoration: none; /*facciamo in modo che non vengano sottolineate le singole voci dell'elenco puntato*/
padding: .3em 1.5em; /*.3em equivale a 4,8px - 1.5em equivale a 24px spazio superiore e destro intorno ad ogni voce del menu */
}
#lista_navigazione li.home a:hover {
background: red; /*colore sfondo singole voci del menu al passaggio del mouse*/
}
div#contenuti{
position: absolute;
top: 155px; /*questo valore va calcolato: top navigazione + altezza navigazione*/
left: 0px;
width:974px; /*larghezza del contenitore*/
height: 600px; /*altezza zona contenuti*/
background-color: white; /*colore sfondo contenuti*/
overflow: Auto; width: 974px; /*Consente di scorrere con una barra laterale l'area contenuti*/
border: 1px solid red;
}
div#footer{
position: absolute;
top: 757px; /*questo valore va calcolato: top contenuti + altezza contenuti*/
left: 0px;
width:974px; /*larghezza del contenitore*/
height: 32px; /*altezza zona footer*/
text-align:center;
padding: 2px 0px;
background-color: red; /*colore sfondo footer*/
color: white;
border: 1px solid red;
line-height: 1.5em;
}
Esempio di Template con barra di navigazione orizzontale – Ultima revusione 25/05/2015
Pag. 4
</style>
</head>
<body>
<div id="contenitore">
<div id="intestazione"><br><br>
<span style="position: absolute; background-color:pink; width: 300px; top:5px; left: 10px;line-height: 1.2em;">Riga 1 Intestazione</span>
</div>
<div id="navigazione">
<ul id="lista_navigazione">
<li class="home"><a href="#" id="evidenziato">Homepage</a></li>
<li class="home"><a href="#">Chi siamo</a></li>
<li class="home"><a href="#">Risorse</a></li>
<li class="home"><a href="#">Link</a></li>
<li class="home"><a href="#">Contatti</a></li>
</ul>
</div>
<div id="contenuti"><br><br>
Zona Contenuti
</div>
<div id="footer">
Zona Footer
</div>
</div>
</body
</html>
Esempio di Template con barra di navigazione orizzontale – Ultima revusione 25/05/2015
Pag. 5
