5568 sujets

Sémantique web et HTML

bonjour,

La page suivante http://www.la-boutique.com est constituée de 4 pavés cliquables (DIV) contenant chacun un titre H2 et un lien A et une image de fond sur le DIV qui oblige à faire en sorte que la taille du pavé dépasse la taille des éléments en ligne à l'intérieur (H2 et A).

Je voudrais faire en sorte qu'avec un seul lien a, le pavé soit cliquable sur toute sa surface mais je n'y arrive pas avec IE en restant valide (contrairement à FF avec des marges négatives sur le A). Seul le lien A est cliquable sur IE et j'ai donc été obligé de compenser avec un onclick sur le div en javascript qui malheureusement désactive la possibilité d'ouvrir dans une autre page.

Avez-vous une idée ?
Merci
OK j'ai résolu une partie du problème :
ce sont les marges négatives sur le a qui désactivent le lien dans IE: je les ai donc mis sur le span dans le a
Puis j'ai finalement intégré mon a dans le h2 pour éviter d'avoir à doubler le a et maintenir le titre cliquable.

Il reste 3 problèmes mineurs sous IE :

1) le texte n'est toujours pas cliquable : je triche en mettant un cursor:pointer mais si on regarde bien, le clic droit est désactivé alors que sur le reste du pavé il est OK
2) les marges négatives ne fonctionnent plus sous IE donc lorsqu'on grossit les polices, le texte en bas à gauche des pavés déborde.(les marges négatives en em étaient justement faites pour le faire remonter proportionnellement à la taille des polices...)
3) il faut faire appel à une feuille de style spécial pour IE car le padding du a n'est pas de la même taille

J'y pense : j'aurais peut-être pu faire un tableau avec un vertical-align pour le texte : ça doit être autorisé dans ce cas et cela résoudrait sans doute tous les problèmes d'autant que j'ai de toute façon utilisé une table pour centrer le tout verticalement...

avez-vous une meilleure idée ? si personne n'en a : je mettrai résolu...

Merci
Modifié par plancton (27 Dec 2007 - 12:40)