Menù orizzontale di immagini...come?

[gnola]

Se io volessi (anzi devo) fare un menù orizzontale di immagini con i css come mi devo comportare?? Sono agli inizi e nelle guide che ho letto non mi è mai capitato di vedere una cosa del genere...cioè ho visto che si usano le liste di solito per i menù..ma nel mio caso ogni link ha una sua immagine e un rollover...come devo fare?? Una unica immagine con la mappa? Oppure???
Chi riesce a spiegarmi come muovermi oppure chi sà indicarmi degli esempi da cui attingere??
Grazie a tutti!!!

[pierofix]

Un esempio veloce. Partiamo dalla struttura di markup:

<ul id="navigazione">[*]Home[*]Informazioni[*]Note[/list]

Nel CSS nasconderemo il testo e lo sostituiremo con delle immagini di sfondo (che, suppongo, avranno larghezza pari a 200px e altezza pari a 100px):

ul,
ul *
{
   margin:0; padding:0;
}
   li
   {
      float:left;
      width:200px; height:100px;
   }
      li a
      {
         display:block;
         width:200px; height:100px;
         text-indent:-1000em; text-decoration:none;
         background:no-repeat 0 0;
      }

      #nav_home
      {
         background-image:url('home.gif');
      }
      #nav_home:hover
      {
         background-image:url('home-hover.gif');
      }
      #nav_info
      {
         background-image:url('info.gif');
      }
      #nav_info:hover
      {
         background-image:url('info-hover.gif');
      }
      #nav_note
      {
         background-image:url('note.gif');
      }
      #nav_note:hover
      {
         background-image:url('note-hover.gif');
      }

[gnola]

ciao pierofix non ho capito bene il codice del css...all'inizio manca qualcosa?? dove lo definisco nel foglio stile l'id navigazione?? scusa ma sono un pò ignorante in materia ancora

[pierofix]

Il codice del mio esempio è riferito solamente alla parte riguardante il menu.

[gnola]

si ma non vedevo nel css il pezzo che definiva l'id navigazione che invece avevi messo nell'html....
comunque ci sono riuscita....l'unico problema è che con firefox mi si vedono i pallini su ogni elemento della lista....come fare per nasconderlo??
Grazie mille per l'aiuto!

[gnola]

niente ho risolto anche per i pallini!

ciao!!

[digitos]

Originariamente inviato da pierofix
Un esempio veloce. Partiamo dalla struttura di markup:

<ul id="navigazione">[*]Home[*]Informazioni[*]Note[/list]

Nel CSS nasconderemo il testo e lo sostituiremo con delle immagini di sfondo (che, suppongo, avranno larghezza pari a 200px e altezza pari a 100px):

ul,
ul *
{
   margin:0; padding:0;
}
   li
   {
      float:left;
      width:200px; height:100px;
   }
      li a
      {
         display:block;
         width:200px; height:100px;
         text-indent:-1000em; text-decoration:none;
         background:no-repeat 0 0;
      }

      #nav_home
      {
         background-image:url('home.gif');
      }
      #nav_home:hover
      {
         background-image:url('home-hover.gif');
      }
      #nav_info
      {
         background-image:url('info.gif');
      }
      #nav_info:hover
      {
         background-image:url('info-hover.gif');
      }
      #nav_note
      {
         background-image:url('note.gif');
      }
      #nav_note:hover
      {
         background-image:url('note-hover.gif');
      }

noto che display: block lo applichi al tag a. Io solitamente lo applico direttamente al tag[*]. è sbagliato?

[pierofix]

Originariamente inviato da digitos
noto che display: block lo applichi al tag a. Io solitamente lo applico direttamente al tag[*]. è sbagliato?

Un elemento di lista ([*]) è già per default di tipo block. Io ho applicato questo tipo ad <a> al fine di assegnare ad esso delle dimensioni di larghezza e altezza (non applicabili a elementi di tipo inline).

[digitos]

Originariamente inviato da pierofix
Un elemento di lista ([*]) è già per default di tipo block. Io ho applicato questo tipo ad <a> al fine di assegnare ad esso delle dimensioni di larghezza e altezza (non applicabili a elementi di tipo inline).

ah si è vero. Infatti sono andato a vedermi il codice.

In effetti al tag[*] applico display: inline (come ho fatto sempre)

[pierofix]

#navigazione,
#navigazione *
{
   margin:0; padding:0;
}
   #navigazione li
   {
      float:left;
      width:200px; height:100px;
   }
      #navigazione li a
      {
         display:block;
         width:200px; height:100px;
         text-indent:-1000em; text-decoration:none;
         background:no-repeat 0 0;
      }

      #nav_home
      {
         background-image:url('home.gif');
      }
      #nav_home:hover
      {
         background-image:url('home-hover.gif');
      }
      #nav_info
      {
         background-image:url('info.gif');
      }
      #nav_info:hover
      {
         background-image:url('info-hover.gif');
      }
      #nav_note
      {
         background-image:url('note.gif');
      }
      #nav_note:hover
      {
         background-image:url('note-hover.gif');
      }