Jump to content
Sign in to follow this  
wizroll

Rollover bouton invisible IE et FF marche dans apercue DW

Rate this topic

Recommended Posts

Bonjour, je un gros problème je suis en train de faire mon site et je voudrai faire un menu horizontal avec des boutons en rollover utilisant qu'une seule image comme dans ces multiples tutoriaux .

J'ai regardé les sujets traitant de problème de rollover sur le forum mais tous les codes que j'y trouve ne m'apporte aucune solution sad.gif.

Simple bouton en rollover

Le bouton sera mis dans un menu horizontal crée avec des listes comme ci dessous:

Tutoriel: menus rollover

La structure du menu est déja faite dans mon site je souhaiterai juste faire marcher le rollover sur un bouton.

Le problème ne viens peu etre pas du code , je rollover marche dans l'appercue de dreamweaver.

Mais quand je l'ouvre dans IE ou FF je ne vois rien.

Aucune image du bouton, ni du rollover, pourtant le bouton est là, je peu cliquer et le lien marche.

Voici une copie de mon code le css est integré a ma page html :

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/url]<html xmlns="[url=http://www.w3.org/1999/xhtml];http://www.w3.org/1999/xhtml">[/url]<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Document sans nom</title><link rel="stylesheet" type="text/css" href="style.css" title="Style rollover" /><style type="text/css">    #facebook a {        display:block;        width:30px;        height:30px;        text-indent: -9999px;        background:url(/images/index/a1_over.gif) 0 0 no-repeat;      }    #facebook a:hover {    background-position: 0 -30px;    }</style>    </script></head><body><div id="facebook"><a href="#" title="Facebook">facebook</a></div></body></html>

Et l'image que j'utilise :

5kd.gif

Je vous laisse egalement le code du menu pour savoir si je dois changer des chose pour intégrer le rollover il marche dans mon appercue sur le premier bouton intitulé facebook. Mais aucun appercue dans IE et FF sad.gif.

Le CSS :

 <style type="text/css">* { margin: 0 ; padding: 0 ; }/* On accede a l'element "ul" descendant de l'element d'id "header" */#header ul {    /* Positionnement absolut */    position: absolute;    /* Vous vous souvenez des valeurs de tout a l'heure? */    left: 133px;    top: 247px;    /* Au passage, on va enlever tout l'affichage par défaut des listes */    margin: 0;    padding: 0;    list-style: none;}#header ul a:hover span {    /* Affichage en tant que bloc */    display: block;    /* positionnement absolut */    position: absolute;    /* Position et taille */    left: 500px;    top: 59px;    width: 180px;    height: 32px;       /* Centrage horizontal du texte */    text-align: center;    /* Redefinition de la taille de la ligne */    line-height: 32px;    /* Positionnement du texte par rapport a la ligne */    vertical-align: middle;} /* Et on nettoie le comportement des elements de liste */#header ul li {    float: left;    margin: 0;}#header ul li a {    /* Affichage en tant que blocs */    display: block;    /* Flottons flottons */    float: left;    /* La hauteur est commune à tous les boutons ! */    height: 30px;    /* Modifions la référence de placement des fonds */    background-position: 0 0;    /* et on finit en modifiant l'affichage des liens */    color: #000000;    text-decoration: none;    }#pdf a {    float: none;    width: 30px;    }#mail a {    width: 30px;}#vimeo a {    width: 30px;}#blog a {    width: 30px;}#linkedin a {    width: 30px;}#facebook a {    width: 30px;    background:url(/images/index/a1_over.gif) 0 0 no-repeat;    text-indent: -5000px ;/* this move the text outside of the screen area */    outline: none;/* get rid of dotted borders in FireFox */}/* Mettons en place les images survolees *//* on appelle "element:hover" pour lui attribuer une regle de survol */#pdf a:hover {    background-image: url(/images/index/a6_over.gif);}#mail a:hover {    background-image: url(/images/index/a5_over.gif);}#vimeo a:hover {    background-image: url(/images/index/a4_over.gif);}#blog a:hover {    background-image: url(/images/index/a3_over.gif);}#linkedin a:hover {    background-image: url(/images/index/a2_over.gif);}#facebook a:hover {    background-position: 0 -30px;}</style></head>

Et le HTML :

 <body><div id="header">    <ul>        <li id="facebook"><a href="index.html" title="Page de news">none</a></li>        <li id="linkedin"><a href="index.html" title="Nos projets">2</a></li>        <li id="blog"><a href="index.html" title="Notre équipe">3</a></li>        <li id="vimeo"><a href="index.html" title="Visiter le forum">4</a></li>        <li id="mail"><a href="index.html" title="Nous laisser un message">5</a></li>        <li id="pdf"><a href="index.html" title="Autres pages intéressantes">6</a></li>    </ul></div></body></html>

J'ai suivi le tutorial mis en lien ci dessus j'ai essayé d'adapter le rollover avec une seule image pour chaque bouton.

Merci pour votre aide j'aimerai beaucoup trouver le problème d'affichage peu etre que ca ne le fera pas chez vous.

Tout les tutoriaux que j'ai refais ne marche pas a l'affichage.

Après deux soirée bloqué la dessus je me permet de demander un peu de votre aide smile.gif

Merci

Edited by Aenoa

Share this post


Link to post
Share on other sites

Bonjour,



Essaie de virer le / devant images dans l'URL :



background:url(images/index/a1_over.gif)

Me semble que le / en début d'URL relative est utile en développement Web, mais qu'effectivement, ça fait foirer les previews dans DW.


Share this post


Link to post
Share on other sites

Effectivement, si tu l'ouvres depuis ton disque dur, le premier slash dit qu'il faut retourner à la racine du disque (Et je doute que tes images soient dans le dossier c:\images_index\).


Share this post


Link to post
Share on other sites

Merci c'est vrai que sur mes autres liens je n'avais pas ce "/" je travail en local dans des repertoires aux meme niveaux qui mon index.


Mais malheureusement ca n'a pas suffit a faire marcher les boutons sad.gif.



Mais entre temps j'ai décortiqué un diaporama en javascript/css qui utilisait cette technique pour la navigation des images.


Et ca marche nickel maintenant, je vous met le code :


Merci beaucoup pour avoir pris le temps de me répondre smile.gif.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>


<style type="text/css">

.button {
font-size: 12px;
float: left;
position:absolute;

}
.button a {
width:30px;
height:30px;
background: url(Images/Index/a1_over.gif) left top;
float: left;
text-indent: -9999px;
position:relative;
color:transparent;
}
.button a:hover{
background-position: 0 100%;
}
</style>
</head>

<body>

<div class="button">
<div>
<a href="#" title="1">1</a>
<a href="#" title="2">2</a>
<a href="#" title="3">3</a>
<a href="#" title="4">4</a>
</div>
</div>

</body>
</html>


Edited by wizroll

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...