problemi con i link

[manublack]

Ciao a tutti,

apro questa discussione perchè ho un problema che non so come risolverlo, nel senso che ho una lista

<ul class="cb-slideshow"> 						[*]<span>Image 01</span><div><a href="ciao.php"><h3>Tecnologia, Stile e Fantasia 
        Italiana al miglior prezzo</h3></a></div> 						[*]<span>Image 02</span><div><h3>Il nostro servizio chiavi in mano
        </h3></div> [*]<span>Image 03</span><div><h3>L'amore per la cucina dal 1953
        </h3></div>[*]<span>Image 04</span><div><h3>Perch&egrave scegliere una cucina Clivio?
        </h3></div>[*]<span>Image 05</span><div><h3>Non solo cucine...</h3>
        </div> 						[*]<span>Image 06</span><div><h3>Rete di vendita internazionale
        </h3></div>[/list]

Bene a questa lista gli ho applicato questo tipo di css:

.cb-slideshow, 
.cb-slideshow:after { 	
        list-style: none;      
        position: fixed;     
        width: 100%;     
        height: 100%;     
        top: 0px;     
        left: 0px; 	
        display:block;
}  

.cb-slideshow a{ 	
       text-decoration:none; 	
       color:white; 
}  

.cb-slideshow li span {      
       width: 100%;     
       height: 80%;     
       position: absolute;     
       top: 0px;     
       left: 0px;     
       color: transparent;     
       background-size: 100%;     
       background-position: 50% 50%;     
       background-repeat: none;     
       opacity: 0; 	
} 

.cb-slideshow li div {      
        position: absolute;     
        bottom: 10px;     
        left: 0px;     
        width: 100%;     
        text-align: center;     
        opacity: 0;     
        color: #fff;     
        -webkit-animation: titleAnimation 48s linear infinite 0s;     
        -moz-animation: titleAnimation 48s linear infinite 0s;     
        -o-animation: titleAnimation 48s linear infinite 0s;     
        -ms-animation: titleAnimation 48s linear infinite 0s;     
        animation: titleAnimation 48s linear infinite 0s;  
} 

.cb-slideshow li div h3 {      
        font-family: Italic; 	
        padding:10px;     
        font-size: 35px; 	
        background-color:#000; 	
        opacity: 0.7;    	
        line-height: 120px; 	
        text-decoration:none; 
}  

.cb-slideshow li:nth-child(2) div {      
        -webkit-animation-delay: 8s;     
        -moz-animation-delay: 8s;     
        -o-animation-delay: 8s;     
        -ms-animation-delay: 8s;     
        animation-delay: 8s;  
} 

.cb-slideshow li:nth-child(3) div {      
        -webkit-animation-delay: 16s;     
        -moz-animation-delay: 16s;     
        -o-animation-delay: 16s;     
        -ms-animation-delay: 16s;     
        animation-delay: 16s;  
} 

.cb-slideshow li:nth-child(4) div {      
        -webkit-animation-delay: 24s;     
        -moz-animation-delay: 24s;     
        -o-animation-delay: 24s;     
        -ms-animation-delay: 24s;     
        animation-delay: 24s;  
} 

.cb-slideshow li:nth-child(5) div {      
        -webkit-animation-delay: 32s;     
        -moz-animation-delay: 32s;     
        -o-animation-delay: 32s;     
        -ms-animation-delay: 32s;     
        animation-delay: 32s;  
} 

.cb-slideshow li:nth-child(6) div {      
        -webkit-animation-delay: 40s;     
        -moz-animation-delay: 40s;     
        -o-animation-delay: 40s;     
        -ms-animation-delay: 40s;     
        animation-delay: 40s;
} 

/* Animation for the title */ 

@-webkit-keyframes titleAnimation {      
        0% { opacity: 0 }     
        8% { opacity: 1 }     
      17% { opacity: 1 }     
      19% { opacity: 0 }     
     100% { opacity: 0 } 
} 

@-moz-keyframes titleAnimation {      
         0% { opacity: 0 }     
         8% { opacity: 1 }     
        17% { opacity: 1 }     
        19% { opacity: 0 }     
       100% { opacity: 0 } 
} 

@-o-keyframes titleAnimation {      
         0% { opacity: 0 }     
         8% { opacity: 1 }     
        17% { opacity: 1 }     
        19% { opacity: 0 }     
      100% { opacity: 0 } 
} 

@-ms-keyframes titleAnimation {      
          0% { opacity: 0 }     
          8% { opacity: 1 }     
        17% { opacity: 1 }     
        19% { opacity: 0 }     
      100% { opacity: 0 } 
} 

@keyframes titleAnimation {      
          0% { opacity: 0 }     
          8% { opacity: 1 }     
         17% { opacity: 1 }     
         19% { opacity: 0 }     
         100% { opacity: 0 } 
}

Adesso se è possibile qualcuno mi saprebbe dare una mano in quanto non capisco perchè nel punto dove ho inserito il tag <a> nella lista, a video non mi permette di cliccarci sopra mostrandomi solo la scritta?

Grazie anticipatamente.

[Prill]

guardando rapidamente il tuo codice vedo innanzitutto che il tag a racchiude un elemento blocco (h3), il che non è corretto, dovrà piuttosto essere al suo interno. Ma il problema è probabilmente dovuto alla sovrapposizione di altri elementi rispetto al link che, risultando coperto, non è cliccabile. Potrebbe essero lo span, che ha una larghezza pari al 100%. Quando si usano i posizionamenti assoluti, se si vogliono sovrapposizioni, per dare indicazioni sulla "stratificazione" bisognerà usare lo z-index (stabiliamo cosa apparirà in primo piano, cosa al livello o ai livelli sottostanti), se non vogliamo sovrapposizioni dobbiamo impostare il tutto più attentamente

