Foros del Web » Creando para Internet » CSS »

Llenar espacio horizontal con una div de tamaño fijo y una variable

Estas en el tema de Llenar espacio horizontal con una div de tamaño fijo y una variable en el foro de CSS en Foros del Web. Hola, como dice el títuo tengo en mi encabezado el logo dentro de una div flotado a la izquierda y quiero poner a la derecha ...
  #1 (permalink)  
Antiguo 02/08/2011, 16:36
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 107
Antigüedad: 6 años, 5 meses
Puntos: 3
Llenar espacio horizontal con una div de tamaño fijo y una variable

Hola, como dice el títuo tengo en mi encabezado el logo dentro de una div flotado a la izquierda y quiero poner a la derecha del logo otra sección, que ocupe el resto del espacio que queda libre en sentido horizontal.

Pude resolverlo para ff y chrome de la siguiente manera, pero en ie no funca.

Código HTML:
Ver original
  1. <div id="encabezado">
  2.         <div id="logo">
  3.             <img src="template/img/lOGO.gif" width="224px" height="152px" >
  4.         </div>
  5.            
  6.              <div id="head2">
  7.                 <div id="destacado1">
  8.    
  9.                 </div>  
  10.                
  11.                 <div class="separador"></div>  
  12.                
  13.                 <div id="Buscador">
  14.    
  15.                 </div>
  16.                 <div class="separador"></div>
  17.                 <div id="destacado2">
  18.    
  19.                 </div>
  20.             </div>
  21.    
  22.     </div>

Las dos div de las que hablo anteriormente son logo y head2. Luego head dos tiene contenido en 3 divs

Código CSS:
Ver original
  1. #contenedor{
  2.     text-align:left;
  3.     width:90%;
  4.     height:900px;
  5.    
  6.  
  7.  
  8. }
  9.  
  10. #encabezado{
  11.     height:160px;
  12.     width:100%;
  13.  
  14. }
  15.  
  16. #logo{
  17.     float:left;
  18.     margin-left:0px;
  19.     margin-right:0px;
  20.     background-color:#FFF;
  21.    
  22. }
  23.  
  24. #head2{
  25.     margin-top:10px;
  26.     width:100%;
  27.     height:109px;
  28. }
  29. .separador{
  30.     background-color:transparent;
  31.     height:2px;
  32. }
  33. #destacado1{
  34.     width:100%;
  35.     height:37px;
  36.     background-color:#f99d02;
  37. }
  38.  
  39. #Buscador{
  40.     width:100%;
  41.     height:44px;
  42.     background-color:#cacace;
  43. }
  44.  
  45. #destacado2{
  46.     width:100%;
  47.     height:24px;
  48.     background-image:url(../img/back_destacado2.jpg);
  49.    
  50. }


Desde ya muchas gracias por su tiempo.
  #2 (permalink)  
Antiguo 02/08/2011, 18:58
Avatar de andresdzphp
Colaborador
 
Fecha de Ingreso: julio-2011
Ubicación: $this->Colombia;
Mensajes: 2.749
Antigüedad: 5 años, 6 meses
Puntos: 793
Respuesta: Llenar espacio horizontal con una div de tamaño fijo y una variable

Lo que pasa es que Internet Explorer no es adivino y necesita de un DOCTYPE. Así funciona perfectamente en IE 9.

Código CSS:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>Documento sin título</title>
  6.  
  7. <style type="text/css">
  8.  
  9.     #contenedor{
  10.         text-align:left;
  11.         width:90%;
  12.         height:900px;
  13.     }
  14.  
  15.     #encabezado{
  16.         height:160px;
  17.         width:100%;
  18.  
  19.     }
  20.  
  21.     #logo{
  22.         float:left;
  23.         margin-left:0px;
  24.         margin-right:0px;
  25.         background-color:#FFF;
  26.  
  27.     }
  28.  
  29.     #head2{
  30.         margin-top:10px;
  31.         width:100%;
  32.         height:109px;
  33.     }
  34.     .separador{
  35.         background-color:transparent;
  36.         height:2px;
  37.     }
  38.     #destacado1{
  39.         width:100%;
  40.         height:37px;
  41.         background-color:#f99d02;
  42.     }
  43.  
  44.     #Buscador{
  45.         width:100%;
  46.         height:44px;
  47.         background-color:#cacace;
  48.     }
  49.  
  50.     #destacado2{
  51.         width:100%;
  52.         height:24px;
  53.         background-image:url(../img/back_destacado2.jpg);
  54.  
  55.     }
  56.  
  57. </style>
  58.  
  59. </head>
  60. <body>
  61. <div id="encabezado">
  62.     <div id="logo">
  63.         <img src="template/img/lOGO.gif" width="224px" height="152px" >
  64.     </div>
  65.  
  66.     <div id="head2">
  67.         <div id="destacado1">
  68.  
  69.         </div>  
  70.  
  71.         <div class="separador"></div>  
  72.  
  73.         <div id="Buscador">
  74.  
  75.         </div>
  76.         <div class="separador"></div>
  77.         <div id="destacado2">
  78.  
  79.         </div>
  80.     </div>
  81.  
  82. </div>
  83.    
  84.    
  85. </body>
  86. </html>
