Foros del Web » Creando para Internet » CSS »

capas que se me salen

Estas en el tema de capas que se me salen en el foro de CSS en Foros del Web. Hola a todos, estoy haciendo una sección de drag & drop y la verdad es que no tengo ni idea de maquetar / diseñar una ...
  #1 (permalink)  
Antiguo 24/11/2010, 03:10
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 13 años, 9 meses
Puntos: 62
capas que se me salen

Hola a todos, estoy haciendo una sección de drag & drop y la verdad es que no tengo ni idea de maquetar / diseñar una web, he llegado hasta esto:

http://zital.no-ip.org/projects/destacados/

mi idea es que las "regiones" -> .region se queden dentro de las "zonas" .zone

como podréis ver se salen de las zonas :(

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">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Destacados</title>
  6.         <!--
  7.        <link href= "/cms/libs/css/general.css" rel="stylesheet" type="text/css" />
  8.        -->
  9.         <link href= "css/auto/00jquery-ui.css" rel="stylesheet" type="text/css" />
  10.         <link href= "css/auto/01jquery-modal.css" rel="stylesheet" type="text/css" />
  11.         <link href= "css/auto/03jquery-jgrowl.css" rel="stylesheet" type="text/css" />
  12.  
  13.         <link href= "css/manual/jqueryTable.css" rel="stylesheet" type="text/css" />
  14.         <script src="js/auto/00jquery.js" type="text/javascript"></script>
  15.         <script src="js/auto/01jquery-ui.js" type="text/javascript"></script>
  16.         <script src="js/auto/02jquery-modal.js" type="text/javascript"></script>
  17.         <script src="js/auto/03jquery-jgrowl.js" type="text/javascript"></script>
  18.         <script src="js/auto/04_opened_content.js" type="text/javascript"></script>
  19.  
  20.         <script src="js/auto/05_kvm.js" type="text/javascript"></script>
  21.         <script src="js/auto/06jquery-include.js" type="text/javascript"></script>
  22.         <script type="text/javascript">
  23.             <!--
  24.            $(document).ready(function()
  25.         {
  26.                 /*         
  27.                 if(isLogged({type: 'reload'}))
  28.                 {
  29.                 var idcontenido = '';
  30.                 if(idcontenido)
  31.                 new opened_content(idcontenido);
  32.                 else
  33.                 $.blockUI(
  34.                 {
  35.                 id: 'no_idcontenido',
  36.                  theme:     true,
  37.                  title:     'Error',
  38.                  message:   $('<div><span>No existe contenido </span><a href="" onclick="window.close;" title="cerrar">cerrar</a></div>')
  39.                 });
  40.                  }     
  41.                 */
  42.         $('#zone_content').sortable(
  43.         {
  44.             update: function(event, ui)
  45.             {                                  
  46.                 var item = ui.item;
  47.                 var node = item.get(0).nodeName.toLowerCase();
  48.                 if(node==='img')
  49.                 {
  50.                     var div = $('<div></div>');
  51.                     if(item.attr('title')==='add left zone')
  52.                         div.addClass('zone zLeft');                            
  53.                     else if(item.attr('title')==='add right zone')
  54.                         div.addClass('zone zRight');                                                       
  55.                     else if(item.attr('title')==='add central zone')
  56.                         div.addClass('zone zCentral');                             
  57.                        
  58.                     ui.item.after(div);
  59.                     ui.item.remove();      
  60.                     dynamicSortable();                 
  61.                 }      
  62.                 if(typeof(console)!='undefined')                                               
  63.                     console.log(ui);   
  64.             }                  
  65.         });            
  66.        
  67.         $('#zone_title img').draggable(
  68.         {                  
  69.             revert: 'invalid',
  70.             helper: 'clone',
  71.             connectToSortable: '#zone_content'                 
  72.         });
  73.         $('#region_title img').draggable(
  74.         {                  
  75.             revert: 'invalid',
  76.             helper: 'clone',
  77.             connectToSortable: '.zone'                 
  78.         });                                                                                
  79.         $('#finder_content').sortable(
  80.         {
  81.             connectWith: '.region'
  82.         });
  83.         dynamicSortable();                                                             
  84.         });
  85.            
  86.         var dynamicSortable = function()
  87.         {
  88.             $('.zone').sortable(
  89.             {
  90.                 connectWith: '.zone',
  91.                 update: function(event, ui)
  92.                 {
  93.                     var item = ui.item;
  94.                     var node = item.get(0).nodeName.toLowerCase();
  95.                     if(node==='img')
  96.                     {
  97.                         var div = $('<div></div>');
  98.                         if(item.attr('title')==='add col1 region')
  99.                             div.addClass('region rCol1');                              
  100.                         else if(item.attr('title')==='add col2 region')
  101.                             div.addClass('region rCol2');                                                      
  102.                         else if(item.attr('title')==='add col3 region')
  103.                             div.addClass('region rCol3');                              
  104.                            
  105.                         ui.item.after(div);
  106.                         ui.item.remove();      
  107.                         dynamicSortable();                 
  108.                     }      
  109.                     if(typeof(console)!='undefined')                                               
  110.                         console.log(ui);                       
  111.                 }                                      
  112.             });                
  113.             $('.region').sortable(
  114.             {
  115.                 connectWith: '.region, #finder_content'
  116.             });                            
  117.         };     
  118.             //-->                          
  119.         </script>  
  120.         <style type="text/css">
Código CSS:
Ver original
  1. html,body
  2.         {
  3.             margin: 0;
  4.             padding: 0;
  5.             height: 100%;
  6.             width: 100%;
  7.         }
  8.         img
  9.         {
  10.             border: none;
  11.         }
  12.         #hd
  13.         {
  14.         }
  15.         #ft
  16.         {
  17.         }
  18.         #zone_container
  19.         {
  20.             min-height: 100%;
  21.             width: 100%;
  22.             float: left;
  23.             width: 69%;
  24.             height: 100%;
  25.             border: 1px solid #000000;             
  26.         }
  27.         #zone_title
  28.         {
  29.             margin: 5px;
  30.             padding: 5px;
  31.             border: 1px solid #000;            
  32.         }
  33.         #region_title
  34.         {
  35.             margin: 5px;
  36.             padding: 5px;
  37.             border: 1px solid #000;            
  38.         }          
  39.         #zone_content
  40.         {
  41.             border: 1px solid #000;
  42.             margin: 5px;
  43.             padding: 5px;
  44.             min-height: 100%;              
  45.         }
  46.         #finder_container
  47.         {
  48.             float: right;              
  49.             width: 29%;
  50.             height: 100%;
  51.             border: 1px solid #000000;             
  52.         }
  53.         .zone
  54.         {
  55.             background-color: #00ff80;             
  56.             margin: 5px;
  57.             padding: 5px;
  58.             border: 3px solid #088a08;
  59.             min-height: 120px;
  60.         }  
  61.         .zCentral
  62.         {
  63.             width: 100%;
  64.             float: left;
  65.         }      
  66.         .zLeft
  67.         {
  68.             width: 45%;
  69.             float: left;
  70.         }
  71.         .zRight
  72.         {
  73.             width: 45%;
  74.             float: right;              
  75.         }
  76.         .region
  77.         {
  78.             background-color: #01DFD7;
  79.             margin: 5px;
  80.             padding: 10px;             
  81.             border: 2px solid #088A85;
  82.             min-height: 75px;
  83.         }
  84.         .rCol1
  85.         {
  86.             width: 20%;
  87.         }
  88.         .rCol2
  89.         {
  90.             width: 45%;
  91.         }
  92.         .rCol3
  93.         {
  94.             width: 100%;
  95.         }
Código HTML:
Ver original
  1.     </head>
  2.     <body>
  3.     <div id="hd">
  4.  
  5.     </div>
  6.     <div id="zone_container">
  7.         <div id="zone_title">
  8.             <img src="resources/img/zone_left.png" title="add left zone" alt="add left zone" />
  9.             <img src="resources/img/zone_right.png" title="add right zone" alt="add right zone" />
  10.             <img src="resources/img/zone_central.png" title="add central zone" alt="add central zone" />
  11.         </div>
  12.         <div id="region_title">
  13.             <img src="resources/img/region_col1.png" title="add col1 region" alt="add col1 region" />
  14.  
  15.             <img src="resources/img/region_col2.png" title="add col2 region" alt="add col2 region" />
  16.             <img src="resources/img/region_col3.png" title="add col3 region" alt="add col3 region" />
  17.         </div>         
  18.         <div id="zone_content">
  19.             <div class="zone zCentral">
  20.                 <div class="region rCol3">                                             
  21.                 </div>
  22.                 <div class="region rCol2">                                             
  23.                 </div>
  24.                 <div class="region rCol1">                             
  25.                 </div>                                     
  26.             </div>
  27.  
  28.             <div class="zone zLeft">
  29.                 <div class="region rCol3">                             
  30.                 </div>
  31.                 <div class="region rCol2">                                             
  32.                 </div>
  33.                 <div class="region rCol1">                             
  34.                 </div>                 
  35.             </div>
  36.             <div class="zone zRight">
  37.                 <div class="region rCol3">                             
  38.                 </div>
  39.  
  40.                 <div class="region rCol2">                                             
  41.                 </div>
  42.                 <div class="region rCol1">                             
  43.                 </div>                                     
  44.             </div>                                 
  45.         </div>                             
  46.     </div>  
  47.     <div id="finder_container">
  48.     <span>Buscador</span>
  49.     <div id="finder_content">
  50.         <span>destacado01</span>
  51.  
  52.         <span>destacado02</span>
  53.         <span>destacado03</span>
  54.         <span>destacado04</span>
  55.     </div>
  56.     </div>
  57.     <div id="ft">      
  58.     </div>
  59.     </body>
  60.  
  61. </html>
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #2 (permalink)  
Antiguo 24/11/2010, 05:02
 
Fecha de Ingreso: diciembre-2009
Mensajes: 53
Antigüedad: 8 años
Puntos: 4
Respuesta: capas que se me salen

He encontrado una solución que quizás te pueda servir.

El código css quedaría de la siguiente forma.

Código CSS:
Ver original
  1. html,body
  2.         {
  3.             margin: 0;
  4.             padding: 0;
  5.             height: 100%;
  6.             width: 100%;
  7.         }
  8.         img
  9.         {
  10.             border: none;
  11.         }
  12.         #hd
  13.         {
  14.         }
  15.         #ft
  16.         {
  17.         }
  18.         #zone_container
  19.         {
  20.             min-height: 100%;
  21.             width: 100%;
  22.             float: left;
  23.             width: 69%;
  24.             height: auto;
  25.             border: 1px solid #000000;              
  26.         }
  27.         #zone_title
  28.         {
  29.             margin: 5px;
  30.             padding: 5px;
  31.             border: 1px solid #000;            
  32.         }
  33.         #region_title
  34.         {
  35.             margin: 5px;
  36.             padding: 5px;
  37.             border: 1px solid #000;            
  38.         }          
  39.         #zone_content
  40.         {
  41.             border: 1px solid #000;
  42.             margin: 5px;
  43.             padding: 5px;
  44.             min-height: 100%;    
  45.             overflow: hidden;          
  46.         }
  47.         #finder_container
  48.         {
  49.             float: right;              
  50.             width: 29%;
  51.             height: 100%;
  52.             border: 1px solid #000000;              
  53.         }
  54.         .zone
  55.         {
  56.             background-color: #00ff80;              
  57.             margin: 5px;
  58.             padding: 5px;
  59.             border: 3px solid #088a08;
  60.             min-height: 120px;
  61.         }  
  62.         .zCentral
  63.         {
  64.             width: auto;
  65.         }      
  66.         .zLeft
  67.         {
  68.             width: 45%;
  69.             float: left;
  70.         }
  71.         .zRight
  72.         {
  73.             width: 45%;
  74.             float: right;              
  75.         }
  76.         .region
  77.         {
  78.             background-color: #01DFD7;
  79.             margin: 5px;
  80.             padding: 10px;              
  81.             border: 2px solid #088A85;
  82.             min-height: 75px;
  83.         }
  84.         .rCol1
  85.         {
  86.             width: 20%;
  87.         }
  88.         .rCol2
  89.         {
  90.             width: 45%;
  91.         }
  92.         .rCol3
  93.         {
  94.             width: auto;
  95.         }

Únicamente he cambiado en el div.zone_container el height:auto. En el zone_content meterle un overflow: hidden. En zCentral quitarle el float: left y meterle un width: auto. Y finalmente en rCol3 cambiar el width:100% por width:auto.

Espero que te funcione. Pruébalo y nos cuentas!

La mayoría de los errores te venían dados por asignar un width o un height 100% a determinadas capas.
  #3 (permalink)  
Antiguo 24/11/2010, 05:14
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 13 años, 9 meses
Puntos: 62
Respuesta: capas que se me salen

está perfecto, pero tiene un fallo que el min-height con el overflow no funciona, si comento todo lo de #zone_content y lo dejo vacio me queda solo la altura del padding :( pero por lo demá está muy bien gracias

lo puedes ver aquí:

http://zital.no-ip.org/projects/destacados/
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #4 (permalink)  
Antiguo 24/11/2010, 05:33
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 13 años, 9 meses
Puntos: 62
Respuesta: capas que se me salen

Otro fallo que tenía y lo he arreglado:

[
Código CSS:
Ver original
  1. .zCentral
  2.         {
  3.             float: inherit;
  4.             width: auto;
  5.         }
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan

Etiquetas: capas
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 19:09.