Menu orizzontale con i css

8 Novembre 2007

Vediamo come creare un menu orizzontale partendo da un elenco puntato tramite i css:

Ecco il codice html con l’elenco che diventerà il nostro menu:

<div id="navigation_1">
<ul>
<li id="home"><a href="#" title="Home ">Home</a></li>
<li id="contatti"><a href="#" title="Contatti">Contatti</a></li>
<li id="azienda"><a href="#" title="azienda">azienda</a></li>
</ul>
</div>


<div id="navigation_2">
<ul>
<li id="home"><a href="#" title="Home ">Home</a></li>
<li id="contatti"><a href="#" title="Contatti">Contatti</a></li>
<li id="azienda"><a href="#" title="azienda">azienda</a></li>
</ul>
</div>

Senza alcune proprietà css avremmo dei semplici elenchi puntati che non sono certo adatti a chi desidera un menu orizzontale:

Ora passiamo al foglio di stile, abbiamo due modi per rendere il menu orizzontale e centrato:

div#navigation_1{text-align: center}
li{display: inline} /*rendo gli elementi li inline*/

Oppure

div#navigation_2{text-align: center}
div#navigation_2 ul{width: 375px; margin: 0 auto; list-style-type:none;}
div#navigation_2 li{float: left;width: 75px} /*Rendo gli elemnti li float*/

Tutto ciò perché per creare un menu accessibile una elenco è molto meglio che mettere dei link uno dopo l’altro distanziati da uno spazio; il documento in quel caso non avrebbe una struttura logica e chiara per chi naviga con i browser testuali per esempio.
Ora basta sbizzarrirsi per rendere il menu gradevole a chi naviga con i css stando però siamo tranquilli che il tutto sarà comprensibile anche per chi i css li ha disattivati.

Visualizza l’esempio completo

Buona accessibilità a tutti allora.
Gabba Gabba Hey
Bonzo

Internet Explorer su Linux con ie4linux

16 Luglio 2007

Per chi sviluppa web uno dei problemi più grossi è quello di avere una visualizzazione corretta su tutti i browser.
Visto che il più utilizzato resta sempre IE, bisogna ingegnarsi per poterlo avere anche su Linux in tutte le sue versioni.

Ecco un piccolo aiuto per installarlo sul pinguino grazie a wine:

http://www.tatanka.com.br/ies4linux/page/Main_Page

Provatelo, è molto comodo.
Gabba Gabba Hey

Bonzo