Con questo Tutorial creiamo un Layout con una pagina che ha una SideNav Fissa e contenuto scorrevole.
La SideNav Fissa permette di muoversi nel contenuto di una pagina mantenendo fisso una parte (o sezione) della pagina.
Abbiamo anticipato i Tutorial sui CSS con questo articolo: Tutorial CSS: Guida Introduttiva Con Esercitazione Pratica.
Il Tutorial che segue è scritto in codice HTML e CSS, con l'uso di una funzione in jQuery.
Prefazione
In questo Tutorial mostrerò come creare una pagina Web in HTML facendo uso di SideNav Fissa, come da fisgura seguente.
STEP 1: Definizione del Layout
Il Layout di pagina che andremo a creare avrà le caratteristiche come da immagine che segue:
STEP 2: Creazione delle Directory
Creazione di 3 directory:
- images : che conterrà le immagini che utilizzeremo nel Layout
- css : che conterrà il Codice di Sytle
- js : che conterrà il Codice di JQuery da Google che permette di non vedere la navigazione interna.
STEP 3: Definizione Nomi dei Files di Codice
Creazione di 2 files di codice:
- bli-tutorial-sidenav-fixed.html : che conterrà il Codice HTML, e rimarrà nella directory principale
- bli-tutorial-sidenav-fixed.css : che conterrà il Codice CSS, e verrà inserito nella directory CSS
STEP 4: Creazione delle Directory
Creiamo il Layout allineando la pagina e aggiungendo le due sezioni principali: SideNav Fissa e contenuto scorrevole.
Codice HTML in file: bli-tutorial-sidenav-fixed.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BLI.IT Tutorial - CSS: Layout Di pagina Con SideNav Fissa</title>
</head>
<body>
<!--Layout-->
<div class="container">
<div id="sidenav">
<!--Qui il contenuto della SideNav Fisso-->
</div>
<div id="content">
<!--Qui il contenuto dell'articolo che scorre-->
</div>
</div>
</body>
</html>
Codice CSS in file: bli-tutorial-sidenav-fixed.css
/*--Definizione del Background del Layout--*/
body {
border-top: 10px solid #444444;
margin: 0; padding: 0;
background: #f0f0f0 url('/../images/bli-background.jpg');
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #444;
}
/*--Definizione del Layout--*/
.container {
width: 980px;
margin: 0 auto;
overflow: hidden;
background: url('/../images/bli-container-stretch.gif');
font-size: 1.2em;
position: relative;
}
/*--Definizione della SideNav, sezione sinistra--*/
#sidenav {
width: 300px;
position: fixed;
float: left;
}
/*--Definizione del Contenuto, sezione destra--*/
#content {
float: right;
width: 640px;
padding: 0 20px 20px;
}
STEP 5: Problemi con Internet Explorer 6
Con il Browser Internet Explorer 6, e compatibili, si hanno problemi di posizione fissa. Di seguito il codice per risolvere questo incoveniente.
Codice CSS in file: bli-tutorial-sidenav-fixed.css
/*--Definizione del Background del Layout--*/
body {
border-top: 10px solid #444444;
margin: 0; padding: 0;
background: #f0f0f0 url('/../images/bli-background.jpg');
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #444;
}
/*--Definizione del Layout--*/
.container {
width: 980px;
margin: 0 auto;
overflow: hidden;
background: url('/../images/bli-container-stretch.gif');
font-size: 1.2em;
position: relative;
}
/*--Definizione della SideNav, sezione sinistra--*/
#sidenav {
width: 300px;
position: fixed;
float: left;
}
/*--Codice Per IE6--*/
*html #sidenav {
position: absolute;
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
/*--Definizione del Contenuto, sezione destra--*/
#content {
float: right;
width: 640px;
padding: 0 20px 20px;
}
STEP 6: Definiamo il Contenuto della SideNav (sezione sinistra)
Definiziamo il contenuto della SideNav inserendo il Logo, seguito da 2 livelli di intestazione (Categorie e Altre Pagine) realizzate con immagini, separati da una immagine, e un elenco di navigazione per ogni intestazione.
Codice HTML in file: bli-tutorial-sidenav-fixed.html
<div id="sidenav">
<!--Qui il contenuto della SideNav Fisso-->
<img src="/images/bli-logo.png" alt="" />
<img src="/images/bli-barra-separatrice.gif" alt="" />
<h2 class="categories">Categorie</h2>
<ul>
<li><a href="#">Servizi</a></li>
<li><a href="#">News e Articoli</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Demo</a></li>
</ul>
<h2 class="sites">Altre Pagine</h2>
<ul>
<li><a href="#">Il meglio Dal Web : Site Web</a></li>
<li><a href="#">Il meglio Dal Web : Attualita'</a></li>
<li><a href="#">Il meglio Dal Web : Originalita'</a></li>
<li><a href="#">Il meglio Dal Web : Software</a></li>
<li><a href="#">Il meglio Dal Web : Free Fonts</a></li>
<li><a href="#">Il meglio Dal Web : Free Icons</a></li>
<li><a href="#">Il meglio Dal Web : Tutorial</a></li>
<li><a href="#">Il meglio Dal Web : Creativita'</a></li>
</ul>
</div>
Codice CSS in file: bli-tutorial-sidenav-fixed.css
/*--Definizione della SideNav, sezione sinistra--*/
#sidenav {
width: 300px;
position: fixed;
float: left;
}
*html #sidenav {
position: absolute;
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
#sidenav h2 {
text-indent: -99999px;
height: 41px;
padding: 0; margin: 15px 0 5px;
background-position: 20px top;
}
h2.categories {background: url('/../images/bli-h2-categorie.png') no-repeat ;}
h2.sites {background: url('/../images/bli-h2-altre-pagine.png') no-repeat ;}
#sidenav ul {
margin: 0; padding: 0 20px 30px 20px;
list-style: none;
background: url('/../images/bli-barra-separatrice.gif') no-repeat right bottom;
}
#sidenav ul li{
margin: 0; padding: 0;
display: inline;
}
#sidenav ul li a{
display: block;
margin: 0; padding: 5px 0 5px 15px;
background: url('/../images/bli-maggiore.gif') no-repeat left center;
text-decoration: none;
color: #333;
}
#sidenav ul li a:hover {
color: #999;
}
STEP 7: Definiamo il Contenuto dell'Articolo (sezione destra)
Definiziamo il contenuto dell'Articolo con una intestazione realizzata con immagine, titoli e contenuti per ogni titolo con immagini.
Codice HTML in file: bli-tutorial-sidenav-fixed.html
<div id="content">
<!--Qui il contenuto dell'articolo che scorre-->
<h1>Tutorial Per Il Web Design</h1>
<h2>What Is Lorem Ipsum?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="/images/bli-image-content.gif" alt="Blog Image Goes Here" />
<h2>What Is Lorem Ipsum?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="/images/bli-image-content.gif" alt="Blog Image Goes Here" />
<h2>What Is Lorem Ipsum?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="/images/bli-image-content.gif" alt="Blog Image Goes Here" />
</div>
Codice CSS in file: bli-tutorial-sidenav-fixed.css
/*--Definizione del Contenuto, sezione destra--*/
#content {
float: right;
width: 640px;
padding: 0 20px 20px;
}
#content h1 {
background: url('/../images/bli-h1-titolo-content.png') no-repeat center top;
text-indent: -9999px;
height: 145px;
margin: 0 0 0 -20px; padding: 0;
}
#content h2 {
color: #7f0708;
margin: 10px 0; padding: 10px 0;
font-size: 2em;
font-weight: normal;
}
#content p {
line-height: 1.8em;
padding: 7px 0;
margin: 7px 0;
}
STEP 8: Link dei File CSS e JS
Inseriamo i Link dei file esterni:
- CSS : bli-tutorial-sidenav-fixed.css , che abbiamo appena generato e si trova nella directory CSS
- JS : jquery-1.3.2.min.js , il download da Google e abbiamo inserito nella directoru JS
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BLI.IT Tutorial - CSS: Layout Di pagina Con SideNav Fissa</title>
<link rel="stylesheet" type="text/css" href="/css/bli-tutorial-sidenav-fixed.css" />
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
</head>
Concludendo
Se sono stati seguiti tutti gli Step come riportato in questo Tutorial si ha definito una pagina Web e il suo foglio di stile in CSS, utilizzando una jQuery esterna, con SideNav fissa e contenuto scorrevole.
Questo Tutorial viene fornito in Licenza Creative Commons . In caso di utilizzo è necessario riportare la fonte facendo riferimento a questo Sito Web e all'Articolo.
Circa L'Autore: Lorenzo Bergamini |
|
 |
