Foros del Web » Creando para Internet » CSS »

Problemas con Altura div

Estas en el tema de Problemas con Altura div en el foro de CSS en Foros del Web. Hola, No tengo narices de conseguir lo que quiero. La siguiente imagen muestra el aspecto que debe tener la página web que deseo realizar. Explico. ...
  #1 (permalink)  
Antiguo 28/01/2009, 06:13
 
Fecha de Ingreso: diciembre-2008
Mensajes: 8
Antigüedad: 9 años
Puntos: 0
Problemas con Altura div

Hola,

No tengo narices de conseguir lo que quiero. La siguiente imagen muestra el aspecto que debe tener la página web que deseo realizar.



Explico. Estoy realizando una aplicación web que se ejecutará sobre un popup. Dicho popup debe tener el aspecto de la imagen. El "separador" contendrá un botón que permitirá esconder "columna". Además, el popup debe poder redimensionarse (bien maximizando bien redimensionando manualmente). El problema estriba en que la capa de datos debe quedar por encima todo lo demás, o al menos de la cabecera, para que la pise, pero obviamente a una distancia definida (pixeles de altura de la cabecera y anchura de columna) de los bordes del pupup. En estos momentos en la carga inicial se ve bien, y si redimensiono también, pero no tengo metida la capa de datos, ya que al meterla y poner un top y left definidos, y con una altura y width del 100%, se me genera el scroll, que no quiero que aparezca. además, en caso de añadir datos que sobrepasen la altura de "datos", deseo que se genere un scroll para poder visualizarlo, pero que a su vez la "columna" se alargue.

Había pensado en poner la columna como fondo, pero en ese caso no podría ocultarla. Dejo el código que tengo ahora mismo con el problema del div "datos" para que veais a lo que me refiero.

Os agradecería enormemente si pudierais ayudarme aportando alguna sugerencia de como hacerlo. Así mismo, si algo no ha quedado claro, no duden en preguntar.

Un saludo.

Código:

CSS:

Código:
html, body {
    margin: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height:100%;
}

#header
{
        width:100%;
        background-image:url(../images/2TopFondo.png);
        height:80px;
        position: absolute;
}

#empresa
{
        height:80px;
        width:356px;
        background-image:url(../images/2TopLogoIzq.png);
        position:absolute;
}

#logoCAU
{
        background-image:url(../images/2LogoCentro.png);
        width:480px;
        height:80px;
        float:right;
        background-repeat:no-repeat;
        margin-right: 20px
}

#info
{
    width: 100%;
    height: 18px;
    background-color: black;
    position:absolute;
    top: 80px;
}

#bannerfondo
{
    position: absolute;
    top: 98px;
    width: 100%;
    height: 49px;
    background-image: url("../images/2header.png");
}

#info_izq
{
    position: absolute;
    visibility: visible;
    width: 166px;
    height: 100%;
    background-image: url("../images/2FondoLateralIzq.png");
    background-repeat: repeat-y;
}

#vertical_tab
{
    position:absolute;
    width: 7px;
    left:166px;
    height: 100%;
    background-image: url("../images/2FondoSep.gif");
    background-repeat: repeat-y;
}

#tab_buttom
{
    margin-top: 300px;
}

#datos
{
    position: absolute;
    top: 148px;
    left: 173px;
    background-color: yellow;
    height: 100%;
    width: 100%;
}

#menu
{
    position:absolute;
    top: 128px;
    left: 173px;
    background-color: green;
    height: 20px;
    width: 100%;
}
HTML:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <LINK href="css/estilo.css" type="text/css" rel="stylesheet">
        <title>..::[email protected]::..</title>
        <script language="javascript" src="js/generalfunctions.js"></script>
    </head>
    <body onload="centrar(); window.opener.close()">

            <div id="info_izq"></div>
            <div id="vertical_tab">
                <div id="tab_buttom"><img style="cursor: pointer" id="boton_vertical_tab" name="boton_vertical_tab" src="images/2FlechaIzq.gif" border="0" onmouseover="cambiar_over()" onmouseout="cambiar_out()" onclick="cerrar(); "></div>
            </div>
            <div id="header">
                    <div id="empresa"></div>
                    <div id="logoCAU"></div>
            </div>
            <div id="info"></div>
            <div id="bannerfondo"></div>
            <div id="menu"></div>
            <div id="datos"></div>
    </body>
</html>
Os dejo un enlace para que veais exactamente el problema.

