Menù alternativo

**zell** · 30-05-2007, 19:56

Salve volevo farvi una domanda
devo realizzare un menù così composto...

all'interno di un div...ho un div che mi contiene una lista di foto in orrizontale e sopra a queste foto del testo, del tipo:

Testo Testo Testo Testo Testo Testo Testo

Foto1 Foto2 Foto3 Foto4 Foto5 Foto6 Foto7 Foto8 Foto9 Foto10

la confingurazione è quella di sopra...ogni foto in realtà è un link ad una sezione del sito (in pratica è un menù) e l'effetto che vorrei creare è quello che quando passo sopra alle foto con il mouse mi compaia del testo sopra

quindi del tipo passo con il mouse sopra Foto1 e mi compare sopra alle immagini: News
poi se vado su Foto6 mi compare Link

è possibile? non saprei come cercarlo perchè non che nome dargli...

Grazie a tutti

**Denic** · 30-05-2007, 23:14

per la questione di passare sopra all'immagine e creare un qualche effetto devi usare la funzione hover impostando un metodo nomediv:hover{ [...] }

**zell** · 31-05-2007, 00:46

ehm scusa ma non ho capito...

io devo mettere questo immagini in un div

poi avro nel css il
#div {

}

dentro questo div ho dei link quindi

#div a{

}

io quello che mi sto chiedendo è come far a settare quando passo sopra con il mouse sul link che in un'altro div venga scritto qualcosa?

se faccio
#div:hover {

}

dovrei fare così? ma così sembra quasi al passaggio sopra all'intero div...non ho capito

**Mich_** · 31-05-2007, 09:09

Anzitutto occore mettere ordine nella marcatura (che deve essre semanticamente corretta).
Mi par di capire che devi fare una lista di elementi, ciascuno dei quali e` un link, a sua volta contenente del testo e un'immagine. Quindi la marcatura potrebbe essere:

codice:

<div id="contenitore">
  <ul id="lista">[*]<span>testo</span>[img]...[/img][*]<span>testo</span>[img]...[/img]
    ....[/list]
</div>

Il CSS e` quindi quello standard di un menu orizzontale ad immagini (vedi link utili).

Chiaramente nel CSS ci dovra` essere (assieme a tente altre cose):

codice:

#lista {
  list-style-type: none;
  margin: 0:
  padding: 0;
  ...
}
#lista li {
  list-style-type: none;
  margin: 0:
  padding: 0;
  float: left;
  /*eventuali dimensioni
  ...*/
}
#lista a {
  display: block;
  width: 100%;
  height: 100%;
}
#lista span {
  display: block;
  width: 100%;
  text-align: center;
}
#lista img {
  display: block;
  margin: auto;
  border: 0; 
}
#lista a:link span {
  visibility: none;
}
#lista a:hover span {
  visibility: visible;
}

**zell** · 01-06-2007, 00:40

ma non funziona...

codice:

<body>
<div id="contenitore">
  <ul id="lista">[*]<span>testotestotestotesto estotestotestotesto estotestotestotesto </span>[img]300.jpg[/img][*]<span>testoestotestotestotesto estotestotestotesto estotestotestotesto estotestotestotesto </span>[img]300.jpg[/img]
    ....[/list]
</div>
</body>

utilizzando esattamente quel CSS...il testo si vede subito senza che passo sopra l'immagine...

**Mich_** · 01-06-2007, 09:28

Errore di sintassi (mio).
Nell'attributo visibility non c'e` il valore none: http://www.w3schools.com/css/css_ref...classification

Discussione: Menù alternativo

Strumenti discussione

Ricerca discussione

Visualizza

Menù alternativo

Permessi di invio