[manublack]

Originariamente inviato da Prill
guardando rapidamente il tuo codice vedo innanzitutto che il tag a racchiude un elemento blocco (h3), il che non è corretto, dovrà piuttosto essere al suo interno. Ma il problema è probabilmente dovuto alla sovrapposizione di altri elementi rispetto al link che, risultando coperto, non è cliccabile. Potrebbe essero lo span, che ha una larghezza pari al 100%. Quando si usano i posizionamenti assoluti, se si vogliono sovrapposizioni, per dare indicazioni sulla "stratificazione" bisognerà usare lo z-index (stabiliamo cosa apparirà in primo piano, cosa al livello o ai livelli sottostanti), se non vogliamo sovrapposizioni dobbiamo impostare il tutto più attentamente

ti ringrazio del suggerimento... ho risolto trasformando tutti i tag in collegamenti....

[Prill]

ho risolto trasformando tutti i tag in collegamenti

ma non dovevi trasformare tutto in collegamenti, dovevi aggiungere qualche z-index (uno z-index:1 su un elemento lo avrebbe portaato al di sotto di un altro elemento con z-index:2 e cosivvia), e il tag a poteva avere un display:block ed essere contenuto in h3 (se avevi bisogno di un titolo)

[manublack]

Originariamente inviato da Prill
ma non dovevi trasformare tutto in collegamenti, dovevi aggiungere qualche z-index (uno z-index:1 su un elemento lo avrebbe portaato al di sotto di un altro elemento con z-index:2 e cosivvia), e il tag a poteva avere un display:block ed essere contenuto in h3 (se avevi bisogno di un titolo)

perchè con z-index sinceramente non saprei come fare... Te riusciresti a dirmi come fare sulla base del codice che ho postato?

grazie anticipatamente...

[manublack]

Originariamente inviato da manublack

Beh gli ho trasformati tutti in link perchè mi servono che tutti siano cosi.... e poi con z-index sinceramente non saprei come fare... Te riusciresti a dirmi come fare sulla base del codice che ho postato a utilizzare z-index mantenendo comunque tutte le parole dei link?

grazie anticipatamente...

[manublack]

Purtroppo non basta mettere tutti i tag[*] come link, questo perchè ahime purtroppo prende l'ultimo.....

Adesso qualcuno mi saprebbe dare una mano per farsi che quei titoli diventino dei link verso pagine diverse?

Grazie anticipatamente.

[Prill]

ripartendo dal css originale della gallery, che contiene gli z-index che non figurano nel tuo css, ho verificato che i link all'interno di h3 funzionano, ovvero il link è cliccabile, ma purtroppo resta attivo solo il link inserito nel primo titolo mentre i titoli cambiano seguendo lo slide delle immagini. Lo script è evidentemente costruito in modo tale da non supportare questa funzionalità almeno se non andando a fare altro genere di modifiche (forse). Bisognerebbe perderci un po' di tempo

[manublack]

Originariamente inviato da Prill
ripartendo dal css originale della gallery, che contiene gli z-index che non figurano nel tuo css, ho verificato che i link all'interno di h3 funzionano, ovvero il link è cliccabile, ma purtroppo resta attivo solo il link inserito nel primo titolo mentre i titoli cambiano seguendo lo slide delle immagini. Lo script è evidentemente costruito in modo tale da non supportare questa funzionalità almeno se non andando a fare altro genere di modifiche (forse). Bisognerebbe perderci un po' di tempo

sono riuscito... dopo un pò di ricerche sono riuscito a trovare un modo alternativo al tutto.... Nel senso ho usato jquery che ha un metodo che permette di effettuare la stessa cosa che facevo con css3.

Questo è il codice che ho creato:

jquery:

$(document).ready( function(){ 				
             $('#cb-slideshow').simpleFade({'velocita':2000,'timeout':700,'random':true});
});

html:

<div id="cb-slideshow"> 				
           <div class="elSlide"><h3>Tecnologia, Stile e Fantasia Italiana al miglior prezzo</h3></div> 				
           <div class="elSlide"><h3>Il nostro servizio chiavi in mano</h3></div> 				
           <div class="elSlide"><h3>L'amore per la cucina dal 1953</h3></div> 				
           <div class="elSlide"><h3>Perch&egrave scegliere una cucina Clivio?</h3></div> 				
           <div class="elSlide"><h3>Non solo cucine...</h3></div> 				
           <div class="elSlide"><h3>Rete di vendita internazionale</h3></div> 			

</div>

css:

#cb-slideshow{ 	
         /*border: 5px solid #00F;*/ 	
         padding: 0px; 	
         margin: 0px; 	
         height: 120px; 
}  

#cb-slideshow h3 { 	
        margin: 0px;     
        font-family: Italic;     
        font-size: 35px; 	
        background-color:#000;    	
        line-height: 120px; 	
        text-decoration:none; 	
        opacity: 0.7; 
}  

#cb-slideshow a{ 	
        text-decoration:none; 	
        color: #FFF; 
}  

#cb-slideshow a:VISITED{ 	
        color: #FFF; 
}   

.elSlide{ 	 
        text-align: center; 	
        width: 100%; 
}

ho postato il codice cosi almeno se qualcuno dovesse imbattersi nel mio stesso problema ha la soluzione ha portata di mano.

Grazie a tutti per la disponibilità.