Tema: Problema con imagen de fondo en active link
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/06/2011, 17:45
Avatar de Hurieta
Hurieta
 
Fecha de Ingreso: enero-2011
Mensajes: 27
Antigüedad: 13 años, 2 meses
Puntos: 2
Pregunta Problema con imagen de fondo en active link
Hola... miren estoy haciendo una web y se me ocurrio ponerle una imagen de fondo a una active link de arriba bueno... les dejo el codigo del CSS y el del HTML para que vean que estoy haciendo mal

index.html


Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <title>Gaming Online</title>
  4.     <link href="estilos.css" rel="stylesheet" type="text/css">
  5.     </head>
  6.     
  7.     <body>
  8.     
  9.         <!--Encabezado-->
  10.         <br>
  11.         
  12.         <div id="botonera">
  13.         <ul>
  14.         <li class="a"><a href="index.html">Inicio</a></li>
  15.         <li class="a"><a href="juegos.html">Juegos</a></li>
  16.         <li class="a"><a href="videos.html">Videos</a></li>
  17.         <li class="a"><a href="imagenes.html">Imagenes</a></li>
  18.         <li class="a"><a href="consultas.html">Consultas</a></li>
  19.         </ul>
  20.         </div>
  21.         
  22.         
  23.         <div id="nuevos">
  24.         
  25.         
  26.         
  27.         </div>
  28.         
  29.         <!--Fin de encabezado-->
  30.         
  31.         <div id="contenido">
  32.             <div id="juegos">
  33.             </div>
  34.             <div id="centro">
  35.             </div>
  36.         </div>
  37.         
  38.         <!--Pie-->
  39.         
  40.         <div id="pie">
  41.         
  42.         </div>
  43.         
  44.         <!--Fin de pie-->
  45.         
  46.     </body>
  47.     
  48. </html>

estilos.css


Código CSS: 
Ver original
  1. * {margin:0; padding:0;}
  2. html {background: #303030; width:auto;}
  3. body {margin:auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:1.5em; width:850px; display:table; color:#303030;}
  4. .b a:link {color: #6F818B; text-decoration:none; }
  5. .b a:visited {color: #6F818B; text-decoration:none; }
  6. .b a:active  {color: #6F818B; text-decoration: underline; }
  7. .b a:hover {color: #6F818B; text-decoration: underline; }
  8. p {font-family:Tahoma; font-size:11px; margin:0 0 10px 0; color:#5c5c5c; text-align:justify;}
  9. h2 {font-family:Tahoma; font-size:11px; margin:0 0 5px 0; color:#3F93DD;}
  10. h1 {font-family:Tahoma; font-size:18px; margin:0 0 10px 0; color:#3F93DD; text-transform:capitalize;}
  11. #botonera {background: url(imagenes/menu.png) repeat-x; width:800px; height:45px; color:black}  
  12. #botonera ul {width:800px; height:45px; color:black}     
  13. #botonera ul li {display:block; float:left; width:160px; height:45px; text-align:center; color:black}
  14. .a {font-family:Comic Sans MS; font-size:16px; color:black}
  15. .a a:link{background:url(imagenes/alink.png) no-repeat; text-decoration:none; color:black; display:block; width:160px; height:100%; text-align:center; line-height:40px;}
  16. .a a:active {background:url(imagenes/active.png) no-repeat; text-decoration:none; color:black; display:block; width:160px; height:100%; text-align:center; line-height:40px;}
  17. .a a:hover{color:black; background:url(imagenes/hover.png) no-repeat; text-decoration:none; color:black; display:block; width:160px; height:100%; text-align:center; line-height:40px;}
  18. .a v:link {color:black; line-height:40px; color:black text-decoration:none; color:black; display:block; width:160px; height:100%; text-align:center; line-height:40px;}
  19. #nuevos {background: #A4A4A4; width: 800px; height: 250px;}
  20. #contenido {width:800px; background: #ffffff;}
  21. #juegos {float:left; background: #535353; width:200px; height: 350px;}
  22. #centro {float:right; background: #C6C3C3; width:600px; height: 600px;}
  23. #pie {}