Rollover sans texte

Bonjour et un grand bravo pour Alsacréations

Alors voilà, j'ai réussi à réaliser un petit menu comme décrit dans ce tuto "Une image réactive en CSS avec une seule image et sans javascript" la différence est que moi j'avais 3 images pour 1 bouton, et 8 boutons différents. J'ai bien réussi sur le même principe, une seule image (incluant les 3) pour un bouton et donc mes 8 boutons différents.

Je souhaiterais ne pas inclure de texte (et oui) car il figure sur les images (écriture spéciale), je me disais donc pourquoi ne pas y inclure comme lien une image monopixel transparente !!!

seulement je n'y arrive pas ! si j'ai du texte, tout est nickel, même si je mets juste un point, si je laisse le lien texte vide je me retrouve avec un léger décalage entre mes boutons (qui sont en vertical), idem si je mets une image transparente en lien !!!

Quelqu'un pourrait-il m'indiquer une piste pour supprimer ce "Padding" qui s'incruste, car en fait j'ai besoin que tout reste bien coller pour mon graphisme!!

Merci d'avance.
Fred
Modifié par fredelphi (31 Aug 2006 - 14:30)

Salut

Tu es en train de dire que ton menu de navigation est composé uniquement d'images de fond en CSS ?

Si c'est le cas, il y a un gros problème, notamment au niveau accessibilité. Le texte de tes liens est un contenu, et à ce titre, il doit se trouver dans le code html, et non dans les feuilles de style ... voir ce post

Je suis bien conscient de ce soucis, mais je ne peux malheureusement faire autrement puisque le graphisme des boutons est ainsi fait.

Je voulais donc justement inclure une image transparente à l'intérieur du code html, via la balise <img src="..." alt="..." />, seulement dès que je le fait, je me retrouve avec un "padding" entre mes boutons !

et c'est ça que je souhaiterais corriger.

Merci de votre Aide

Oula, met rapidement un "s" a la fin de "alsacreation" sinon raphael va pas etre content

fredelphi a écrit :
Je suis bien conscient de ce soucis, mais je ne peux malheureusement faire autrement puisque le graphisme des boutons est ainsi fait.

Avec la meilleure volonté du monde, et le plus gros effort de compréhension possible, la réponse reste: non.

Cela se faittrès simplement de manière accessible via javascript et une élément <img alt="...">, avec des liens qui ont un contenu réel, perceptible et pertinent dans tous les cas. Mais pas en CSS avec des liens sans contenu ou avec des contenus masqués.

Donc, reposer la question dans le boudoir "DOM javascript"
Modifié par Laurent Denis (31 Aug 2006 - 14:29)

Pour le s, c'est bien rectifié..Désolé!!!

Pour ma question, c'est bien ce que je pensais !! j'ai bien cherché pour rien en fait ..

Cela me semblait bien en contradiction avec l'accessiblité...

Je vais donc virer le texte des images et mettre de vrais liens textes si il n'y a pas d'autre solution!

Merci à vous

Je viens de m'amuser à essayer de réaliser l'effet de rollover à partir d'une image en dur dans le html, et du positionnement en CSS.

Je suis arrivé à ceci. Ca a l'air de fonctionner sous Firefox et sous IE 6, à part un problème de marge.

Qu'en pensez-vous ?

<edit> Evidemment, c'est limité à une colonne de largeur fixe, et c'est un peu du bricolage
Modifié par Sopo (31 Aug 2006 - 15:10)

C'est un peu ce que j'ai réalisé dans ma CSS, à la différence que j'ai configuré directement <li> dans mon fichier css, donc j'ai un <li id="#"> pour chaque bouton, la ça fonctionne bien, mais en icluant mon <a href="#" title="#"><img src="image.gif" alt="accueil" /></a> j'obtiens systématiquement un léger "padding" entre chaque bouton !

Comme votre exemple d'ailleurs!

C'est cela que j'aimerais supprimer.

Merci déjà de m'aider.
Fred.

J'arrive à supprimer l'espace entre les <li> en appliquant une marge négative de 4px en haut et en bas :

ul#liens li {
   ...
   margin: -4px 0;
}

Par contre, je ne comprends pas d'où vient cet espace

Il faut bien sûr réserver cette marge à IE via les commentaires conditionnels.

Edit : ne pas utiliser mon exemple trop vite, ce n'est qu'un test. Je suis sûr que quelqu'un va trouver un problème de taille rapidement ...
Modifié par Sopo (31 Aug 2006 - 15:32)

Alors en fait, moi j'ai fait fortement compliqué je pense ! (désolé, je débute encore en CSS)

Fichier CSS j'ai ceci :