__________________
Si sabemos como leer e interpretar el manual será mucho más fácil aprender PHP. En lugar de confiar en ejemplos o copiar y pegar - PHP
  #3 (permalink)  
Antiguo 02/08/2011, 21:07
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 107
Antigüedad: 6 años, 5 meses
Puntos: 3
Respuesta: Llenar espacio horizontal con una div de tamaño fijo y una variable

Ya había puesto el DOCTYPE no lo puse aquí en el ejemplo.

El codigo completo es
Código HTML:
Ver original
  1. <?php
  2. include_once("includes.php");
  3. $configSite= new SiteConfig();
  4.  
  5.  
  6. ?>
  7. <!DOCTYPE html>
  8. <!--[if lt IE 7 ]><html lang='es' class='ie6'><![endif]-->
  9. <!--[if IE 7 ]> <html lang='es' class='ie7'> <![endif]-->
  10. <!--[if IE 8 ]> <html lang='es' class='ie8'> <![endif]-->
  11. <!--[if IE 9 ]> <html lang='es' class='ie9'> <![endif]-->
  12. <!--[if (gt IE 9)|!(IE)]> <!--> <html lang='es'><!--<![endif]-->
  13.  
  14. <!--head---------------------------------------------------------------------------------------------------------------->
  15.  
  16.  
  17.     <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
  18.     <title><?php $configSite->NombreSitio ?></title>
  19.     <meta name='description' content='<?php $configSite->Descripcion ?>'>
  20.  
  21.  
  22.    
  23.     <link href='template/css/template.css' type='text/css' rel='stylesheet' />
  24.    
  25.    
  26.        
  27. </head>
  28.    
  29.  <!--body-------------------------------------------------------------------------------------------------------------- -->
  30.  
  31. <table width="100%"  align="center">
  32. <tr> <td align="center">
  33. <div id="contenedor">
  34.  
  35.     <div id="encabezado">
  36.         <div id="logo">
  37.             <img src="template/img/lOGO.gif" width="224px" height="152px" >
  38.         </div>
  39.            
  40.              <div id="head2">
  41.                 <div id="destacado1">
  42.    
  43.                 </div>  
  44.                
  45.                 <div class="separador"></div>  
  46.                
  47.                 <div id="Buscador">
  48.    
  49.                 </div>
  50.                 <div class="separador"></div>
  51.                 <div id="destacado2">
  52.    
  53.                 </div>
  54.             </div>
  55.    
  56.     </div>
  57. </div>
  58.    
  59.    
  60.  
  61.  
  62.  
  63.  
  64. </td></tr></table>
  65. </body>
  66.  
  67. </html>

No funciona en ie8 o inferior... si funciona en chrome y firefox.

Estoy tratando de empezar a maquetar en css. Como podrán ver en el código ya tuve que usar una tabla para centrar el contendido de la pagina. Quiero que mi web se vea en la mayor cantidad de versiones de ie posible ademas de FF y chrome. Les parece correcto maquetar con css o en mi caso será mejor volver a usar tablas?
  #4 (permalink)  
Antiguo 02/08/2011, 21:39
Avatar de andresdzphp
Colaborador
 
Fecha de Ingreso: julio-2011
Ubicación: $this->Colombia;
Mensajes: 2.749
Antigüedad: 5 años, 6 meses
Puntos: 793
Respuesta: Llenar espacio horizontal con una div de tamaño fijo y una variable

Cita:
Iniciado por francap Ver Mensaje
Estoy tratando de empezar a maquetar en css. Como podrán ver en el código ya tuve que usar una tabla para centrar el contendido de la pagina. Quiero que mi web se vea en la mayor cantidad de versiones de ie posible ademas de FF y chrome. Les parece correcto maquetar con css o en mi caso será mejor volver a usar tablas?
Ya no se usan las tablas para maquetar diseños. Probando con BrowserLab funciona en IE 8 y 9 pero no en 6 y 7. Si consigo algo te aviso. Funciona con todos los Chrome Firefox y Safari
  #5 (permalink)  
Antiguo 03/08/2011, 05:27
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 107
Antigüedad: 6 años, 5 meses
Puntos: 3
Respuesta: Llenar espacio horizontal con una div de tamaño fijo y una variable

Te agradezco tu tiempo Andrés. Seguramente sea por mi inexperiencia... pero lo veo un poco más complicado que usar tablas, en las cosas más finas.
  #6 (permalink)  
