erreur dans le html ou dans le css ? [RESOLU] - Programmation
TomsGuide.com : 700 000 inscrits répondent à toutes vos questions high-tech et informatique.
Pour obtenir de l'aide, inscrivez-vous gratuitement !
 

Ajouter une réponse



 Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet : erreur dans le html ou dans le css ? [RESOLU]
 
hum ca sent mauvais mauvais!
Profil : IDNaute
Plus d'informations

Bonjour a tous!!
j'ai honteusement plagier un menu html dans linux pratique n 41 pour ne pas le citer mais ça ne marche pas...
le but est d'avoir un menu fait de 5 boules noires et blanches
et qui se colorent lorsqu'on passe la souris dessus.

mon html :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.   <head>
  4.       <title>colored</title>
  5.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="sheap.css" />
  7.   </head>
  8.   <body>
  9.   <ul id="menu">
  10.               <li id="menu1"><a href="#"></a></li>
  11.               <li id="menu2"><a href="#"></a></li>
  12.               <li id="menu3"><a href="#"></a></li>
  13.               <li id="menu4"><a href="#"></a></li>
  14.               <li id="menu5"><a href="#"></a></li>
  15.   </ul>
  16.   </body>
  17. </html>



mon css:

Code :
  1. #menu {
  2. position: relative;
  3. width: 500px;
  4. height: 400px;
  5. margin: 10px auto;
  6. padding: 0;
  7. background: url(gray.png);
  8. }
  9. #menu li {
  10. position: absolute;
  11. margin: 0;
  12. padding: 0;
  13. list-style: none;
  14. }
  15. #menu a {
  16. display: block;
  17. }
  18. #menu1 {left: 66px; top: 103px; width: 269px; height: 128px;}
  19. #menu2 {left: 170px; top: 25px; width: 273px; height: 132px;}
  20. #menu3 {left: 331px; top: 116px; width: 434px; height: 220px;}
  21. #menu4 {left: 212px; top: 243px; width: 324px; height: 352px;}
  22. #menu5 {left: 69px; top: 238px; width: 136px; height: 304px;}
  23. #menu1 a {height: 128px;}
  24. #menu2 a {height: 132px;}
  25. #menu3 a {height: 220px;}
  26. #menu4 a {height: 352px;}
  27. #menu5 a {height: 304px;}
  28. #menu1 a:hover {background: url(color.png) -66px 103px no-repeat;}
  29. #menu2 a:hover {background: url(color.png) -170px 25px no-repeat;}
  30. #menu3 a:hover {background: url(color.png) -331px 116px no-repeat;}
  31. #menu4 a:hover {background: url(color.png) -212px 243px no-repeat;}
  32. #menu5 a:hover {background: url(color.png) -69px 238px no-repeat;}




et les deux images nécésaires :
http://membres.lycos.fr/phemtolazer/color.png

http://membres.lycos.fr/phemtolazer/gray.png

Quelqu'un a la solution ?


Message édité par newblux le 29-04-2008 à 15:28:22
Liens spon sorisés

Inscrivez-vous ou connectez-vous pour masquer ceci.

hum ca sent mauvais mauvais!
Profil : IDNaute
Plus d'informations

mushi mushi ?
Y'a quelqu'un ?
"ohohooooo"
--echo--
"ohohooooo"
bon faudrais que jpense a m'arrété la..

http://www.gugusland.com
Profil : IDNaute
Plus d'informations

pourquoi n'utilise tu pas tout simplement onmouseover et onmouseout ?

hum ca sent mauvais mauvais!
Profil : IDNaute
Plus d'informations

euh je sais pas lol
je ne m'y connais pas très bien..
c'est quoi la difference ?
dans mon mag c'étais comme ça :$ xD
mais je suis ouvert a tte les suggestions..


Message édité par newblux le 29-04-2008 à 12:42:26
http://www.gugusland.com
Profil : IDNaute
Plus d'informations

Si j'ai bien compris tu veux faire ça :

 
Code :
  1. <img src="http://membres.lycos.fr/phemtolazer/gray.png" id=menu onmouseover="this.src='http://membres.lycos.fr/phemtolazer/color.png'" onmouseout="this.src='http://membres.lycos.fr/phemtolazer/gray.png'" alt=menu_img>
 

remplacer l'image lors du survol de la sourie.


Message édité par jerbe le 29-04-2008 à 15:13:55

---------------
Venez jouer sur mon site : http://www.gugusland.com c'est gratuit
mes autres sites : http://jeremy1000.free.fr > http://ze.jeux.free.fr
hum ca sent mauvais mauvais!
Profil : IDNaute
Plus d'informations

remplacé l'image de chaque boule
pour que chaque boule soit un lien

j'ai trouver
le bon code est

:

#menu {
position: relative;
width: 500px;
height: 400px;
margin: 10px auto;
padding: 0;
background: url(gray.png);
}

#menu li {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
}

#menu a {
display: block;
}

#menu1 {left: 84px; top: 118px; width: 80px; height: 80px;}
#menu2 {left: 170px; top: 25px; width: 110px; height: 105px;}
#menu3 {left: 331px; top: 116px; width: 105px; height: 110px;}
#menu4 {left: 212px; top: 243px; width: 115px; height: 110px;}
#menu5 {left: 69px; top: 238px; width: 75px; height: 68px;}

#menu1 a {height: 80px;}
#menu2 a {height: 105px;}
#menu3 a {height: 110px;}
#menu4 a {height: 110px;}
#menu5 a {height: 68px;}

#menu1 a:hover {background: url(color.png)-84px -118px no-repeat;}
#menu2 a:hover {background: url(color.png)-170px -25px no-repeat;}
#menu3 a:hover {background: url(color.png)-331px -116px no-repeat;}
#menu4 a:hover {background: url(color.png)-212px -243px no-repeat;}
#menu5 a:hover {background: url(color.png)-69px -238px no-repeat ;}

http://www.gugusland.com
Profil : IDNaute
Plus d'informations

aaaa, d'accord, j'avais pas compris ce que tu voulais faire, dsl.


Aller à :
Ajouter une réponse
  FORUM Infos-du-Net » Programmation » erreur dans le html ou dans le css ? [RESOLU]
 

Liens