|
| Precedente :: Successivo |
| Autore |
Messaggio |
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
 Inviato: 21 Dic 2005 11:36 Oggetto: * [tutorial] ancora menu orizzontali, ma stavolta con le gif |
 |
|
prendendo come partenza questo tutorial dove si crea un menu orizzontale con effetto onmouseover usando i colori, vediamo ora di crearne uno usando invece delle immagini come sfondo e di risolvere tutti i problemi creati dalla difficolta' di ottenere un accettabile crossbrowsing
partiamo dal codice (completo) della pagina:
| Codice: |
<html>
<head>
<title>Rollover</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="esterno">
<div id="header">
<h1>Eusebio snc</h1>
</div>
<hr />
<div id="menu">
<ul>
<li><a href="#"><span>HOME</span></a></li>
<li><a href="#"><span>CHI SIAMO</span></a></li>
<li><a href="#"><span>DOVE SIAMO</span></a></li>
<li><a href="#"><span>COSA FACCIAMO</span></a></li>
<li><a href="#"><span>ATTREZZATURA</span></a></li>
<li><a href="#"><span>CLIENTI</span></a></li>
</ul>
</div>
<hr />
<div id="corpo">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed facilisis nulla nec dolor.
Suspendisse potenti. Fusce pretium, erat ullamcorper pulvinar pharetra, magna elit tristique nisl,
adipiscing ornare dui diam quis ipsum. Nam ornare, pede eu pretium aliquet, nibh nisi dictum dui,
eget venenatis lorem ligula vitae felis. Vestibulum gravida, velit at iaculis sagittis, lectus
lectus porttitor odio, in ornare nibh orci id felis. In sed risus sit amet mi iaculis cursus.
Nullam pharetra neque. Sed cursus sagittis nibh. Cras sollicitudin. Nam commodo dolor. Donec metus
elit, nonummy eget, cursus a, vehicula sed, erat. Proin mi nisi, hendrerit a, porttitor a,
ullamcorper id, metus. Cras nec ante.</p>
</div>
<hr />
<div id="footer">
<p>by reb - zn</p>
</div>
</div>
</body>
</html>
|
come vedete non c'e' nulla di particolare rispetto al solito, tranne un tag span che contiene il testo del link del menu (il cancelletto nel tag a serve semplicemente a sostituire l'url di destinazione del link)
e ora il css:
| Codice: |
body {
background: #fff;
color: #000;
margin: 0px;
padding: 0px;
text-align: center;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 70%;
}
hr, h1 {
display: none;
}
#esterno {
width: 750px;
border: 1px solid #fff;
margin: 10px auto auto auto;
text-align: left;
}
#header {
height: 150px;
border: 1px solid #999;
margin-bottom: 20px;
background: url(logo.gif) no-repeat center center;
}
#menu {
background: url(sfondo.gif) repeat-x;
}
#menu ul {
list-style: none;
height: 30px;
margin: 0px 0px 0px 70px;
padding: 0px;
border-left: 2px solid #c0c0c0;
}
#menu li {
height: 30px;
float: left;
border-right: 2px solid #c0c0c0;
margin: 0px;
padding: 0px;
}
#menu a {
display: block;
width: 100px;
height: 30px;
text-align: center;
text-decoration: none;
font-size: 80%;
font-weight: bold;
color: #fff;
}
#menu a:hover {
background: url(sfondo_abbassato.gif) repeat-x;
}
#menu a span {
display: block;
height: auto;
width: 98%;
margin-top: 9px;
float: left;
text-align: center;
}
#menu a:hover span {
margin-top: 10px;
}
#corpo {
border: 1px solid #999;
margin: 20px 0px 20px 0px;
padding: 20px;
}
#footer {
border: 1px solid #999;
padding: 10px 20px 10px 20px;
text-align: right;
}
|
tralasciando header, corpo e footer che non hanno nulla di particolare, concentriamoci sul div menu; intanto le immagini usate:
 per la posizione "normale" e  per la posizione "tasto premuto"
