Tema: duda con imagenes web
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 24/05/2013, 15:16
rascabuchitos
 
Fecha de Ingreso: abril-2011
Ubicación: Peru
Mensajes: 486
Antigüedad: 13 años
Puntos: 9
Respuesta: duda con imagenes web
lo que trato de hacer es un index... una portada web pero
en vez de poner de una en una cada imagen en un div y terminarlo rapido

tengo un lienzo y dentro de ella varias imagenes como esto

por tanto tengo que hacer que cada una de las imagenes dentro del lienzo aparezcan en cada div

aqui el codigo



Código HTML: 
Ver original
  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" lang="es-es">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5. <title>demo</title>
  6. <link href="style.css" type="text/css" rel="stylesheet"/>
  7. </head>
  8. <body>
  9. <div class="contenedor">
  10.     
  11. <div class="menu">
  12.     <div class="menu_1">
  13.         <h2>1</h2>
  14.     </div>
  15. </div>
  16.  
  17. <div class="anuario">
  18.     <div class="imagen">
  19.         <h2>2</h2>
  20.     </div>
  21. </div>
  22.  
  23. <div class="fiesta">
  24.     <div class="promocion">
  25.         <h2>3</h2>
  26.     </div>
  27. </div>
  28.  
  29. <div class="amigos">
  30.     <div class="colegio">
  31.         <h2>4</h2>
  32.     </div>
  33. </div>
  34. </div>
  35. </body>
  36. </html>


Código CSS: 
Ver original
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     border: 0;
  5.     position: relative;
  6. }
  7. html, body {
  8.   height: 100%;
  9.   background-image: url("img/tono2013.jpg");
  10.   background-attachment: fixed; 
  11.   background-repeat: no-repeat; 
  12.   background-position: center center; 
  13. }
  14. .contenedor {
  15.   width: 50%;
  16.   position: absolute;
  17.   top: 10%;
  18.   left: 25%;
  19. }
  20. .menu {
  21.   text-align: center;
  22.   background: #ff00ff;
  23. }
  24.  
  25. .menu:before {
  26.   content: '';
  27.   display: inline-block;
  28.   margin-right: -0.25em; 
  29.  }
  30. .menu_1 {
  31.   background-image: url("../img/11.jpg");
  32.   display: inline-block;
  33.   width: 45%;
  34.   min-width: 60px;
  35.   padding: 5px 1%;
  36.   margin: 12px 1%;
  37.   border: #ff00ff solid 1px;
  38.   background: #f5f5f5;
  39.   text-align: left;
  40.   box-shadow: 0 0 15px 15px rgba(0,0,0,.2)
  41. } 
  42. .anuario {
  43.   text-align: center;
  44.   background: #ff00ff;
  45. }
  46.  
  47. .anuario:before {
  48.   content: '';
  49.   display: inline-block;
  50.   height: 100%;
  51.   vertical-align: top;
  52.   margin-right: -0.25em; 
  53.  }
  54.  
  55. .imagen {
  56.   background-image: url(img/11.jpg);
  57.   display: inline-block;
  58.   vertical-align: middle;
  59.   width: 12%;
  60.   min-width: 60px;
  61.   padding: 5px 1%;
  62.   margin: 2px 1%;
  63.   border: #a0a0a0 solid 1px;
  64.   background: #f5f5f5;
  65.   text-align: left;
  66.   box-shadow: 0 0 15px 15px rgba(0,0,0,.2)
  67. } 
  68. .fiesta {
  69.   text-align: center;
  70.   background: #ff00ff;
  71. }
  72.  
  73. .fiesta:before {
  74.   content: '';
  75.   display: inline-block;
  76.   margin-right: -0.25em; 
  77.  }
  78. .promocion {
  79.   background-image: url(img/11.jpg);
  80.   display: inline-block;
  81.   width: 28%;
  82.   min-width: 60px;
  83.   padding: 5px 1%;
  84.   margin: 12px 1%;
  85.   border: #a0a0a0 solid 1px;
  86.   background: #f5f5f5;
  87.   text-align: left;
  88.   box-shadow: 0 0 15px 15px rgba(0,0,0,.2)
  89. } 
  90. .amigos {
  91.   text-align: center;
  92.   background: #ff00ff;
  93. }
  94.  
  95. .amigos:before {
  96.   content: '';
  97.   display: inline-block;
  98.   margin-right: -0.25em; 
  99.  }
  100. .colegio {
  101.   background-image: url('../img/11.jpg');
  102.   display: inline-block;
  103.   width: 94%;
  104.   min-width: 60px;
  105.   padding: 5px 1%;
  106.   margin: 12px 1%;
  107.   border: #ff00ff solid 1px;
  108.   background: #f5f5f5;
  109.   text-align: left;
  110.   box-shadow: 0 0 15px 15px rgba(0,0,0,.2)
  111. }


gracias...¡¡¡¡