Area sviluppo Tesene

Riporto qui sotto il codice probabilmente più minimalista possibile per fare un menu orizzontale con i fogli di stile.

Funziona con praticamente tutti i browsers esistenti, e si basa su un elenco puntato non numerato.

(more…)

Anche per questo post devo ringraziare il collega che mi ha posto il problema.

Il problema di fondo è che normalmente se si prova a fare un menu orizzontale con i dropdown in CSS, e sotto c'è un filmato flash, va a finire che il menu rimane non visibile sotto al filmato.

Per risolvere questo problema molto fastidioso, c'è un solo metodo: aggiungere il parametro wmode ed impostare il suo valore a transparent nel codice di inclusione del filmato Flash.

<param name="wmode" value="transparent" />

Quindi il flash va messo dentro un div in modo che si possa definirne la posizione, ma questo è abbastanza ovvio, ed assegnargli uno z-index pari a zero. Ad esempio:

<div id="header">
<div id="flash">il filmato flash va qui</div>
</div> 

#flash {
    width: 700px;
    height: 300px;
    position: absolute;
    z-index: 0;
}

#header {
    height: 300px;
    margin-bottom: 30px;
    text-align: left;
}

Quindi si definiscono gli elementi che vanno visualizzati sopra all'animazione Flash e gli si assegna z-index pari a 1.

Preferire <link> rispetto @import

E' meglio che i riferimenti ai fogli di stile CSS siano all'inizio della pagina, in modo da permettere un rendering progressivo.

In IE @import si comporta come se fosse un <link> alla fine della pagina, per cui è meglio non usare @import.