10 – Bricioleweb
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.