repetir región

[ivan_pala21]

Muy buenas

estoy intentando repetir una tabla en la web hasta aquí todo bien se repite con los registro de la base de datos, el problema viene cuando inserto un div dentro de la tabla con una imagen de fondo este div no se me repite solo se ve en el primer registro es una imagen de un marco para que quede encima de las imágenes que deben repetirse, pero no hay manera.

este es el código:

Código HTML:

<?php 
  
  $cuantos=0;
  do{ 
  if ($cuantos == 0){ 
  
  ?> 
  <table width="80%" height="200"  border="0" align="center" bgcolor="#FFFFFF" >
  
  
      <tr>
        <?php
  }
  $cuantos ++;
  ?>
    
     
        <td width="49%" height="189" align="center" valign="middle"    >
        
        <div id="marcofoto" ></div>
        <img src="imagenes/fotosadopciones/<?php echo $row_adopciones['foto']; ?>" width="195" height="163" alt="perros para adoptar"   /></td>
        
        
        <td width="51%" align="left" valign="middle"><table width="131%" height="187"  border="0" >
            <tr>
        <td width="2%" height="137" valign="top"></td>
        
        <td width="1%" bgcolor="#751616"></td>
        
        <td width="5%" align="center" valign="top">&nbsp;</td>
        
        <td width="91%" align="left" valign="top">
        
            
          <strong style="color:#754E42; font-family:Arial, Helvetica, sans-serif;"> 
          Raza:</strong> <?php echo $row_adopciones['raza']; ?>
            
         <strong style="color:#754E42; font-family:Arial, Helvetica, sans-serif;">
         <br />
         Años:</strong> <?php echo $row_adopciones['edad']; ?><strong style="color:#754E42; font-family:Arial, Helvetica, sans-serif;"><br />
         Sexo:</strong> <?php echo $row_adopciones['sexo']; ?>
 
            <br />
            <br />
 
          <strong style="color:#754E42; font-family:Arial, Helvetica, sans-serif;">Observaciones:</strong>
          <br />
          <?php echo $row_adopciones['observaciones']; ?>
          
          <br />
          <br />
          <strong style="color:#754E42; font-family:Arial, Helvetica, sans-serif;">Ingreso:</strong><?php echo $row_adopciones['fecha']; ?>
          
          </td>
      </tr>
    </table>
        </td>
       
   <?php  
  //este numero del if de la variable cuantos es el numero de filas que queremos 
   if ($cuantos == 1){ 
   $cuantos =0;
  ?> 
      </tr>
      
     
    </table>
    
    <hr align="right" width="90%" color="#751616"/>
     <?php
   }
   ?>
    
    <?php } while ($row_adopciones = mysql_fetch_assoc($adopciones)); ?>
 

aquí el css:

Código CSS:

#marcofoto {
    background-image: url(imagenes/marcfotos.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 66px;
    top: 70px;
    width: 220px;
    height: 200px;
}
 

[pateketrueke]

1. Los IDS debes ser únicos, así que está mal que repitas un elemento de HTML con el mismo ID.
2. El problema es de CSS y HTML, ¿por que preguntaste en el foro de PHP?

[ivan_pala21]

pensaba que el problema venia de php, pero no entiendo a que te refieres con que tienen que ser únicos el div="marcofoto" solo existe uno con ese nombre, podrías darme una pista es que no entiendo a que te refieres.

[ivan_pala21]

pateketrueke no me podrías ayudar porfa

[ocp001a]

Si dentro de un bucle colocas <div id="marcofoto" >

todos los divs tendrán el mismo id, esto no es correcto. si quieres que todos los divs usen el mismo css, puedes usar las pseudoclases:

<div class="marcofoto" >

y en tu css


.marcofoto {
background-image: url(imagenes/marcfotos.png);
-
-
-

[ivan_pala21]

ocp001a gracias es justo lo que probé ahora pero tampoco se repite solo se aplica a la primera imagen el resto no aparece

mira esto es justo lo que sucede:
http://refugiodeanimales.com/adopciones.php

[ocp001a]

No presté atención al contenido de tu css, pero ahora que lo veo, usas posición absoluta, con lo cual todos los marcos están saliendo exactamente en el mismo lugar (encimados) trata de usar posiciones relativas. Y por cierto, procura no usar tantas tablas para maquetar, con usar una sola tabla para que salga la lista de mascotas sería suficiente.

[ivan_pala21]

ocp001a gracias por los consejos probare lo de la posición relativa a ver si se repite el marco

[ivan_pala21]

tampoco funciona alguna idea mas porfa

[ocp001a]

Sí, que junto a la posición absoluta quites el top y left, y coloques el contenido de la celda (la foto de la mascota) dentro del div y no a un lado.

[ivan_pala21]

ya pero entonces la imagen del marco me queda detrás de la foto y eso no queda bien necesito que el marco quede encima de la foto

[kseso?]

Esto no puede ser que lo esté planteando un "profesional".
¿En alguna parte hoy es el día de los Santos Inocentes o april fooooooolssssss day?

¿Está usted pidiendo que alguien le ayude a colocar el fondo (background) de un elemento encima de los contenidos de dicho elemento?
Quizás se podría, ¿pero a costa de qué?
Mejor busque otro enfoque o vía de solucción.
Con un agravante:

sus imágenes html = width="195" height="163"
El espacio interior de su imagen del background: 180 x 148 px ( +-)

Sobre su marcado html ya le hace un apunte ocp001a.Consejo que como ha ignorado no vamos a seguir. Pero sólo el hecho de ver que crea una tabla por cada animal que muestra...

N.B.: Por cierto, ¿a qué regiones se refiere en el título del tema? Procure ser un poco más riguroso en la terminología. Es la base para entendernos y saber de qué se está hablando.

[ivan_pala21]

kseso? pero la idea es que el marco quede encima de la foto ese es el problema si coloco el marco de fondo en bracground como tu dices la imagen queda encima y si coloco la imagen en bracground la imagen se me des configura y no queda centrada, y te recuerdo que esto es un foro para preguntar si fuese un profesional como tu no tendría la necesidad de preguntar .
bueno le di una solución cahapucilla se que no es lo correcto pero bueno.
http://refugiodeanimales.com/adopciones.php

[kseso?]

...si coloco el marco de fondo en bracground como tu dices...

No. Yo no he dicho que haga.
Eso es lo que hace su código:

Código CSS:

#marcofoto {
    background-image: url("imagenes/marcfotos.png");
 

Y la solucción que aplica no cambia el apilamiento en Z.
Ha cambiado el tamaño de las imágenes.

Entonces, ¿su planteamiento y pretensión inicial (alteración del apilamiento) cómo lo ve ahora?
¿Le sirvió o no lo que dije en #12 aunque sólo fuese para plantearse la vía de ataque de otra forma?
Pues eso era lo que pretendía. Que pensase por usted mismo. Que buscase alternativas y regresara aquí habiendo aprendido algo
Si lo conseguí, perfecto.
Con independencia de que no le gustase que utilizase la expresión "profesional" entre comillas.

Ahora sólo le queda optimizar las imágenes. Reduzca su tamaño en vez de mostrarlas más pequeñas de lo que son.