www.deasis.es/prueba
  #2 (permalink)  
Antiguo 28/01/2009, 06:45
Avatar de Phoncadiz  
Fecha de Ingreso: mayo-2004
Ubicación: Cádiz City
Mensajes: 232
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: Problemas con Altura div

Vaya... yo tengo el mismo problema.
¿Alguien nos puede ayudar?
__________________
Tantas horas delante de una pantalla servirá para algo....
[Phoncadiz; mínimo 8 h. al día con el PC] :stress:
  #3 (permalink)  
Antiguo 28/01/2009, 07:19
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problemas con Altura div

tengo una duda, la verdad es que no entendí bien(estoy algo lento hoy), lo que no puedes lograr es la estructura que muestras en la imagen?
__________________
WFC
codigo82
  #4 (permalink)  
Antiguo 28/01/2009, 07:35
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problemas con Altura div

bueno si es eso para que se vea así tendrías que hacerlo de esta manera, copia y pega el código en un nuevo archivo para que aprecies el efecto de las capas y prueba a 800x600 o hacer la ventana más chica manualmente

Código lenguaje:
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=iso-8859-1" />
  5. <title>Documento sin t&iacute;tulo</title>
  6. <style type="text/css">
  7. body{ height:100%;}
  8. #contenedor{ width:100%; height:100%;background:#000}
  9. #cabecera{width:100%;background:#000;height:80px;}
  10. #contenido{ width:98%; height:auto; background:#000; position:relative; display:table; padding:0 0 10px 0;margin:0 auto}
  11. #info_izq{visibility: visible;width: 166px;height:500px;background:#6DE4D9; float:left;}
  12. #vertical_tab{width: 7px;left:166px; height: 500px;background:#999; float:left;}
  13. #datos{position: absolute;top:-40px;left: 173px; background-color: yellow; height: 540px;width: auto;}
  14. .limpiar{ clear:both}
  15. </style>
  16. </head>
  17.  
  18. <body>
  19. <div id="contenedor">
  20.     <div id="cabecera"></div>
  21.     <div id="contenido">
  22.         <div id="info_izq"></div>
  23.         <div id="vertical_tab"></div>
  24.         <div id="datos">texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </div>
  25.         <div class="limpiar"></div>
  26.     </div> 
  27. </div>
  28. </body>
  29. </html>

y un consejo, no es necesario que lo hagas con position:absolute eso puede traerte problemas el algunos navegadores por la forma en que interpretan las posiciones como top y left, tienes que saber como y cuando aplicarlos y tampoco debes aplicarlos si el div que los contiene no es relativo por que al no serlo quedarán relativos a la ventana del navegador y eso te puede traer conflictos

espero te sirva y avisas si no es eso lo que quieres para que veamos
__________________
WFC
codigo82
  #5 (permalink)  
Antiguo 28/01/2009, 09:33
 
Fecha de Ingreso: diciembre-2008
Mensajes: 8
Antigüedad: 9 años
Puntos: 0
Respuesta: Problemas con Altura div

Hola, muchas gracias por tu rápida respuesta y consejos ^^

No es eso lo que intento hacer. Intento que la capa que se redimensione sea la de datos y la columna, manteniendo fija el resto. Es decir, que al maximizar o cambiar tamaños, sea la capa amarilla la que se expanda en horizontal y tanto columna como datos verticalmente.

En el ejemplo que me has puesto al redimensionar se cubre todo del fondo de la capa contenedor, pero eso no me serviría. Has puesto como altura de la columna un número de pixels, pero intento que no sea así, ya que al redimensionar o meter mas texto en "datos" debe aumentar la altura de columna.
  #6 (permalink)  
Antiguo 28/01/2009, 09:36
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problemas con Altura div

la verdad no se que pasa hoy pero no termino de entender, puse medidas fijas solo para motivo de ejemplo, dejame analizarlo un poco y te comento
PD: Bienvenido a FDW
__________________
WFC
codigo82

Última edición por willyfc; 28/01/2009 a las 09:44
  #7 (permalink)  
Antiguo 28/01/2009, 12:29
 
Fecha de Ingreso: diciembre-2008
Mensajes: 8
Antigüedad: 9 años
Puntos: 0
Respuesta: Problemas con Altura div

Muchas gracias por la bienvenida y por el interés qeu te estas tomando, te lo agradezco muchísimo.

