ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE. Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag.

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE. Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag."

Domenico Corsini
7 anni fa
Visualizzazioni

1 ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag. 1

2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <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{ 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{ top: 0px; 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

3 font-size: 1em; /*equivale a 16px*/ line-height: 1em; /*equivale a 16px*/ div#navigazione{ top: 108px; /*questo valore va calcolato: top intestazione + altezza intestazione*/ height: 46px; background-color: transparent; /*colore sfondo navigazione*/ color: #FFFFFF; font-size: 1.5em; /*equivale a 32px*/ line-height: 1.3em; #lista_navigazione{ /*si definisce il box che contiene il menu*/ 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; 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

4 #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{ top: 155px; /*questo valore va calcolato: top navigazione + altezza navigazione*/ 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*/ div#footer{ top: 757px; /*questo valore va calcolato: top contenuti + altezza contenuti*/ height: 32px; /*altezza zona footer*/ text-align:center; padding: 2px 0px; background-color: red; /*colore sfondo footer*/ color: white; line-height: 1.5em; Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag. 4

5 </style> </head> <body> <div id="contenitore"> <div id="intestazione"><br><br> <span style=" background-color:pink; width: 300px; top:5px; left: 10px;line-height: 1.2em;">Riga 1 Intestazione</span> <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 id="contenuti"><br><br> Zona Contenuti <div id="footer"> Zona Footer </body </html> Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag. 5

Documenti analoghi

layout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto

layout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto Posizionamento con i CSS creare layout senza tabelle 1 Gestione degli elementi della pagina Il box model Ad ogni elemento HTML corrisponde un area rettangolare, detta box Margine Bordo Area di padding