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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Span : display none qui "prend de la hauteur" sous IE.

Beral2

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.

Publicité

Roane

Pingouino's fan

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

Beral2

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

Beral2

:up: Pliiize.

gravastar_bureau

vive la mise en page en tab...

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

Beral2

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
[CSS] probleme hauteur de cadre	Div de 1px de hauteur
Puis je fixer mon <span> ??	[Résolu] Créer une CMainFrame qui ne prend pas le focus à l'ouverture
[Firefox] Hauteur background image qui ne s'allonge pas [edit]	css : decalage de span.
[css]Opéra hauteur 100% en absolu	[CSS] IE n'aime pas mon code...
Donner la même hauteur à deux div	$_SERVER['PHP_SELF'] qui prend en compte les variables
Plus de sujets relatifs à : Span : display none qui "prend de la hauteur" sous IE.

Page générée en 0.049 secondes