Foros del Web » Creando para Internet » CSS »

Eternas capas: Problema con HEIGHT

Estas en el tema de Eternas capas: Problema con HEIGHT en el foro de CSS en Foros del Web. Interminable problema de capas con CSS. como veran a continuacion este sitio esta armado en capas. Mi problema es que cuando la variable $titulo supera ...
  #1 (permalink)  
Antiguo 28/07/2010, 08:55
 
Fecha de Ingreso: mayo-2005
Mensajes: 42
Antigüedad: 12 años, 6 meses
Puntos: 0
Eternas capas: Problema con HEIGHT

Interminable problema de capas con CSS. como veran a continuacion este sitio esta armado en capas.

Mi problema es que cuando la variable $titulo supera el alto minimo (min-height) el texto se queda sin el fondo de la capa que lo contiene. En este caso la capa BOTHSIDE que esta contenida por la capa LEFTSIDE que a su vez esta contenida por la capa PRINCIPAL.

Probe de ponerle tanto a la LEFTSIDE como a la capa BOTHSIDE como a la capa PRINCIAPAL distintos casos de HEIGHT.... Height: 100%/1100px/auto. Pero no tengo resultados.

Tambien probre el Overflow, pero tampoco...

POR FAVOR, AYUDAAAAAA!!!!




#header{ position:relative; width:1000px; height: 75px; margin:auto; padding:15px; border:1px solid #CCCCCC;background-color:#FFFFFF; }

#menu{ position:relative; width:1000px; height:25px; margin:auto; padding-left:15px; padding-right:15px; border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC; background-color:#FFFFFF; background-image: url(../img/fondomenu.jpg)}

#principal{ position:relative; width:1000px; min-height: 1100px; height:100%; margin:auto; padding:15px; border:1px solid #CCCCCC;background-color:#FFFFFF}

#leftside{ position:relative; float:left; width:700px; height:100%; z-index:100; margin:auto; }
#izquierda{ position:relative; float:left; width:350px; z-index:100; margin:auto; border-right:1px solid #CCC }
#derecha{ position:relative; float:left; width:340px; z-index:100; margin:auto; }
#bothside{ position:relative; float:left; width:690px; z-index:100; margin:auto }

#rightside{ position:relative; float:left; width:295px; z-index:100; margin:auto; border-left:1px solid #CCCCCC;}


<body>
<div id="header"><?php include("includes/header.inc"); ?></div>
<div id="menu"><?php include("includes/menu.inc"); ?></div>

<div id="principal">
<div id="leftside">
<div id="bothside" align="center">
<table width='95%' height='100%' cellpadding='5px' cellspacing='0'>
<tr>
<td align='left' colspan='2'>
<span class='txttitulo'>$titulo</span>
</td>
<tr>
</table>
</div>
</div>
<div id="rightside"><?php include("includes/rightside.inc"); ?></div>
</div>
</body>
</html>


  #2 (permalink)  
Antiguo 29/07/2010, 04:51
Avatar de emal011  
Fecha de Ingreso: julio-2004
Ubicación: Munich
Mensajes: 211
Antigüedad: 13 años, 5 meses
Puntos: 2
Respuesta: Eternas capas: Problema con HEIGHT

en realidad nose cual es problema, ya que no puedo ver el fallo en si. si pusieras la web seria mejor, pero bueno...

si lo que quieres es que el height vaya automaticamnte 100%, intenta esto:

height: 100%;
height: auto !important;
min-height: ***px;/*este es adicional, por si tienes un minimo en pixeles*/
__________________
El graduado en Ciencias pregunta "¿Por qué funciona?"
El graduado en Ingenieria pregunta "¿Cómo funciona?"
El graduado en Artes Liberales pregunta "¿Quiere papas fritas con eso?"
  #3 (permalink)  
Antiguo 01/08/2010, 09:39
 
Fecha de Ingreso: mayo-2005
Mensajes: 42
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Eternas capas: Problema con HEIGHT

He probado ambas cosas con los Height, y nada...

Aca dejo todo el codigo de la pagina. Con un copy+paste

AGREGA MAS "bla bla" y veras como la capa comienza a irse de las otras

Muchas gracias




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>

<style>
#header{ position:relative; width:1000px; height: 75px; margin:auto; padding:15px; border:1px solid #CCCCCC;background-color:#FFFFFF; }
#menu{ position:relative; width:1000px; height:25px; margin:auto; padding-left:15px; padding-right:15px; border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC; background-color:#FFFFFF; background-image: url(../img/fondomenu.jpg)}

#principal{ position:relative; width:1000px; min-height: 1100px; height:100%; height:auto; margin:auto; padding:15px; border:1px solid #CCCCCC;background-color:#DDDDDD}
#leftside{ position:relative; float:left; width:700px; height:100%; margin:auto; background-color: #990000}
#bothside{ position:relative; width:90%; height:100%; margin:auto; background-color:#777777 }
#rightside{ position:relative; float:right; width:295px; height:100%; margin:auto; border-left:1px solid; background-color:#ffffff }

</style>
</head>

<body>
<div id="header">ESTO ES EL HEADER</div>
<div id="menu">ESTO ES EL MENU</div>
<div id="principal"> capa principal<br />

<div id="leftside">
<div id="bothside" align="center">
ESTA ES LA CAPA "bothside"<br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla

</div>
</div>
<div id="rightside">ESTE ES EL LADO DERECHO</div>
</div>

</body>
</html>
  #4 (permalink)  
Antiguo 01/08/2010, 09:52
 
Fecha de Ingreso: mayo-2005
Mensajes: 42
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Eternas capas: Problema con HEIGHT

Bien:

Lo solucione poniendo un display: inline-block a la capa principal.

El problema ahora es que me queda todo alineado a la izquierda. Pierde la alineacion al centro.
  #5 (permalink)  
Antiguo 01/08/2010, 09:52
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: Eternas capas: Problema con HEIGHT

Hola:

He probado tu código y no veo nada raro. Si duplico los bla bla, el contenedor crece. ¿Cuál es el problema? ¿Qué es lo que quieres hacer?

Saludos.

  #6 (permalink)  
Antiguo 01/08/2010, 10:06
 
Fecha de Ingreso: mayo-2005
Mensajes: 42
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Eternas capas: Problema con HEIGHT

si agregas muchos bla bla's... pero muchos, veras como la capa ROJA Y GRIS SE SALEN DE LA CAPA PRINCIPAL...
  #7 (permalink)  
Antiguo 01/08/2010, 10:10
 
Fecha de Ingreso: mayo-2005
Mensajes: 42
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Eternas capas: Problema con HEIGHT

Aqui te dejo las 2 opciones:

http://www.santiagoamy.com/test.html

http://www.santiagoamy.com/test2.html
  #8 (permalink)  
Antiguo 01/08/2010, 11: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: Eternas capas: Problema con HEIGHT

Hola:

Añádele al div #principal overflow: auto;

Saludos.

  #9 (permalink)  
Antiguo 01/08/2010, 12:16
 
Fecha de Ingreso: mayo-2005
Mensajes: 42
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Eternas capas: Problema con HEIGHT

Pucha.... MUCHISIMAS GRACIAS...

Etiquetas: capas, height
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 02:53.