Se connecter / S'enregistrer
Votre question

erreur dans le html ou dans le css ? [RESOLU]

Tags :
  • linux
  • Programmation
Dernière réponse : dans Programmation
28 Avril 2008 23:01:02

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 :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>" 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.  
  8. </head>
  9. <body>
  10. <ul id="menu">
  11. <li id="menu1"><a href="#"></a></li>
  12. <li id="menu2"><a href="#"></a></li>
  13. <li id="menu3"><a href="#"></a></li>
  14. <li id="menu4"><a href="#"></a></li>
  15. <li id="menu5"><a href="#"></a></li>
  16. </ul>
  17. </body>
  18. </html>


mon css:
  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.  
  10. #menu li {
  11. position: absolute;
  12. margin: 0;
  13. padding: 0;
  14. list-style: none;
  15. }
  16.  
  17. #menu a {
  18. display: block;
  19. }
  20.  
  21. #menu1 {left: 66px; top: 103px; width: 269px; height: 128px;}
  22. #menu2 {left: 170px; top: 25px; width: 273px; height: 132px;}
  23. #menu3 {left: 331px; top: 116px; width: 434px; height: 220px;}
  24. #menu4 {left: 212px; top: 243px; width: 324px; height: 352px;}
  25. #menu5 {left: 69px; top: 238px; width: 136px; height: 304px;}
  26.  
  27. #menu1 a {height: 128px;}
  28. #menu2 a {height: 132px;}
  29. #menu3 a {height: 220px;}
  30. #menu4 a {height: 352px;}
  31. #menu5 a {height: 304px;}
  32.  
  33. #menu1 a:hover {background: url(color.png) -66px 103px no-repeat;}
  34. #menu2 a:hover {background: url(color.png) -170px 25px no-repeat;}
  35. #menu3 a:hover {background: url(color.png) -331px 116px no-repeat;}
  36. #menu4 a:hover {background: url(color.png) -212px 243px no-repeat;}
  37. #menu5 a:hover {background: url(color.png) -69px 238px no-repeat;}



et les deux images nécésaires :




Quelqu'un a la solution ?

Autres pages sur : erreur html css resolu

29 Avril 2008 09:59:00

mushi mushi ?
Y'a quelqu'un ?
"ohohooooo"
--echo--
"ohohooooo"
bon faudrais que jpense a m'arrété la..
29 Avril 2008 12:32:59

pourquoi n'utilise tu pas tout simplement onmouseover et onmouseout ?
Contenus similaires
29 Avril 2008 12:40:17

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..
29 Avril 2008 15:11:59

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

  1. <img src="<a href="http://membres.lycos.fr/phemtolazer/gray.png" rel="nofollow" target="_blank">http://membres.lycos.fr/phemtolazer/gray.png</a>" id=menu onmouseover="this.src='<a href="http://membres.lycos.fr/phemtolazer/color.png" rel="nofollow" target="_blank">http://membres.lycos.fr/phemtolazer/color.png</a>'" onmouseout="this.src='<a href="http://membres.lycos.fr/phemtolazer/gray.png" rel="nofollow" target="_blank">http://membres.lycos.fr/phemtolazer/gray.png</a>'" alt=menu_img>


remplacer l'image lors du survol de la sourie.
29 Avril 2008 15:27:39

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 ;}

29 Avril 2008 17:08:33

aaaa, d'accord, j'avais pas compris ce que tu voulais faire, dsl.
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS