Foros del Web » Creando para Internet » CSS »

Cajas dentro de cajas

Estas en el tema de Cajas dentro de cajas en el foro de CSS en Foros del Web. Muy buenas y FELIZ AÑO ! :) Qué tal? Mucha resaca? jaja Bueno tengo una preguntilla con respecto al CSS. Tengo un script el cual ...
  #1 (permalink)  
Antiguo 03/01/2011, 06:28
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
Información Cajas dentro de cajas

Muy buenas y FELIZ AÑO ! :) Qué tal? Mucha resaca? jaja

Bueno tengo una preguntilla con respecto al CSS.

Tengo un script el cual leer las imágenes de una carpeta. Estas imágenes las muestra reducidas dentro de un span, para luego si se desea, que se pueda borrar cualquiera. El problema que tengo es que al listar las imágenes lo hace dentro de una misma fila y cuando llega al límite de la caja (div) no hace un salto de línea si no que continua y el diseño queda feo. Os dejo una imagen de como queda:



Y este es el código que uso:

Código PHP:
<div class="onecolumn">
    <div class="header">
        <span>Borrar Imagen</span>
    </div>
    
    <br class="clear"/>
    
    <div class="content">
           <h3>Seleccione la imagen que desea borrar</h3>
        <div style="width:85%; display:block; background-color:#999999;">
<?php
        
//creo un arreglo de extensiones validas
        
$arr_ext = array("jpg","png","gif""JPG""PNG""GIF");
        
        
//abro un directorio
        
$mydir opendir("../galeria/instalaciones");
    
        
//leo los archivos del directorio
        
while($archivo readdir($mydir)){
            
$ext substr($archivo,-3);

            
//si la extension del archivo es correcta muestra la imagen
            
if(in_array($ext,$arr_ext)){
?>
                    <span style="width:215px; padding:5px; margin:5px; display:table-cell;">
                    <img src="../galeria/instalaciones/<?php echo $archivo;?>" width="150px">
                    <br />
                    Nombre: <?php echo $archivo?>
                    <br />
                    <a href="#">Borrar</a>
                </span>
<?php
               
}
           }
?> 
        </div>
    </div>
</div>
Alguna idea que podría hacer?

Gracias :) !! Un saludo !!
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #2 (permalink)  
Antiguo 03/01/2011, 07:28
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: Cajas dentro de cajas

deberias revisar el echo de $archivo, ya que es el responsable de mostrar la cantidad de imagenes... en ese php deberias crear el salto de linea
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 03/01/2011, 08:20
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
Respuesta: Cajas dentro de cajas

Cita:
Iniciado por GAST0N Ver Mensaje
deberias revisar el echo de $archivo, ya que es el responsable de mostrar la cantidad de imagenes... en ese php deberias crear el salto de linea
El problema es que si pongo un salgo de línea me lo hace por cada imagen, y no me interesa que lo haga por cada una si no cuando lleva, por ej, 5. Miraré alguna manera de implementar eso.

Thanks
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #4 (permalink)  
Antiguo 03/01/2011, 15:40
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Cajas dentro de cajas

Hola:

Creo que sería mejor que pusieras la URL de la página o si no la tienes el código HTML generado y el CSS,

Saludos.

  #5 (permalink)  
Antiguo 04/01/2011, 05:45
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
Respuesta: Cajas dentro de cajas

Aquí dejo el código que aparece y el css es el que puse más arriba, no tiene más misterio.

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3. <!-- Website Title -->
  4. <title>Panel de Administración - Autoescuela Ronda</title>
  5.  
  6. <script type="text/javascript" src="js/flexigrid.js"></script>
  7. <link rel="stylesheet" type="text/css" href="css/flexigrid.css">
  8. <!-- Fin Jquery -->
  9. <!-- CKeditor -->
  10. <style type="text/css">
  11. div.thumb {
  12.     float:left;
  13. }
  14. div.caption {
  15.     padding-left:5px;
  16.     font-size:10px;
  17. }
  18.  
  19. </head>
  20. <div class="content_wrapper">
  21.   <!-- Begin header -->
  22.  
  23.   <div id="header">
  24.     <div id="logo"> <a href="index.php"><img SRC="images/logo.png" alt="Autoescuela Ronda - Admin Panel" border="0"/></a> </div>
  25.     <div id="account_info"> <img SRC="images/icon_online.png" alt="Online" class="mid_align"/> Bienvenido <a href="index.php">Admin</a> | <a href="index.php?adm=config">Configuración</a> | <a href="login.php?logout=si">Salir</a> </div>
  26.  
  27.   </div>
  28.   <!-- End header -->
  29.   <!-- Begin left panel -->
  30.   <a href="javascript:;" id="show_menu">&raquo;</a>
  31.   <div id="left_menu"> <a href="javascript:;" id="hide_menu">&laquo;</a>
  32.  
  33.     <ul id="main_menu">
  34.       <li><a href="index.php"><img SRC="images/icon_home.png" alt="Home"/>Inicio</a></li>
  35.  
  36.       <li> <a id="menu_pages" href=""><img SRC="images/icon_pages.png" alt="Pages"/>Categorías</a>
  37.         <ul>
  38.           <li><a href="index.php?adm=catedit">Ver Categorías</a></li>
  39.           <li><a href="index.php?adm=gestanuncios">Gestión de Cursos</a></li>
  40.         </ul>
  41.       </li>
  42.       <li> <a href=""><img SRC="images/icon_posts.png" alt="Posts"/>Noticias</a>
  43.  
  44.         <ul>
  45.           <li><a href="index.php?adm=crearnoti">Crear Noticia</a></li>
  46.           <li><a href="index.php?adm=editnoti">Editar Noticias</a></li>
  47.         </ul>
  48.       </li>
  49.       <li> <a href=""><img SRC="images/icon_users.png" alt="Users"/>Bolsa de Trabajo</a>
  50.         <ul>
  51.  
  52.           <li><a href="index.php?adm=bolsatrabajo&crear=1">Crear Oferta</a></li>
  53.           <li><a href="index.php?adm=bolsatrabajo&gestionar=1">Editar Ofertas</a></li>
  54.         </ul>
  55.       </li>
  56.       <li> <a href=""><img SRC="images/icon_media.png" alt="Media"/>Instalaciones</a>
  57.         <ul>
  58.           <li><a href="index.php?adm=upimg">Subir Imagen</a></li>
  59.  
  60.           <li><a href="index.php?adm=delimg">Borrar Imagen</a></li>
  61.         </ul>
  62.       </li>
  63.     </ul>
  64.    
  65.   </div>
  66. </div>
  67. <!-- End left panel -->
  68. <div id="content">
  69.   <div class="inner">
  70.     <div class="onecolumn">
  71.  
  72.     <div class="header">
  73.         <span>Borrar Imagen</span>
  74.     </div>
  75.    
  76.     <br class="clear"/>
  77.    
  78.     <div class="content">
  79.         <h3>Seleccione la imagen que desea borrar (Sección en CONSTRUCCIÓN)</h3>
  80.         <div style="width:85%; display:block; background-color:#999999;">
  81.                 <span style="width:215px; padding:5px; margin:5px; display:table-cell;">
  82.  
  83.                     <img src="http://www.forosdelweb.com/f53/galeria/instalaciones/aula4.jpg" width="150px">
  84.                     <br />
  85.                     Nombre: aula4.jpg                    <br />
  86.                     <a href="#">Borrar</a>
  87.                 </span>
  88.                 <span style="width:215px; padding:5px; margin:5px; display:table-cell;">
  89.                     <img src="http://www.forosdelweb.com/f53/galeria/instalaciones/fachada2.JPG" width="150px">
  90.                     <br />
  91.  
  92.                     Nombre: fachada2.JPG                    <br />
  93.                     <a href="#">Borrar</a>
  94.                 </span>
  95.                 <span style="width:215px; padding:5px; margin:5px; display:table-cell;">
  96.                     <img src="http://www.forosdelweb.com/f53/galeria/instalaciones/aula.JPG" width="150px">
  97.                     <br />
  98.                     Nombre: aula.JPG                    <br />
  99.  
  100.                     <a href="#">Borrar</a>
  101.                 </span>
  102.                 <span style="width:215px; padding:5px; margin:5px; display:table-cell;">
  103.                     <img src="http://www.forosdelweb.com/f53/galeria/instalaciones/aula5.JPG" width="150px">
  104.                     <br />
  105.                     Nombre: aula5.JPG                    <br />
  106.                     <a href="#">Borrar</a>
  107.  
  108.                 </span>
  109.                 <span style="width:215px; padding:5px; margin:5px; display:table-cell;">
  110.                     <img src="http://www.forosdelweb.com/f53/galeria/instalaciones/aula6.JPG" width="150px">
  111.                     <br />
  112.                     Nombre: aula6.JPG                    <br />
  113.                     <a href="#">Borrar</a>
  114.                 </span>
  115.                 <span style="width:215px; padding:5px; margin:5px; display:table-cell;">
  116.  
  117.                     <img src="http://www.forosdelweb.com/f53/galeria/instalaciones/fachada.jpg" width="150px">
  118.                     <br />
  119.                     Nombre: fachada.jpg                    <br />
  120.                     <a href="#">Borrar</a>
  121.                 </span>
  122.                 <span style="width:215px; padding:5px; margin:5px; display:table-cell;">
  123.                     <img src="http://www.forosdelweb.com/f53/galeria/instalaciones/aula2.JPG" width="150px">
  124.                     <br />
  125.  
  126.                     Nombre: aula2.JPG                    <br />
  127.                     <a href="#">Borrar</a>
  128.                 </span>
  129.                 <span style="width:215px; padding:5px; margin:5px; display:table-cell;">
  130.                     <img src="http://www.forosdelweb.com/f53/galeria/instalaciones/aula3.jpg" width="150px">
  131.                     <br />
  132.                     Nombre: aula3.jpg                    <br />
  133.  
  134.                     <a href="#">Borrar</a>
  135.                 </span>
  136.  
  137.         </div>
  138.     </div>
  139. </div>  </div>
  140.   <br class="clear"/>
  141.   <br class="clear"/>
  142. </div>
  143. <!-- End content -->
  144.  
  145. </div>
  146. </body>
  147. </html>

Saludos.


EDITADO

Bueno, aunque no sea CSS lo pude solucionar aplicando este pequeño script:

Código PHP:
Ver original
  1. $i = 1;
  2. if($i % 6 == 0){
  3.  echo "<br>";
  4. }
  5. $i++;

Espero que a alguno le sirva.
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?

Última edición por Jask; 04/01/2011 a las 06:19 Razón: Solucionado !!

Etiquetas: cajas, php, span
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:01.