El problema es que si por ejemplo, tenemos una página con resolucion de 1024x768, al meter un div con top 150px, me genera un scroll vertical, ya que le suma esos 150px al 100% de la pagina (768 mas o menos, hay que quitarle el espacio de los menus del navegador) fijate que en el ejemplo que he puesto, en el enlace, se ha generado un scroll tanto vertical como horizontal, que es exactamente igual al desplazamiento producido por los top y left correspondientes a dicho div.
  #8 (permalink)  
Antiguo 28/01/2009, 12:43
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problemas con Altura div

esto

Código HTML:
window.open.close();
no deja que tu web abra y no puedo ver como esta, si tienes firebug o web developer en firefox podrás ver el error
__________________
WFC
codigo82
  #9 (permalink)  
Antiguo 28/01/2009, 13:25
 
Fecha de Ingreso: diciembre-2008
Mensajes: 8
Antigüedad: 9 años
Puntos: 0
Respuesta: Problemas con Altura div

Eliminado, de todas formas...debería abrirte el popup y preguntarte si deseas cerrar la ventana, o al menos eso es lo que me dice a mi...con explorer, con firefox no me dice nada, y me la mantiene abierta.

Si sigues sin poder verla, avisa.

Un saludo y reitero mis agradecimientos !! ^^
  #10 (permalink)  
Antiguo 29/01/2009, 07:25
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problemas con Altura div

bueno entonces lo que tu quieres es que nunca aparezca el scroll horizontal y sin importar que resolucion tu usuario este utilizando?
__________________
WFC
codigo82
  #11 (permalink)  
Antiguo 29/01/2009, 07:31
 
Fecha de Ingreso: diciembre-2008
Mensajes: 8
Antigüedad: 9 años
Puntos: 0
Respuesta: Problemas con Altura div

Siempre que el usuario este usando una resoución mayor o igual de 1024x768. Si fuese menor, debería aparecer scroll, eso está claro...jeje

Resumo: Cabecera: fijo.
Columna: fijo en anchura, variable en altura
Datos: variable tanto en altura como en anchura. Si datos incrementa
verticalmente y supera el alto del popup, deberá producirse un
scroll vertical y la columna deberá ampliarse para ocupar el nuevo
alto.
Si el popup se maximiza, datos debe ocupar el nuevo dejando fijas
la cabecera y la columna.
  #12 (permalink)  
Antiguo 29/01/2009, 07:50
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problemas con Altura div

entonces coloca los altos en auto, si estoy entediendo bien yo tengo una resolución de 1024 y ahora la estoy viendo a 800x600 y no aparecen a no ser que el contenido crezca, miralo y me comentas:

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=iso-8859-1" />
  5. <title>Documento sin t&iacute;tulo</title>
  6. <style type="text/css">
  7. body{ font-size:1em}
  8. #contenedor{ width:100%; height:100%;}
  9. #cabecera{width:100%;background:#666;height:80px;}
  10. #contenido{ width:100%; height:auto; background:#000; position:relative; display:table; padding:0 0 10px 0;margin:0 auto}
  11. #info_izq{visibility: visible;width: 22%;height:auto;background:#6DE4D9; float:left;}
  12. #vertical_tab{width: 7px;left:166px; height: 250px; min-height:auto!important; height:250px;background:#CC0000; float:left;}
  13. #menu{ width:100%; height:25px; background:#003300; position:absolute; top:-25px;}
  14. #datos{position:relative; background-color: yellow; height:auto;width:77%; float: left}
  15. .texto{ padding:10px}
  16. .limpiar{ clear:both}
  17. </style>
  18. </head>
  19.  
  20. <body>
  21. <div id="contenedor">
  22.     <div id="cabecera"></div>
  23.     <div id="contenido">
  24.         <div id="info_izq">texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </div>
  25.         <div id="vertical_tab"><img name="" src="" width="7" height="15" alt="" style="background-color: #33CC00; margin-top:150px" /></div>
  26.         <div id="datos">
  27.             <div id="menu"></div>
  28.             <div class="texto">texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</div> </div>
  29.         <div class="limpiar"></div>
  30.     </div> 
  31. </div>
  32. </body>
  33. </html>
__________________
WFC
codigo82
  #13 (permalink)  
Antiguo 29/01/2009, 10:02
 
Fecha de Ingreso: diciembre-2008
Mensajes: 8
Antigüedad: 9 años
Puntos: 0
Respuesta: Problemas con Altura div

no exactamente, pero casi. jeje.

