28221 sujets

CSS et mise en forme, CSS3

Je cherche actuellement pourquoi, sans trouver encore ce qui se passe. J'ai remarqué que mon image n'est cliquable que sur le bord haut, et sur le bord bas. Pourtant, sous Internet Explorer, l'image complète est cliquable.

Voici un bout du code : réaction visible sur http://www.gplays.com/V4/ (l'avatar a gauche)

- CSS

#acc-hasard-image {
	position: relative;
	float: left;
	top: 3px;
	right: 0px;
	width: 130px;
	height: 100px;
}

#acc-hasard-image img {
	border: 0px;
}


- HTML

<a href="" id="acc-hasard-image" title="Lire le document"><img src="images/avatar256.jpg" alt="" /></a>


Une idée du problème ?
Modifié le 28 Jan 2005 - 19:05
Si tu regardes bien, ton image n'est clickable qu'aux endroits où il n'y a pas de texte à côté.

Dans Firefox, tu as le Dom Inspector qui te permet de voir pas mal de choses, et surtout, où se placent tes blocs.

Apparemment, les span de ton texte sont sous, ou par dessus ton image.

Un margin-left de la taille de l'image pour firefox?
Attend les avis des spécialistes...
Modifié le 28 Jan 2005 - 14:40
Sous toute réserve, essais de remplacer ceci :

#acc-hasard-image {
[#red][b]position: relative;[/b][/#]
float: left;
[#red][b]top: 3px;
right: 0px;[/b][/#]
width: 130px;
height: 100px;
}


#acc-hasard-image {
float: left;
width: 130px;
height: 100px;
[#blue][b]margin-top: 3px;[/b][/#]
}

Un lien direct vers tes 4 feuilles de style nous simplifierait la tâche...

Voilà :
http://www.gplays.com/V4/css_acc_contenu.css
http://www.gplays.com/V4/css_structures.css
http://www.gplays.com/V4/css_style.css
http://www.gplays.com/V4/css_menu.css

Ici j'utiliserais une vraie liste :

   <span>Dossier PS2</span>
   <span>Daté du 12/11/2005</span>
   <span>Ecrit par Grey</span>
   <span>XX commentaires</span>

Et ceci n'est pas conforme XHTML (balise pas fermée) :

   <br id="retour">

Voilà :

   <br id="retour" [#blue][b]/[/b][/#]>

Modifié le 28 Jan 2005 - 16:18
Ouai, pour le <br id="retour" /> je l'avais vu ce midi, mais merci de me le rappeler Smiley cligne Sinon, pour le problème, effectievemtn, c'est bien vu et ta solution est une bonne idée, mais ca ne l'a pas résolu

A ce propos, merci de l'info avec le dev kit de firefox. Les options "outline" sont bien sympas, j'avais pas vu. En visualisant avec outline selected block, on comprend en effet que les blocks "span" doivent venir en interferance avec le bloc de l'image. Mais comment resoudre le probleme ? Avec des z-index, j'y crois pas, mais je vais essayer, je vous tiens au courant.
Bon, je confirme, ca ne fonctionne pas avec les z-index.

Je pense que je vais donc devoir appliquer un nouveau float, à moins que vous ayiez une idée ?
Pari réussi avec le "float" evidemment. Ca oblige à ouvrir une nouvelle balise div mais ça marche.

Merci de votre aide, c'est grâce à vous que j'ai eu cette idée. Finalement, ce n'était pas si dur que ça, mais fallait le prévoir directement ainsi Smiley smile