float:left et balise <a>

**troumad** · 18/12/2006, 11h53

Bonjour

J'ai un lien dans des calques :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<body>
 <div id="photo" onclick="efface_photo()"></div>
 <div id="gauche">
  <div>
   <a href="#photo" onclick="affiche_image('../vaisselle.jpeg')">
   <img src="../miniatures/vaisselle.jpeg" alt="vaisselle" /></a>

Voici les css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 img {border:0;margin:2px;padding:0;vertical-align:top}
 a {margin:0;padding:0}
 #haut {z-index:2;position:relative;top:0;right:0}
 #gauche {z-index:2;position:relative;top:0;left:0}
 #gauche div {position:relative;float:left}
 #photo {z-index:10;position:absolute;margin:0;padding:0}

Pour que le lien soit actif, il faut que j'enlève le float:left du css ! Je ne comprends pas du tout pourquoi !

**MasterOfChakhaL** · 18/12/2006, 12h23

Salut,

j'ai testé ton code avec opéra 9, chez moi ca marche comme il faut ; j'ai juste fermé la balise div (id=gauche) et la div suivante.

Tu utilises les z-index et des propriétés qui modifient le flux du document html. Peut-être as-tu créer des chevauchements.

Si tu définis des background-color différents sur tes différents éléments, tu devrais facilement pouvoir déterminer qui est au dessus de qui. Si ton lien se retrouve dans un élément qui est dessiné sous un autre élément, c'est normal qu'il ne soit pas actif puisque ta souris n'est en fait pas au dessus du lien, mais au dessus d'un élément transparent.

**troumad** · 18/12/2006, 13h38

Ton coup des couleurs m'a montré mon erreur...
Il va falloir que je cherche à la corriger ! Pour le moment, je pars au boulot !

**troumad** · 18/12/2006, 17h59

Voici ma réponse...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<style TYPE="text/css" MEDIA="screen">
<!--
 img {border:0;margin:2px;padding:0;vertical-align:top}
 a {margin:0;padding:0}
 #haut {z-index:2;position:relative;top:0;right:0}
 #gauche {z-index:3;position:relative;top:0;left:0}
 #gauche div {position:relative;float:left}
 #photo {z-index:10;position:absolute;margin:0;padding:0}
-->
</style>

Par contre, j'aurais aimer que la calque "haut" se mette à droite du calque "gauche" sans passer dessus (ou dessous). Donc, suite de la question sur : http://www.developpez.net/forums/sho...38#post1605838

float:left et balise <a>

CSS

Vue hybride

Discussions similaires

Partager

Partager