div#colone_menu {
list-style-type: none ;
height: auto;
width: 208px;
}
div#colone_menu ul{
margin: 0 ;
padding: 0 ;
list-style: none;
}
/*Ici, Partie que je copie 8 fois avec image différente à chaque fois (colone_menu1/colone_menu2/etc..)*/
li#colone_menu0 {
height: 39px;
width: 208px;
margin: 0 ;
padding: 0 ;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align: center;
line-height: 30px;
list-style-type: none;
background-image: url(../images/accueil.gif);
background-repeat: no-repeat;
}
li#colone_menu0 a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
text-indent: 190px ;
color: #FFFFFF;
}
li#colone_menu0 a:link {
color: #FFFFFF;
background-image: url(../images/accueil.gif);
background-position: 0px 0px;
}
li#colone_menu0 a:visited {
color: #000000;
background-image: url(../images/accueil.gif);
background-position: 0px 0px;
}
li#colone_menu0 a:hover {
font-weight: bold;
color: #000000;
background-image: url(../images/accueil.gif);
background-position: 0px -39px;
}
li#colone_menu0 a:active {
font-weight: bold;
color: #000000;
background-image: url(../images/accueil.gif);
background-position: 0px -78px;
}
/*-----------------------------------*/
et en html j'ai fait ceci :

<div id="colone_menu">
<ul>
<li id="colone_menu0"><a title="Accueil" href="index.php">.</a></li>
<li id="colone_menu1"><a title="Historique" href="index.php">.</a></li>
<li id="colone_menu2"><a title="Galerie" href="index.php">.</a></li>
<li id="colone_menu3"><a title="Medias" href="index.php">.</a></li>
<li id="colone_menu4"><a title="Livre d'or" href="index.php">.</a></li>
<li id="colone_menu5"><a title="Uilleann" href="index.php">.</a></li>
<li id="colone_menu6"><a title="Membres" href="index.php">.</a></li>
<li id="colone_menu8"><a title="Contact" href="index.php">.</a></li>
</ul></div>

Comme vous le voyez, en guise de texte là j'ai un point, et dans ce cas tout comme avec texte, tout ce passe bien.

Par contre si je mets une image transparente à la place du texte de lien, j'obtiens de suite un décalage entre mes images de menus.
Mes images en fait sont trois images en une pour l'état différent.

Désolé si j'ai été un peu long et peut-être pas très clair !

Ca ne change rien au problème, cette façon de faire

Si pour une raison ou une autre, les images ou les feuilles de style de ton visiteur sont désactivées, tu te retrouve avec un menu où tous les liens sont représentés par un point.

Ce que tu dois absolument faire, c'est déplacer les images que tu as pour l'instant placées en background dans la feuille de style vers le code html.

Ton menu doit ressembler à ceci :

<ul>
   <li><a href="..." title="..."><img src="..." alt="..." /></a></li>
   ...
</ul>

L'effet de rollover est secondaire. Le principal, c'est que le contenu de ta page soit disponible en toutes circonstances.

Ensuite, seulement, tu te préoccupes du style & du rollover. Laurent t'a indiqué que cela devrait se faire en javascript. J'ai bidouillé quelque chose qui permet de se passer du javascript ...

Mais tant que tu n'abandonnes pas les images de fond pour des images "en dur", point de salut

Pour le principe, je suis ok !

Donc là, mon petit soucis est autre :

mon image, comporte en fait 3 images différente (lien, over et visité) que j'ai donc groupées en une image (les 3 états l'un en dessous de l'autre), puis-je utiliser cette image et réussir dans ma css à appliquer l'effet et la vue souhaitée ?

Oui, tu peux obtenir l'effet voulu.

Mais tu ne dois pas te servir directement de ta feuille de style, mais de javascript.

bonjour,

je ne sais pas si tu as creuser cette idée deja :
1 insere dans ton lien <a> une balise suplementaire neutre comme un span.
2 dans ce span tu y insere ton texte.
3 a l'aide du css tu le fait disparaitre !
4 n'utilise pas de display:hidden; cela correspond a ne rien mettre du tout dans certains cas (lecteur d'ecran, ...). Au lieu de cette technique applique un

a span {
position:absolute;
height:0;
width:0;
overflow:hidden; /* pour enfin le caché  (ok pour IE et , ...*/
z-index:-1 ; /*  pour opera entre autre (pas sur dans Ie ) */
}

Il y a aussi une histoire de text-indent:-9999px; , plus court pour faire disparaitre un texte .

Si tu veut inserer une image transparente et mettre le texte en "alt"ernatif , probable qu'un vertical-align:top; (ou bottom) suffit alors a faire disparaitre ton "padding" supplementaire .
Pour le texte , peut-etre faudrait-il redefinir le font-size ou line-height et peut-etre aussi fixer la hauteur avec un overflow:hidden; dans IE


++
Modifié par gcyrillus (31 Aug 2006 - 22:12)

J'avais effectivement essayé avec <span>, mais j'avais toujours ce petit padding. Je n'avais peut-être pas bien configurer <span> dans css.

Je vais effectivement creuser un peu plus de ce côté.
Pour "z-index:-1", je ne suis effectivement pas certain que cela fonctionne avec Ie

Un grand merci à vous de maider.