Rollover bouton invisible IE et FF marche dans apercue DW

wizroll · 9 Septembre 2013

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 .

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 :

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 .

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

Merci

Modifié 9 Septembre 2013 par Aenoa

PotatoesJunky · 10 Septembre 2013

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.

**captain_torche** · 10 Septembre 2013

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\).

wizroll · 12 Septembre 2013

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 .

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 .



<!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>

Modifié 12 Septembre 2013 par wizroll

Connexion

Rollover bouton invisible IE et FF marche dans apercue DW

Sujets conseillés

wizroll

PotatoesJunky

captain_torche

wizroll

Veuillez vous connecter pour commenter

Parcourir

Activité