Span : display none qui "prend de la hauteur" sous IE.

Marsh Posté le 01-12-2005 à 22:21:55

Bonsoir tout le monde,

j'ai un menu classique mais graphique :

Code :

<ul id="menu">
<li><a href="/index.php" id="accueil">Accueil</a></li>
<li><a href="/photographies/index.php" id="photographies">Photographies</a></li>
<li><a href="/3d/index.php" id="trois_d">3D</a></li>
<li><a href="/informations/index.php" id="informations">Informations</a></li>
<li><a href="/contact_cv/index.php" id="contact_cv">Contact & Curriculum Vitae</a></li>
</ul>

Graphique parce que c'est une image de background qui se "décale" avec le a:hover.

Problème d'accessibilité, j'essaie de mettre qd-même l'intitulé du menu en texte.
J'utilise la balise avec "display: none;" en CSS (c'est pas la panacée mais c'est mieux que rien).

Problème, IE doit donner une certaine hauteur à ce span et tout le menu s'en trouve décalé (voir image ci-dessous) :

Le décalage augmente lorsqu'on augmente la taille du texte (CTRL + molette souris).
Sous Firefox, tout reste nickel.

J'ai essayé avec des font-size à 0 (em, px, %...), des height etc... rien n'y fait.

Une idée svp ?

Merci.

Reply

Marsh Posté le 01-12-2005 à 22:21:55

Reply

Marsh Posté le 02-12-2005 à 06:58:25

Je crois que tu ne comprends pas bien comment ça marche la sémantique. Tes ne servent à rien là, styles les <a> directement

---------------
http://www.alsacreations.com, http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net. A ne surtout pas prendre en exemple : http://www.worldinternet.be

Reply

Marsh Posté le 02-12-2005 à 10:20:00

Je verrai s'il est possible de mettre le "display: none" sur le "a" (qui est, au passage, déjà en display: block). La question reste de toute façon entière.

EDIT:

Code :

#menu a
{
display: block;
height: 22px;
width: 102px;
}
a#accueil:hover
{
background: url(../images/menu.png) 0px -110px;
}

Le "display: none" sur le "a" ne va-t-il tout simplement pas ne rien afficher du tout ? Pas trop ce que j'ai envie de faire.

REDIT :

Citation :

Je crois que tu ne comprends pas bien comment ça marche la sémantique

Hummm, je crois qu'il y a aussi beaucoup de types qui me semblent pourtant "très calés" et qui ont alors aussi des problèmes avec la sémantique
http://www.mezzoblue.com/tests/rev [...] placement/ pour la technique du span notamment. Technique utilisée parmi d'autres, qui n'est pas parfaite et que j'emploie surement mal (sinon cela marcherait sous IE), mais...

Peut-être ne pas utiliser le "display: none" mais plutôt un "text-indent" de folie ?

Message édité par Beral2 le 02-12-2005 à 10:51:34

Reply

Marsh Posté le 02-12-2005 à 17:58:45

:up: Pliiize.

Reply

Marsh Posté le 02-12-2005 à 18:25:09

Alors, d'après moi, si tu tiens absolument à utiliser une image en fond de menu :

Code :

a{
background-image:url(ton_image);
background-position:top;
text-decoration:none;
color:black;
}
a:hover{
background-position:bottom;
color:white;
font-weight:bold;
}

(rq : j'aime mieux utiliser une seule image en fond ou sont definis les 2 etats du "bouton" et que l'on positionne selon l'etat)

Code :

<ul id="menu">
<li><a hre="url">Accueil</a></li>
...
</ul>

Sinon, vu que ton fond c'est de la couleur :

Code :

a{
background-color:white; // ou la couleur que tu veux
text-decoration:none;
color:black;
}
a:hover{
background-color:lightgrey; // ou une autre couleur
color:white;
font-weight:bold;
}

Ca te simplifierait un peu ton code

Reply

Marsh Posté le 02-12-2005 à 18:50:19

Bon, merci pour la réponse mais c'est tjrs pas ma question, désolé.

Citation :

(rq : j'aime mieux utiliser une seule image en fond ou sont definis les 2 etats du "bouton" et que l'on positionne selon l'etat)

En fait c'est toute l'ul qui a une image de background et cette image se décale seulement dans la fenêtre des "a" : une seule image (état hover et pas) pour TOUT le menu, pas une par lien.
Le code CSS en entier (j'aurais dû le mettre d'entrée, désolé) :

Code :

ul#menu
{
position: absolute;
background: url(../images/menu.png) no-repeat !important;
margin: 0 !important;
background: url(../images/menu.gif) no-repeat;
margin: 0px 0px 0px -52px;
}
#menu li
{
padding: 0;
background-image: none !important;
}
#menu a
{
display: block;
height: 22px;
width: 102px;
}
a#accueil:hover
{
background: url(../images/menu.png) 0px -110px;
}
a#photographies:hover
{
background: url(../images/menu.png) 0px -132px;
}
a#trois_d:hover
{
background: url(../images/menu.png) 0px -154px;
}
a#informations:hover
{
background: url(../images/menu.png) 0px -176px;
}
a#contact_cv:hover
{
background: url(../images/menu.png) 0px -198px;
}

Mon fond n'est pas que de la couleur (sinon, je n'aurais pas utilisé d'image), c'est une couleur avec transparence (le menu est légèrement transparent, image PNG, GIF pour IE).
Pour le texte il est aussi dans l'image parce que c'est plus joli (polices voulues, lissage des caractères...).

Quoi qu'il en soit, le menu marche très bien, aucun problème. Ce que je veux c'est le rendre accessible.

Ma question est, en quelque sorte, de savoir comment fixer la hauteur d'un span pour IE à 0 (même en agrandissant par molette + souris).
Ou quelle autre façon y a-t-il de rendre un menu graphique accessible ? Le text-indent ?

Sinks.

Message édité par Beral2 le 02-12-2005 à 19:04:34

Reply

Span : display none qui "prend de la hauteur" sous IE.

Sujets relatifs:

Leave a Replay