Verás, has puesto la columna como un porcentaje, de modo que si amplias o reduces, ésta también crece o disminuye. La columna debe tener una anchura fija. Por otra parte, la página deberá poder verse en resoluciones mayores sin que se vean huecos en blanco...creo que es mas complicado de describir de lo que pensaba! xDDDD

No hay forma de mezclar un width con porcentajes y pixeles tipo 100%-150px?? esa sería la solución perfecta! xDD
  #14 (permalink)  
Antiguo 29/01/2009, 10:12
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problemas con Altura div

cambia estas dos linea y me avisas(solo esas 2 lineas):

Código:
#info_izq{visibility: visible;width:200px;height:auto;background:#6DE4D9; float:left;}
#datos{position:relative; background-color: yellow; height:100%; overflow:hidden}
me avisas como te va
__________________
WFC
codigo82
  #15 (permalink)  
Antiguo 29/01/2009, 10:25
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problemas con Altura div

y si no estoy mal quedaría así:

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=iso-8859-1" />
  5. <title>Documento sin t&iacute;tulo</title>
  6. <style type="text/css">
  7. body{ font-size:1em}
  8. #contenedor{ width:100%; height:100%;}
  9. #cabecera{width:100%;background:#666;height:80px; position:relative}
  10. #contenido{ width:100%; height:auto; background:#000; position:relative; display:table; padding:0 0 10px 0;margin:0 auto}
  11. #info_izq{visibility: visible;width:200px;height:auto;background:#6DE4D9; float:left;}
  12. #vertical_tab{width: 7px;left:166px; height: 250px; min-height:auto!important; height:250px;background:#CC0000; float:left;}
  13. #menu{ width:100%; height:25px; position:relative; top:55px; right:0;text-align:right;}
  14. .menu{ width:80%; height:25px; background:#003300; float:right}
  15. #datos{background-color: yellow; height:100%; overflow:hidden}
  16. .texto{ padding:10px}
  17. .limpiar{ clear:both}
  18. </style>
  19. </head>
  20.  
  21. <body>
  22. <div id="contenedor">
  23.     <div id="cabecera">
  24.         <div id="menu">
  25.             <div class="menu"></div>
  26.         </div>
  27.     </div>
  28.     <div id="contenido">
  29.         <div id="info_izq">texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </div>
  30.         <div id="vertical_tab"><img name="" src="" width="7" height="15" alt="" style="background-color: #33CC00; margin-top:150px" /></div>
  31.         <div id="datos">
  32.            
  33.             <div class="texto">texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</div> </div>
  34.         <div class="limpiar"></div>
  35.     </div> 
  36. </div>
  37. </body>
  38. </html>

comentame como te va
__________________
WFC
codigo82
  #16 (permalink)  
Antiguo 29/01/2009, 14:17
 
Fecha de Ingreso: diciembre-2008
Mensajes: 8
Antigüedad: 9 años
Puntos: 0
Respuesta: Problemas con Altura div

Perfecto lo de datos!! Wow!! xDD overflow: hidden no? hmmm perfect! muchísimas gracias!!
ahora, y si me permites seguir abusando de tu sapiencia...para conseguir que la columna llegue siempre hasta el 100% de altura sin producir scroll...podría usar lo mismo, no? y que si datos incrementa y produce scroll vertical...que columna tenga la misma altura de datos...me comprendes?? ^^ pero creo que sería jugar con los hidden, no?

Muchas gracias!!!
  #17 (permalink)  
Antiguo 29/01/2009, 14:37
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problemas con Altura div

para que se repitan o queden de la misma altura o que al menos aparente eso yo lo hago de esta manera

y para lo otro fijate si puedes adaptarlo con este ejemplo de Mike(mira el codigo fuente).
__________________
WFC
codigo82
  #18 (permalink)  
Antiguo 29/01/2009, 15:05
 
Fecha de Ingreso: diciembre-2008
Mensajes: 8
Antigüedad: 9 años
Puntos: 0
Respuesta: Problemas con Altura div

Pues muchas gracias! me salvas la vida!! jeje cuando lo tenga listo te aviso para que veas el resultado final.

Millones de gracias.

PD: Hay que editar el asunto y poner Solucionado o algo?
  #19 (permalink)  
Antiguo 29/01/2009, 15:10
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problemas con Altura div

pues de nada, espero que todo te salga bien a ver y me avisas como te va y cualquier cosa posteas que aqui todos estamos para ayudar y lo del tema no te preocupes se queda así
__________________
WFC
codigo82
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 13:35.