(immagini rigorosamente a casaccio: se usate queste, rinominatele, oppure createne di vostro gusto: la scelta migliore  )
il codice:
| Codice: |
#menu {
background: url(sfondo.gif) repeat-x;
}
|
al div #menu do l'immagine di sfondo e la faccio ripetere per tutta la larghezza; c'e' chi preferisce fare un'immagine sottilissima, anche di un solo pixel per risparmiare peso, ma ho visto che a volte ci sono piccoli ritardi nel caricamento su tutta la larghezza, percio' personalmente preferisco farla larga dai 60 ai 100 pixel
| Codice: |
#menu ul {
list-style: none;
height: 30px;
margin: 0px 0px 0px 70px;
padding: 0px;
border-left: 2px solid #c0c0c0;
}
|
- come al solito tolgo il pallino dalla lista (list-style: none;)
- do l'altezza: in questo modo sara' l'ul che determinera' l'altezza del div
- siccome usero' il comando float, devo determinare in questo modo quanto spazio lasciare da un lato e dall'altro, percio' daro' 70px a sinistra (ricordo che i 4 comandi si leggono "alto-destra-basso-sinistra")
- tolgo il padding; assieme a margin 0 serve per sopperire a qualche baco dei browser
- il cliente desidera un bordo tra i tasti: questa prima parte mi serve per il bordo laterale sinistro del primo tasto
| Codice: |
#menu li {
height: 30px;
float: left;
border-right: 2px solid #c0c0c0;
margin: 0px;
padding: 0px;
}
|
- di nuovo do l'altezza
- faccio flottare l'elemento a sinistra; siccome prima ho dato un margin-left di 70 pixel a ul, il primo li partira' da quel punto, mentre gli altri si appoggeranno in sequenza
- border right: uno per ogni li completa la sequenza di bordi tra i tasti
- margin e padding a 0 sempre per il crossbrowsing: a differenza di quanto si potrebbe pensare, il comando "list-style: none" non e' letto dai browser come "togli il punto elenco" (!!!)
| Codice: |
#menu a {
display: block;
width: 100px;
height: 30px;
text-align: center;
text-decoration: none;
font-size: 80%;
font-weight: bold;
color: #fff;
}
|
sebbene sia applicabile anche ad altri elementi, ie legge l'effetto hover *solo* per il tag a, percio' e' ad esso che siamo costretti a darlo
- display block per rendere a - elemento in linea, quindi a dimensione variabile dal contenuto - un elemento block, quindi a dimensione determinabile da noi
- larghezza ed altezza
- allineamento centrale
- tolgo la sottolineatura dal link
- rimpicciolisco la font; il cliente aveva segnalato un sito con una particolare font molto piccola che usava pero' le gif per ogni tasto; siccome si trattava cmq di una font a bastoncino, anziche' complicarmi la vita personalizzando ogni tasto, ho preferito riadattare la font verdana che uso normalmente per ottenere un effetto molto simile a quello desiderato
- rendo piu' evidente la font
- do colore bianco
nota: anche la scelta di usare il maiuscolo per il testo dei pulsanti deriva da questa preferenza estetica del cliente; se la scelta e' accettabile in testi brevi quali i nomi dei pulsanti, in genere e' preferibile NON usare il maiuscolo per itesti lunghi, perche' compromette la facilita' di lettura
| Codice: |
#menu a:hover {
background: url(sfondo_abbassato.gif) repeat-x;
}
|
tutti i parametri impostati per a sono validi anche per hover, l'unica cosa che cambio e' l'immagine di sfondo o meglio: sovrascrivo l'immagine che sto usando per lo sfondo del div, con un'immagine di sfondo che dia l'effetto del tasto premuto
| Codice: |
#menu a span {
display: block;
height: auto;
width: 98%;
margin-top: 9px;
float: left;
text-align: center;
}
|
qua il problema era fare in modo che il testo restasse comunque centrato in verticale/orizzontale e leggibile anche con l'effetto hover del tasto senza sfasciare il layout, percio':
- ho dato anche allo span display block per renderlo "solido"
- ho dato altezza automatica, in questo modo l'altezza sara' la minima necessaria a contenere il testo
- ho dato una larghezza del 98% per evitare che "toccando" i bordi li allargasse, ma che cmq prendesse quasi tutta la larghezza dell'elemento contenitore
- ho dato un margin-top di 9 pixel per centrarlo verticalmente: questo mi e' concesso dall'aver dato precedentemente display block all'elemento
- l'ho fatto flottare a sinistra: siccome e' largo quasi quanto il contenitore, in realta' "flotta" poco, pero' "galleggia" nello spazio contenitore e gestisco meglio gli altri parametri
- centro il testo contenuto nell'elemento
| Codice: |
#menu a:hover span {
margin-top: 10px;
}
|
per completare l'effetto "bottone premuto", faccio in modo che quando sto sul pulsante il testo si abbassi di un pixel
et voila'!
alcuni comandi sono incomprensibili, ma purtroppo necessari per avere un minimo di sicurezza sulla stabilita' crossbrowsing del nostro layout (*)
per quanto riguarda l'accessibilita', il layout mantiene la struttura semantica corretta data dall'uso della lista per l'elenco dei link e permette anche un modesto ingrandimento senza sfasciarsi
personalmente non amo molto i layout che mi obbligano ad ingabbiare troppo gli elementi, ma a volte e' interessante vedere come sia possibile ottenere gli stessi effetti a cui ci avevano usato le tabelle anche con i div 
ah! nel caso qualcuno desiderasse personalizzare pulsante per pulsante, e' sufficiente dare un id ad ogni tag li e determinare le caratteristiche di ogni #qualcosa a e di ogni #qualcosa a:hover e di dare a #menu a span {display: none;}: altrettanto efficace ed utilizzabile nel caso vogliate usare una font particolare per i tasti, ad esempio
(*) nota: se facendo qualche prova ottenete risultati diversi (in meglio o in peggio o anche semplicemente lo stesso risultato ma con meno comandi), scrivetelo qua sotto, mi raccomando!
L'ultima modifica di rebelia il 21 Dic 2005 17:30, modificato 2 volte |
|
| Top |
|
 |
