Tema: ¿Cómo colocar una imagen de fondo utilizando CSS?
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 01/06/2011, 15:01
ambigus
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 16 años, 2 meses
Puntos: 1
Respuesta: ¿Cómo colocar una imagen de fondo utilizando CSS?
Muchas gracias: Ag666 por tu pronta respuesta.

Ahora te comparto mis avances:

http://extremegamex1.gofreeserve.com...dex_1.2.4.html

He avanzado un poco, sin embargo aún no logro colocarlos los dos en forma vertical.

Les dejo el código .CSS:

Código CSS: 
Ver original
  1. <style type="text/css">
  2. p { color: black; font-family: Verdana; }
  3. .destacado { color: white; }
  4. ul {
  5.     list-style: none;
  6.     margin: 0;
  7.     padding: 0;
  8.     background-image: url("http://extremegamex1.gofreeserve.com/images/boton_menu_1.png");
  9.   background-repeat: no-repeat;
  10.   background-position: 3.5px 12px;
  11.   font-family: Verdana;
  12.   padding-left:  20px;
  13.   padding-right: 20px;
  14.   padding-top:  3px;
  15.   padding-bottom: 1px;
  16.   margin-top: 5px;
  17.   margin-bottom: 0px;
  18.     }
  19.  
  20. #menu1 {
  21.   clear: both;
  22.   float: left;
  23.   width: 100%;
  24.   list-style: none;
  25.   margin: 0;
  26.   padding: 0;
  27.   }
  28.     
  29. #menu1 li a {
  30.     height: 32px;
  31.     voice-family: "\"}\""; 
  32.     voice-family: inherit;
  33.     height: 60px;
  34.     text-decoration: none;
  35.     display: inline;
  36.     }   
  37.     
  38. #menu1 li a:link, #menu1 li a:visited {
  39.     color: #FFF;
  40.     display: block;
  41.     padding: 15px 0 0 0px;
  42.     }   
  43.   </style>

y el HTML por si acaso:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Free CSS Vertical Menu Designs at exploding-boy.com</title>
  6.   <style type="text/css">
  7. p { color: black; font-family: Verdana; }
  8. .destacado { color: white; }
  9. ul {
  10.     list-style: none;
  11.     margin: 0;
  12.     padding: 0;
  13.     background-image: url("http://extremegamex1.gofreeserve.com/images/boton_menu_1.png");
  14.   background-repeat: no-repeat;
  15.   background-position: 3.5px 12px;
  16.   font-family: Verdana;
  17.   padding-left:  20px;
  18.   padding-right: 20px;
  19.   padding-top:  3px;
  20.   padding-bottom: 1px;
  21.   margin-top: 5px;
  22.   margin-bottom: 0px;
  23.     }
  24.  
  25. #menu1 {
  26.   clear: both;
  27.   float: left;
  28.   width: 100%;
  29.   list-style: none;
  30.   margin: 0;
  31.   padding: 0;
  32.   }
  33.     
  34. #menu1 li a {
  35.     height: 32px;
  36.     voice-family: "\"}\""; 
  37.     voice-family: inherit;
  38.     height: 60px;
  39.     text-decoration: none;
  40.     display: inline;
  41.     }   
  42.     
  43. #menu1 li a:link, #menu1 li a:visited {
  44.     color: #FFF;
  45.     display: block;
  46.     padding: 15px 0 0 0px;
  47.     }   
  48.   </style>
  49. </head>
  50.  
  51. <body>
  52.  
  53. <div id="menu1">
  54.         <ul>
  55.             <li><a href="Descripción" title="Descripción">Descripción</a></li>
  56.         </ul>
  57. </div>
  58. <div id="menu1">
  59.         <ul>
  60.             <li><a href="#2" title="Link 2">Requisitos</a></li>
  61.         </ul>
  62. </div>
  63. </body>
  64. </html>

Espero una pronta respuesta.