28172 sujets

CSS et mise en forme, CSS3

Positionnement absolu (?) - problème sous Opéra

Bonjour,

Je vais tenter d'expliquer ce que je souhaite faire, ce que j'ai fait, et ce que je crois qui ne fonctionne pas.

Première chose, vous pouvez voir un exemple de ce que je fais tout en bas du message. Attention, ça ne fonctionne bien que sous FF et IE. En effet Opéra bugue pas mal.

Mon idée est de faire un menu uniquement en image (pas de texte). Chaque item du menu est constitué d'une bordure, et d'une image centrale qui réagit au survol. Voilà pour la partie simple. Maintenant au niveau des contraintes de mise en forme:
-les items (ici des <li>) doivent être de type inline, afin de pouvoir leur appliquer un text-align: center. Le positionnement est relative, car c'est la référence de la balise <a>.
-le roll-over est classique dans l'idée: une balise <a>, un background, et on utilise a:hover. Particularité: la balise est vide (sans texte). Sa taille est fixée. Son placement est géré par un positionnement en absolute (pour le retirer du flux).
-je souhaite pouvoir régler l'espacement entre les différents items par des margin.
J'espère que c'est assez clair?

Bon, ça marche super sous Firefox et IE, par contre sous Opera, j'ai l'impression que la "zone cliquable" du lien n'est pas superposé avec le background dessiné. C'est encore plus visible si on joue sur le text-align: left ça marche presque, et right plus du tout. Enfin si on passe le positionnement de absolute à relative ça marche bien, mais par contre le design est tout cassé... Problème avec le positionnement absolu?

Si vous avez des idées sur comment régler ça, ou au moins pourquoi ça ne peut pas marcher?

Merci d'avance pour vos remarques, ça fait un moment que je bosse là dessus et je n'avance plus.

Medou.

PS: Le code utilisé:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1;" />
<title>Test</title>
<style type="text/css">
ul{
  text-align: center;
}
li.bordure{
	display: inline;
    position: relative;
    vertical-align: top;
}
img{
  width: 322px;
  height: 317px;
  vertical-align: bottom;
}
img, a.fond{
  margin: 40px 10px 30px 10px;
}
a.fond{
    height: 290px;
    width: 290px;
    position: absolute;
    top: 5px;
    left: 5px;
	background: red;
}
a.fond:hover{
    background: yellow;
}
</style>
</head>
<body>
<ul>
  <li class="bordure"><img src="bordure_simple.png" /><a href="#" class="fond"></a></li>
  <li class="bordure"><img src="bordure_simple.png" /><a href="#" class="fond"></a></li>
  <li class="bordure"><img src="bordure_simple.png" /><a href="#" class="fond"></a></li>
</ul>
</body>
</html>

Et l'image qui va avec (à renommer en bordure_simple.png):
upload/15737-borduresim.png
Modifié par Medou (11 Feb 2008 - 20:44)
Bonjour,

Oublier cette idée et utiliser, pour des images-liens, des images HTML (incorporant du coup la bordure), avec les alternatives textuelles et le js nécessaire pour les rollover.

(Il n'y a pas de bonnes solutions, ou de solutions tout court, à un faux problème Smiley cligne ).
Modifié par Laurent Denis (12 Feb 2008 - 07:55)
Bonjour,
Je conçois que ce que je souhaite faire semble un peu inutile (ce n'est pas que pour le plaisir de se poser des problèmes Smiley smile ). Cependant, séparer la bordure du reste est assez important, car la bordure est en png (ombrage et des choses compliquées). Du coup une seule bordure = un seul téléchargement d'image lourde. Le centre est en jpg, c'est plus léger.
Quant à faire du js, oui pourquoi pas, mais si je peux trouver une solution sans, c'est encore mieux.
Au fond, ce que je cherche surtout à comprendre c'est d'où vient cette différence entre Opera et Firefox, tout deux censés être bien aux normes.
Oui, mais non.

Ce n'est pas tant le fait que ce soit inutile : on ne fait pas de liens vides en détournant CSS pour leur donner un pseudo-contenu. C'est une absurdité vis à vis d'HTML autant que de CSS, conduisant droit à des problèmes élémentaires d'interopérabilité et accessoirement d'accessibilité.

C'est tout Smiley cligne

<edit>Sinon, il n'y a pas d'obstacle majeur à gérer simplement la bordure en background des éléments li, ou plus simplement de cellules d'un tableau s'il s'agit d'une gallerie d'images à centrer etc. </>
Modifié par Laurent Denis (12 Feb 2008 - 10:29)
Ok c'est une absurdité de faire un lien vide, mais le fait que les liens soient vides n'impacte pas le fonctionnement: le résultat est le même si on met du texte dans <a>. Admettons que je rajoute du texte dans mes liens. C'est plus valide et accessible. La question demeure.

Je sais qu'il existe d'autres solutions (qui ne répondent pas à tous me souhaits mais qui marchent!), c'est juste que cette solution là me semblait pas mal, surtout pour le placement des différents items grâce aux marges sur <img>.
Sujet clos
Aller à