Antiguo 03/08/2011, 09:57
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 107
Antigüedad: 6 años, 5 meses
Puntos: 3
Respuesta: Llenar espacio horizontal con una div de tamaño fijo y una variable

Bueno al final lo resolví usando tamaño fijo en width para ie7 y tamaño fijo y posición absoluta para ie6. No se si es lo mejor pero después de romperme un rato largo la cabeza y leer algunos tutoriales, fue lo mejor que pude hacer.

También de casualidad me encontré con la forma de eliminar la tabla que había usado para centrar el contenido de la página.

Dejo los códigos por si ayudan a alguien:
Código HTML:
Ver original
  1. <?php
  2. include_once("includes.php");
  3. $configSite= new SiteConfig();
  4.  
  5.  
  6. ?>
  7. <!DOCTYPE html>
  8. <!--[if lt IE 7 ]><html lang='es' class='ie6'><![endif]-->
  9. <!--[if IE 7 ]> <html lang='es' class='ie7'> <![endif]-->
  10. <!--[if IE 8 ]> <html lang='es' class='ie8'> <![endif]-->
  11. <!--[if IE 9 ]> <html lang='es' class='ie9'> <![endif]-->
  12. <!--[if (gt IE 9)|!(IE)]> <!--> <html lang='es'><!--<![endif]-->
  13.  
  14. <!--head---------------------------------------------------------------------------------------------------------------->
  15.  
  16.  
  17.     <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
  18.     <title><?php $configSite->NombreSitio ?></title>
  19.     <meta name='description' content='<?php $configSite->Descripcion ?>'>
  20.  
  21.  
  22.  
  23.  
  24.    
  25.     <link href='template/css/template.css' type='text/css' rel='stylesheet' />
  26.    
  27.    
  28.        
  29. </head>
  30.    
  31.  <!--body-------------------------------------------------------------------------------------------------------------- -->
  32.  
  33.  
  34. <div id="contenedor">
  35.  
  36.     <div id="encabezado">
  37.         <div id="logo">
  38.             <img src="template/img/lOGO.gif" width="224px" height="152px" >
  39.         </div>
  40.            
  41.              <div id="head2">
  42.                 <div id="destacado1">
  43.     1234567890'qwertyuiopasdfghjklñzxcvbnm,.
  44.                 </div>  
  45.                
  46.          
  47.                
  48.                 <div id="Buscador">
  49.    
  50.                 </div>
  51.            
  52.                 <div id="destacado2">
  53.    
  54.                 </div>
  55.             </div>
  56.    
  57.     </div>
  58. </div>
  59.    
  60.    
  61.  
  62.  
  63.  
  64.  
  65.    
  66. </body>
  67.  
  68. </html>


y el css
Código CSS:
Ver original
  1. /*div{
  2.     border-color:#000;
  3.     border-style:dashed;
  4.     border-left-width:1px;
  5.     }*/
  6.  
  7.  
  8.  
  9.  
  10.  
  11. #contenedor{
  12.     margin: 0 auto;
  13.     text-align:left;
  14.     width:90%;
  15.     height:900px;
  16. }
  17.  
  18. .ie6 , .ie7 #contenedor{
  19.     width:900px;   
  20. }
  21.  
  22. #encabezado{
  23.    
  24.     height:160px;
  25.     width:100%;
  26.  
  27. }
  28.  
  29. #logo{
  30.     float:left;
  31.     margin-left:0px;
  32.     margin-right:0px;
  33.     background-color:#FFF;
  34. }
  35.  
  36. #head2{
  37.     width:100%;
  38. }
  39.  
  40.  .ie7 #head2{
  41.     width:676px;
  42.  
  43. }
  44.  
  45.  .ie6 #head2{
  46.     width:650px;
  47.     position:absolute;
  48.     left:285px;
  49.     top:35px;
  50.    
  51. }
  52.  
  53.  
  54.  
  55.  
  56. #destacado1{
  57.     width:100%;
  58.     height:37px;
  59.     background-color:#f99d02;
  60.     margin-bottom:3px;
  61. }
  62.  
  63. #Buscador{
  64.     width:100%;
  65.     height:44px;
  66.     background-color:#cacace;
  67. }
  68.  
  69. #destacado2{
  70.     margin-top:3px;
  71.     width:100%;
  72.     height:24px;
  73.     background-image:url(../img/back_destacado2.jpg);
  74.    
  75. }


Encontré tambien que se puede usar para cenrar:
display:tabla en el contenedor y display:cell en el contenido para poder usar el atributo align y centrar así cuando se complica.. Es una buena práctica o sigo buscando?

Gracias

Etiquetas: chrome, contenido, espacio, fijo, horizontal, llenar, tamaño, fondo
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 17:10.