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: 21 años, 7 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. </style>
  2.     </head>
  3.     <body>
  4.     <div id="hd">
  5.  
  6.     </div>
  7.     <div id="zone_container">
  8.         <div id="zone_title">
  9.             <img src="resources/img/zone_left.png" title="add left zone" alt="add left zone" />
  10.             <img src="resources/img/zone_right.png" title="add right zone" alt="add right zone" />
  11.             <img src="resources/img/zone_central.png" title="add central zone" alt="add central zone" />
  12.         </div>
  13.         <div id="region_title">
  14.             <img src="resources/img/region_col1.png" title="add col1 region" alt="add col1 region" />
  15.  
  16.             <img src="resources/img/region_col2.png" title="add col2 region" alt="add col2 region" />
  17.             <img src="resources/img/region_col3.png" title="add col3 region" alt="add col3 region" />
  18.         </div>          
  19.         <div id="zone_content">
  20.             <div class="zone zCentral">
  21.                 <div class="region rCol3">                                              
  22.                 </div>
  23.                 <div class="region rCol2">                                              
  24.                 </div>
  25.                 <div class="region rCol1">                              
  26.                 </div>                                      
  27.             </div>
  28.  
  29.             <div class="zone zLeft">
  30.                 <div class="region rCol3">                              
  31.                 </div>
  32.                 <div class="region rCol2">                                              
  33.                 </div>
  34.                 <div class="region rCol1">                              
  35.                 </div>                  
  36.             </div>
  37.             <div class="zone zRight">
  38.                 <div class="region rCol3">                              
  39.                 </div>
  40.  
  41.                 <div class="region rCol2">                                              
  42.                 </div>
  43.                 <div class="region rCol1">                              
  44.                 </div>                                      
  45.             </div>                                  
  46.         </div>                              
  47.     </div>  
  48.     <div id="finder_container">
  49.     <span>Buscador</span>
  50.     <div id="finder_content">
  51.         <span>destacado01</span>
  52.  
  53.         <span>destacado02</span>
  54.         <span>destacado03</span>
  55.         <span>destacado04</span>
  56.     </div>
  57.     </div>
  58.     <div id="ft">       
  59.     </div>
  60.     </body>
  61.  
  62. </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: 15 años, 9 meses
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: 21 años, 7 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: 21 años, 7 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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 23:28.