Tema: Box repetible debajo del contenido
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/06/2013, 00:33
Oscor
 
Fecha de Ingreso: junio-2013
Mensajes: 2
Antigüedad: 10 años, 10 meses
Puntos: 0
Box repetible debajo del contenido
Uhm como explicarlo... Lo que necesito es saber cómo hacer que una caja sea repetible hasta cierto punto, mostrando adelante el contenido (noticias, articulos, etc)
Como sea, con las imagenes y codigo entenderán a lo que me refiero.



Asi está actualmente:

Lo que quiero es que el 'back-content_mid' sea repetible hasta 'back-content_foot' pasando por debajo de las cajas del content (top, mid y foot content)

Por lo menos que quede así:


Luego de tener eso, ya es más facil. En los content lo configuraré con Cutenews o Fusionews que está la opción de agregar los top, mid y footer content.
Aquí un ejemplo final:


Ahora el codigo HTML y CSS

Código HTML: 
Ver original
  1. <div>
  2.  <div class="back-content_top"></div>
  3.  <div class="back-content_mid"></div>
  4.  <div class="back-content_foot"></div>
  5. </div>
  6. <div>
  7.  <div class="top-content"></div>
  8.  <div class="mid-content"></div>
  9.  <div class="foot-content"></div>
  10. </div>

Código CSS: 
Ver original
  1. .back-content_top {
  2.   width:902px;
  3.   height:18px;
  4.   position:absolute;
  5.   top:609px;
  6.   left:190px;
  7.   z-index:8;
  8.   background-image: url(files/top-back.png);
  9.   }
  10. .back-content_mid {
  11.   width:902px;
  12.   height:6px;
  13.   position:absolute;
  14.   top:627px;
  15.   left:190px;
  16.   z-index:9;
  17.   background-image: url(files/mid-back.png);
  18.   background-repeat: repeat-y;
  19.  
  20.   }
  21. .back-content_foot {
  22.   width:902px;
  23.   height:17px;
  24.   position:absolute;
  25.   top:1293px;
  26.   left:190px;
  27.   z-index:10;
  28.   background-image: url(files/foot-back.png);
  29.   }
  30. .top-content {
  31.   width:543px;
  32.   height:22px;
  33.   position:absolute;
  34.   top:627px;
  35.   left:213px;
  36.   z-index:11;
  37.   background-image: url(files/top-content.png);
  38.   }
  39. .mid-content {
  40.   width:543px;
  41.   height:2px;
  42.   position:absolute;
  43.   top:649px;
  44.   left:213px;
  45.   z-index:12;
  46.   background-image: url(files/mid-content.png);
  47.   }
  48. .foot-content {
  49.   width:543px;
  50.   height:22px;
  51.   position:absolute;
  52.   top:1216px;
  53.   left:213px;
  54.   z-index:13;
  55.   background-image: url(files/foot-content.png);
  56.   }

Mi petición es saber las etiquetas que faltan, que sobran y el orden de estas.
De antemano gracias por darte el tiempo de leer.