Mon lien <a href="#"> ne fonctionne pas.

Salut,

Je suis en train de faire une page mais je ne comprends pas pourquoi le lien sur l'image et le titre ne passent pas.

Voici le code html

<div id="containers">

<input id="tab-1" type="radio" name="tab-group" checked="checked" />
<label for="tab-1">Lun.</label>

<input id="tab-2" type="radio" name="tab-group" />
<label for="tab-2">Mar.</label>

<input id="tab-3" type="radio" name="tab-group" />
<label for="tab-3">Mer.</label>

<input id="tab-4" type="radio" name="tab-group" />
<label for="tab-4">Jeud.</label>

<input id="tab-5" type="radio" name="tab-group" />
<label for="tab-5">Vend.</label>

<input id="tab-6" type="radio" name="tab-group" />
<label for="tab-6">Samd.</label>

<input id="tab-7" type="radio" name="tab-group" />
<label for="tab-7">Dim.</label>

<div id="contents">

<!--Contents 1-->
<ul id="contents-1">

<li class="column-left">

<strong>17h45</strong>
<a href="#" >
<img src="images/tab5.png" alt="">
<h6 class="t-i-t-">Premirement dolor sit amet quasi</h6>
</a>
</li>

<li class="column-left">

<strong>14h05</strong>

<img src="images/tab4.png" alt="">

<h6 class="t-i-t-">Premirement dolor sit amet quasi</h6>
</li>
</ul>
</div></div>


ET LE CSS:

#containers{
margin: 0 auto;
width: 100%;
}

#containers input {
height: 2.5em;
visibility: hidden;
}

#containers label {
background: #f9f9f9;
border-radius: .25em .25em 0 0;
color: #888;
cursor: pointer;
display: block;
float: left;
font-size: 1em;
height: 2.5em;
line-height: 2.5em;
margin-right: .15em;
padding: 0 1.5em;
text-align: center;
}

#containers input:hover + label {
background: #ddd;
color: #666;
}

#containers input:checked + label {
background: #f1f1f1;
color: #444;
position: relative;
z-index: 9;
}

#contents {
border-radius: 0 .25em .25em .25em;
min-height: 50em;
position: relative;
width: 100%;

margin-bottom: 18px;
}

#contents ul {
opacity: 0;
padding: 1.5em;
position: absolute;

}

#contents-1 li.column-l a {color:#f9ba2b;font-weight:normal; display: inline;}
#contents-1 li.column-l a:hover{text-decoration:none !important}

#contents-1 li.column-l, #contents-2 li.column-l, #contents-3 li.column-l,#contents-4 li.column-l, #contents-5 li.column-l, #contents-6 li.column-l, #contents-7 li.column-l {
float: left;
width: 24.5%;
height: 200px;
margin: 1px;
font-size: 10px;
text-align: left;
}

#contents-1 li img, #contents-2 li img, #contents-3 li img, #contents-4 li img, #contents-5 li img, #contents-6 li img, #contents-7 li img {
display: block;
margin: 0 auto 1em auto;
}

#containers input#tab-1:checked ~ #contents #contents-1,
#containers input#tab-2:checked ~ #contents #contents-2,
#containers input#tab-3:checked ~ #contents #contents-3,
#containers input#tab-4:checked ~ #contents #contents-4,
#containers input#tab-5:checked ~ #contents #contents-5,
#containers input#tab-6:checked ~ #contents #contents-6,
#containers input#tab-7:checked ~ #contents #contents-7 {
opacity: 1;
}

input.visible {
visibility: visible !important;
}

p.prg-heure {width:55px; font-size: 9px; margin: 15px 0px 1px 0px;}

h6.t-i-t- {font-size: 10px; height: 20px;}

Salut,

Qu'est-ce que tu attends que :

<a href="#" > 

fasse ?
Modifié par _laurent (14 Sep 2017 - 15:36)

Je souhaite qu'il fonctionne! Même lorsque je passe le curseur sur le lien il ne fonctionne pas.
_laurent

Safouin a écrit :
Je souhaite qu'il fonctionne!

...oui merci j'avais cru comprendre. Mais c'est quoi le comportement que tu attends ?

https://jsfiddle.net/9waumzLr/
Pour moi tel que ton code est il marche bien. Le lien est cliquable et quand on clique dessus ça ne fait rien, comme prévu.

Oui , mais c'est que sur ma page il n'est pas cliquable lorsque je passe le curseur.
C'est ce que je ne comprends pas

sur ma page il n'est pas cliquable: ce ne fonctionne pas.

Je comprends plus rien là à ça!

Hehehe et ouais mais je peux pas le deviner moi, ni savoir pourquoi ça marche pas

Elle est en ligne ta page ?

Je n'ai pas testé ton code mais il est possible que tu ais la superposition d'un élément transparent voisin de ton lien sur ton lien. Tu devrais pouvoir le vérifier avec "l'inspecteur" de ton navigateur ...

Bonne journée
ps: pour que le code que tu as mis dans ton post soit plus lisible utilises les colorations syntaxiques proposées par "Alsa" dans l'éditeur de Post: code HTML CSS PHP etc...

@_laurent :

a écrit :
Pour moi tel que ton code est il marche bien. Le lien est cliquable et quand on clique dessus ça ne fait rien, comme prévu.

Un clic sur un <a href="#">...</a> ramène en haut de page.

@Safouin :

a écrit :
On ne sait toujours pas quel comportement tu attends de ton <a href="#">...</a>.

Contrairement à ce qu'indique ton titre, ton lien n'est pas
<a href="#">...</a> mais <a href="#" >...</a>. Avec un espace avant le chevron fermant, ça ne marche évidemment pas.

Visiblement, tu n'as pas pensé à faire tester ton code par le Validator HTML du W3C, ce qu'il faut TOUJOURS faire.

Incidemment, je précise que balancer tout son code plutôt que le seul code concerné par un problème (en plus sans le baliser avec les balises code HTML et CSS) est un excellent moyen pour que les membres du forum ne décèlent pas l'erreur.

Bonne continuation.
Modifié par thierry (15 Sep 2017 - 15:05)

thierry a écrit :
Un clic sur un &lt;a href="#"&gt;...&lt;/a&gt; ramène en haut de page.

Hahaha oui oui je sais mais je voulais savoir ce que lui en attendais pour être sur.
Sur mon exemple dans le fiddle ça marche bien.

thierry a écrit :
Avec un espace avant le chevron fermant, ça ne marche évidemment pas.

Il me semble que ca ne pose pas de probleme tel qu'il est positionné. En tout cas ca marche bien dans le fiddle malgrès l'espace. Il fait peut etre péter la validation du W3C mais ca reste fonctionnel.

thierry a écrit :
Incidemment, je précise que balancer tout son code plutôt que le seul code concerné par un problème (en plus sans le baliser avec les balises code HTML et CSS) est un excellent moyen pour que les membres du forum ne décèlent pas l'erreur.

+1
Et si possible un exemple en ligne (la page en question ou un fiddle) du problème.