28172 sujets

CSS et mise en forme, CSS3

Bonjour,

je me demande s'il existe une solution pour cliquer sur des liens positionnés en dessous d'un png.

structure simplifiée :


<div class="actualités">

<ul><li><a href="#">sdqsdqsd</li></ul>
</div>
<div class="image">
</div>



.actualites {
position:relative;
}

.image {

height:160px;
background-image:url(monimage.png);
position:fixed;
bottom:0;
}



Tous les liens qui sont dessous la zone de l'image sont alors lus mais pas cliquables. Une idée ?

Bien entendu, j'ai essayé les z-index. Mais les position ne peuvent pas être changer car cela casserait toute la mise en forme.
Modifié par mymygo (04 Aug 2009 - 12:08)
Salut,

Pourquoi ne pas mettre le lien en display:bloc puis mettre l'image en fond de ce lien ? A moins que l'image apporte du sens à ton contenu ?
en fait, l'image est un footer global du site avec des accès rapide à des menus.
Il n'est pas en lien particulier avec les actualités (qui sont en fait une colonne à droite).

L'image représente une ombre chinoise un peu découpée qui superpose sur le contenu. Mais j'ai mis des marges pour que tous les contenus soient lisibles en scrollant.
Il me reste juste la zone de contenus qui apparaissent sous l'image.
Bonjour,

mymygo a écrit :
personne n'a rencontré ce problème ?

Si.

mymygo a écrit :
Pas d'idées ?

Modifier le design.

Ou bien utiliser, pour ton contenu, un padding-bottom qui assurera que l'utilisateur peut, en faisant défiler la page par exemple, afficher tout contenu en dehors de la zone couverte par ton image en surimpression. Mais avec cette solution, il reste que l'utilisateur peut essayer de cliquer les liens (ou de sélectionner du texte) sans avoir scrollé autant que nécessaire, et peut se retrouver à constater que «le site ne marche pas».
Modifié par Florent V. (05 Aug 2009 - 10:01)