Tema: Necesito poner un background que rellene una lista
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 22/01/2015, 14:41
coldfire
 
Fecha de Ingreso: enero-2015
Ubicación: Andalucia
Mensajes: 4
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Necesito poner un background que rellene una lista
Perfecto, aqui lo añado, espero que me podais ayudar pues os lo agadecere Mucho :)

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Ejercicio 27</title>
  5. <meta charset="utf-8" />
  6. <link rel="stylesheet" type="text/css" href="css/ej27.css"/>
  7. </head>
  8. <body>
  9.  <header>HEADER</header>
  10.     <article>
  11.         <section>
  12.             <p>SECCION 1</p>
  13.         </section>
  14.     </article>
  15.     <aside>
  16.         <ul>
  17.             <li class="home">Home</li>
  18.             <ul>
  19.                 <li class="lista">Opcion 1</li>
  20.                     <ul>
  21.                         <li class="sublista">Página 1.1</li>
  22.                         <li class="sublista">Página 1.2</li>
  23.                     </ul>
  24.                 <li class="lista">Opcion 2</li> 
  25.                     <ul>
  26.                         <li class="subsublista">Opcion 2a</li>
  27.                         <ul>
  28.                             <li class="subsubsublista">Página 2a.1</li>
  29.                             <li class="subsubsublista">Página 2a.2</li>
  30.                         </ul>
  31.                     <li class="subsublista">Opcion 2b</li>
  32.                         <ul>
  33.                             <li class="subsubsublista">Página 2b.1</li>
  34.                             <li class="subsubsublista">Página 2b.2</li>
  35.                         </ul>
  36.                 <li class="sublista">Página 2.1</li>
  37.                 <li class="sublista">Página 2.2</li>    
  38.                     </ul>
  39.                 <li class="lista">Opcion 3</li>
  40.             <ul>
  41.                 <li class="subsublista">Opcion 3a</li>
  42.                 <ul>
  43.                     <li class="subsubsublista">Página 3a.1</li>
  44.                     <li class="subsubsublista">Página 3a.2</li>
  45.                 </ul>
  46.             </ul>     
  47.             </ul>  
  48.         </ul>
  49.     </aside>
  50. </body>
  51. </html>

Código CSS: 
Ver original
  1. /* Regla de reseteo */
  2. * {
  3.     margin: 0 auto;
  4.     text-align: center;
  5.     font-family:sans-serif;
  6. }
  7. header{
  8. background-color: rgb(230,200,0);
  9. height: 30px;
  10. }
  11. article{
  12. width: 70%;
  13. height: 200px;
  14. background-color: #7DD2FA;
  15. float: right;
  16. }
  17. aside{
  18. border: 3px solid;
  19. border-color: grey;
  20. width: 25%;
  21. float: left;
  22. background-color: rgb(200,200,200);
  23.  
  24. }
  25. li{
  26.  
  27. text-align: justify;
  28. }
  29. li:hover{
  30. background-color: #FCDD16;
  31. }
  32. .home{
  33. background-color: #000000;
  34. color: white;
  35. font-weight:bold;
  36. list-style-image: url('../img/carpeta1.png');
  37.  list-style-position: inside; 
  38. }
  39. .lista{
  40. background-color: #A1A19F;
  41. list-style-image: url('../img/carpeta3.png');
  42.  list-style-position: inside; 
  43. }
  44. .sublista{
  45. background-color: #939594;
  46. list-style-image: url('../img/carpeta2.png');
  47.  list-style-position: inside; 
  48. }
  49. .subsublista{
  50. background-color: #BABABA;
  51. list-style-image: url('../img/carpeta4.png');
  52. list-style-position: inside; 
  53. }
  54. .subsubsublista{
  55. background-color: #D0D2D1;
  56. list-style-image: url('../img/carpeta5.png');
  57. list-style-position: inside; 
  58. }