Porte aperte sul web - newsletter

contenuto principale

Comunicare web a scuola - Numero 5

Bricioleweb

di Michele Basile, IPC Verri di Busto Arsizio (VA)

Menu orizzontale con i css

Quali difficoltà si incontrano nel costruire un menù orizzontale da inserire nelle pagine web utilizzando solamente codice XHTML e CSS?

Supponiamo di voler creare una barra di navigazione principale per il nostro sito web, da posizionare sotto la testata, come quella raffigurata nell’immagine seguente:

La caratteristica di questo menù è la presenza di un pulsante inattivo della pagina che stiamo visitando. Osservando la figura, possiamo notare come l’ultimo pulsante “Contatti” sia di colore diverso e senza collegamento, cioè non linkabile. La sua funzione è quindi duplice:

ci mette nelle condizioni di capire a colpo d’occhio in quale pagina web ci troviamo
la stessa pagina non è linkabile perché il relativo pulsante è disattivato.

Codice (X)HTML

Scriviamo il codice (x)html da inserire all’interno della pagina web.

<div id="barraorizzontale">     

	        <div class="bottone"><a href="index.html" title="Pagina principale">Home</a></div> 

	        <div class="bottone"><a href="docenti.html" title="Sezione docenti">Docenti</a></div> 

	        <div class="bottone"><a href="studenti.html" title="Sezione studenti">Studenti</a></div> 

	        <div class="bottone"><a href="segreteria.html" title="Sezione segreteria">Segreteria</a></div> 

	        <div class="bottonehere"><a href="contatti.html" title="Come contattare la scuola">Contatti</a>

	        </div> 

	        </div>

Volendo, gli stessi link li possiamo creare come semplice lista racchiusa tra i tag <ul> e </ul>, ma ciò comporta una differente modalità di impostazione del css. Definiamo ora gli stili e l’impaginazione della barra di navigazione nel CSS che verrà richiamato dalla pagina xhtml

body {

	margin:0px; padding:0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; background-color:#ffffff; text-align:center; 

	} 

	#barraorizzontale { 

	position:absolute; top:20px; left:20px; padding:2px; 

	} 

	.bottone a {

	float: left; padding: 2px; margin: 1px; background-color: #ffffff; border: 1px solid #800000; width:100px;   text-align:center; text-decoration:none; font-weight:bold; color:#800000;

	} 

	.bottone a:hover{

	background-color: :#800000; color:#FFF; 

	} 

	.bottonehere { 

	border: 1px solid :#800000; width:100px; text-align:center; float: left; padding: 2px; margin: 1px;  background-color:#800000; color:#FFF;  font-weight:bold; 

	}

È possibile prelevare i file dell’esempio, adattandoli alle proprie esigenze, digitando il seguente indirizzo: http://www.ipcverri.it/lavoroweb/esempi/menuorizzontale.zip.

Piccoli trucchi

Inserimento di separatori orizzontali nel documento di Word

Alle volte abbiamo l’esigenza di separare i paragrafi con delle linee orizzontali. In word esiste un metodo semplice e veloce per ottenere questo risultato. Per inserire una linea continua orizzontale che attraversi tutto il foglio di word, occorre procedere nel seguente modo:

aprite un documento di word
posizionatevi con il cursore nel punto in cui volete inserire la linea separatrice
digitate per tre volte il carattere – (meno) e successivamente il tasto “Invio”.

Attraverso ulteriori combinazioni di caratteri è possibile ottenere linee orizzontali di diverso spessore e stile: (### + invio) (___ + invio) (=== + invio) (*** + invio.

menu secondario