Sovrapporre Testo Con Link E Immagini Ad Una Immagine Di Sfondo

[momo93]

Ciao a tutti!!
Vi chiedo aiuto, abbiate pazienza non sono molto pratica..

Sto cercando di creare un sito in cui ci sia un div fisso a sx, come menù, che contenga diversi link di collegamento per le varie gallery.
Il sito si sviluppa orizzontalmente, così ho creato un div fisso con un'opacità ridotta per il menù, e in trasparenza si vedono scorrere le diverse immagini delle gallery.

Ora il problema è che per fare questo ho creato un div con una immagine a bassa opacità, ma su questa vorrei inserire i vari link, di testo e immagini.. e non so come fare

Vi prego aiutatemiii!

[Mich_]

Anzitutto va detto che il mouse agisce solo sul livello superiore: qualsiasi cosa si veda o intravveda sotto non e` accessibile al mouse (e quindi al click = i link dei livelli inferiori sono irrangiungibili).

Per avere un livello con le scritte ad opacita` 100% e lo sfondo sempitrasp, devi usare un'immagine di sfondo cha ha opacita` intrinsica (ad esempio un png), e poi definire lo sfondo:
background: transparent url(tua_immag_semitrasp.png);

(nota: si puo` anche usare il colore rgba, ma solo per i browser che lo supportano)

Non so se ho risposto (in effetti rileggendo la domanda ho dubbi interpretativi)

[momo93]

hai ragione scusami non sono riuscita a spiegarmi bene.. ti lascio il link di come vorrei riuscire a realizzare il sito, www.photophilla.it

[Mich_]

La pagina a quel link e` molto complessa. Tra l'altro ci sono una serie di effetti, che immagino siano realizzati tramite JS, che quindi non prendo in considerazione.

Personalmente non amo le pag sviluppate in orizzontale (perche` non si possono scorrere con la rotellina del mouse), ma questo e` un discorso che esula dalla discussione.

Fondamentalmente c'e` un menu con position: static; con sfondo semitrasp., sotto al quale scorrono una serie di immagini. Sopra ciascuna immagine compare una didascalia all':hover.

Chiaramente il menu avra` z-index maggiore del contenitore di tutto il resto.

Per il menu, ti rimando alle raccolte (alcune ne trovi tra i "link utili" di questo forum): scegli il menu che ti piace di piu` e copialo (controlla il copyright: a volte chiedono di inserire il nome di chi lo ha sviluppato).

Per il posizionamento statico, ti rimando ai manuali CSS.

Per l'effetto all':hover (che si realizza anche solo con CSS), la struttura puo` essere di questo tipo:

HTML:
<a href="#" onclick="return:false;" title="..." class="img_grande">
  [img]...[/img]
  <span>testo didascalia</span>
</a>

CSS:
.img_grande {
  width: ...;
  height: ...;
  display: block;
  position: relative;   /* questo serve per posizionare la didascalia */
}
.img.grande span {
  position: absolute;
  width: 100%;
  height: 100px;    /* o quello che serve */
  background: transparent url(semitrasp.png);
  bottom: 0;
  padding: ....;      /* ad libitum */
  line-height: ...;    /* probabilmente uguale a height */
}
.img.grande:link span {
  display: none;
}
.img.grande:hover span {
  display: block;
}

Ritengo che con queste info e i riferimenti, riesci a realizzare il tutto.
L'importante e` fare un passo alla volta, e non pretendere che funzioni tutto il primo colpo.

Puoi iniziare con il posizionare un blocco con un link in modo statico, e farci girare sotto qualcosa (che deve avere dimensioni grandi ed aver dentro qualcosa per poter vedere il movimento). Poi nel blocco statico ci metti il menu, e dimensioni il blocco secondo le esigenze; infine metti le immagini nel contenitore che si muove sotto lo statico,