Ciao, sono Lorenzo Bergamini e sono un Libero Professionista (freelance) in Italia, specializzato nel Project e Program Management (gestione progetti dal pc al mainframe e Convalida), nell'analisi e sviluppo di programmi (dal pc al mainframe) e nel design e graphics designer di Siti Web, ed altro ancora legato all'I.T. e alla gestione aziendale. Mi occupo anche di scrittura pubblicando racconti. Puoi seguirmi sul mio sito web Lorenzo Bergamini. |
 Introduzione Al PHP - Lezione 1 di 3
Il PHP è un linguaggio (o codice) di sviluppo che può essere utilizzato dai maggiori Sistemi Operativi (non solo PC, MAC o Linux, ma anche... Leggi tutto...  Ispirazione Settimana 0947: Classic American Pinups
Come Ispirazione della Settimana 0947 proponiamo un'interessante e singolare collezione di 106 Immagini Classic American Pinups, da cui prendere... Leggi tutto...  Ispirazione Settimana 0946: Layout Web Home Pages Argomenti Misti
Come Ispirazione della Settimana 0946 proponiamo un'interessante collezione di 87 Layout Web Home Pages con argomenti misti, da cui prendere... Leggi tutto...  Ispirazione Settimana 0945: Layout Web Home Pages Da DeviantArt
Come Ispirazione della Settimana 0945 proponiamo una splendida collezione di 76 Layout Web Home Pages a soggetto misto, realizzata da Artisti di... Leggi tutto... |
|
Per condividere questo articolo con i Bookmarks clicca su Share o Condividi
|
Per essere sempre aggiornato iscriviti alla BLI.IT RSS FEED |
Per inserire un link di questo articolo sul tuo blog o sito web clicca su Quote this article on your site e ottieni il codice.
|
Per ulteriori dettagli, richieste e consulenze contattaci utilizzando i moduli presenti in Richiesta Informazioni, telefona durante gli orari di ufficio al numero +39 051 19900317 o con Skype o al numero +39 388 9328157, o invia un fax al numero +39 051 19901217.
Condividi
Twitter
Myspace
Bookmarks.cc
Digg
Del.icio.us
Reddit
Slashdot
Netscape
Furl
Yahoo
Technorati
Newsvine
Blinkbits
Ma.Gnolia
Smarking
Googlize this
Blinklist
Facebook
Wikio
Diggita
Kipapa.cc
Notizieflash
OKnotizie
Segnalo
Ziczac