tas
Eroe in grazia degli dei
Registrato: 03/10/05 08:59
Messaggi: 166
Residenza: Profondo nord
|
| Inviato: 21 Dic 2005 17:12 Oggetto: |
|
|
 |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
| Inviato: 21 Dic 2005 17:24 Oggetto: |
|
|
| tas ha scritto: | |
piace? |
|
| Top |
|
|
garak
Eroe
Registrato: 09/06/05 14:17
Messaggi: 43
Residenza: Roma
|
| Inviato: 26 Dic 2005 11:08 Oggetto: ma le immagini? |
|
|
| Le immagini non si vedono mica tanto bene.... |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
| Inviato: 26 Dic 2005 12:05 Oggetto: Re: ma le immagini? |
|
|
| garak ha scritto: | | Le immagini non si vedono mica tanto bene.... |
sono immagini a caso fatte in tutta fretta, anziche' usare 'ste qua che ho postato io, crea due gif alte 30px e larghe 100 di tuo gusto/con i colori che ti servono ed usa quelle |
|
| Top |
|
|
{giovanni}
Ospite
|
| Inviato: 23 Gen 2008 13:43 Oggetto: IE bug, a:hover non torna NON hover |
 |
|
| con questo metodo, senza il float degli elementi, ho notato che su IE 6 una volta passati sopra ad a, la gif non scompare togliendo il puntatore. |
|
| Top |
|
|
|
|
Non puoi inserire nuovi argomenti
Non puoi rispondere a nessun argomento
Non puoi modificare i tuoi messaggi
Non puoi cancellare i tuoi messaggi
Non puoi votare nei sondaggi
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
