Foros del Web » Creando para Internet » CSS »

Conseguir longitud de una capa

Estas en el tema de Conseguir longitud de una capa en el foro de CSS en Foros del Web. Hola a todos!! Tengo dos capas dentro de otra capa(contenedor).Una está a la izquierda y otra a laderecha.El contenido de la capa de la dercha ...
  #1 (permalink)  
Antiguo 21/05/2006, 04:54
 
Fecha de Ingreso: abril-2005
Mensajes: 287
Antigüedad: 12 años, 8 meses
Puntos: 0
Conseguir longitud de una capa

Hola a todos!!

Tengo dos capas dentro de otra capa(contenedor).Una está a la izquierda y otra a laderecha.El contenido de la capa de la dercha es variable(por lo que su longitud es varibla tambien cada vez que se abre la página), sin embargo, el contenido de la capa de la derecha es fijo,pero quiero que tenga la longitud de la capa de la derecha.Como podría hacer ésto??

Saludos
  #2 (permalink)  
Antiguo 21/05/2006, 04:59
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola:

Con javascript se obtiene el tamaño con offsetHeight (y la anchura con offsetWidth)... Si quisieras evitar javascript podrías poner valores fijos y ponerle scrollbars (overflow: auto)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 21/05/2006, 05:07
 
Fecha de Ingreso: abril-2005
Mensajes: 287
Antigüedad: 12 años, 8 meses
Puntos: 0
Con Javascript??La verdad es que no se mucho de javascript.Me podrias especificar un poco mas como hacerlo,por favor?.Muchas gracias

Saludos
  #4 (permalink)  
Antiguo 21/05/2006, 09:05
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
No se exactamente para que lo quieres, podrías especificar un poco más???

Si lo que quieres es poner otra capa debajo de las dos, por ejemplo, lo más comodo es ponerla con un "clear: both;" y siempre estará debajo de las dos, si lo que quieres es que tenga colores o derivados a lo mejor se podría probar poniendo la capa izq dentro de la derecha, así la capa de la derecha siempre se "ensancharía" al tamaño de la de la izq.

Bueno, son solo ideas, si lo explicas un poco más a lo mejor se me ocurren otras "chapucillas" ;)
  #5 (permalink)  
Antiguo 21/05/2006, 10:58
 
Fecha de Ingreso: abril-2005
Mensajes: 287
Antigüedad: 12 años, 8 meses
Puntos: 0
Haber,yo lo que quiero es que las dos capas que estan dentro de la capa contenedor tengan la misma longitud para que no se me quede la página asimétrica.el problema es que la capa de la derecha tiene una longitud variable,ya que su contenido sale de una DB.Lo entiendes ahora mejor??
  #6 (permalink)  
Antiguo 22/05/2006, 17:49
 
Fecha de Ingreso: abril-2005
Mensajes: 287
Antigüedad: 12 años, 8 meses
Puntos: 0
¿Alguna idea??
  #7 (permalink)  
Antiguo 22/05/2006, 17:55
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
Podrías poner los dos divs dentro de un contenedor (solo para ellos) y ponerle una altura al div del 100%. No lo he probado pero podría valer ya que la altura, se supone que va en función del padre.

Si no, intenta poner un screenshoot de lo que tienes y explica sobre la imagen que quieres. A ver si se me ocurren otras cosillas ;)
  #8 (permalink)  
Antiguo 22/05/2006, 18:00
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
Con
Cita:
intenta poner un screenshoot de lo que tienes y explica sobre la imagen que quieres.
Me refiero a que quieres que salga en el div izq. Por ejemplo q se vea el mismo fondo, que tenga la misma imagen q lo de debajo salga justo debajo....

Para ver si salen otras posibles soluciones.
  #9 (permalink)  
Antiguo 23/05/2006, 16:21
 
Fecha de Ingreso: abril-2005
Mensajes: 287
Antigüedad: 12 años, 8 meses
Puntos: 0
He puesto una capa contenedor(le he llamado contenedorb) que contiene a estas dos capas a las que me refiero.EL resultado es que en IE,la capa de la izda toma la altura de la capa contendor pero la capa de la derecha ni se inmuta,sigue teniendo la misma altura.Pongo el codigo por si alguien tiene ganas de mirarlo:
Código:
A:link{text-decoration:none; color:#3333FF;}
A:visited{text-decoration:none;color:#3333FF;}
.contenedor{
text-align: left;
width: 850px;
_width:980px;
margin: auto;
}
#cabecera{
height : 100px;
width: 850px;
margin-top:10px;
padding-top:5px;
padding-left:0px;
_padding-left:65px;
padding-right:0px;
_padding_right:65px;
margin-right:0px;
_margin-right:20px;
margin-left:0px;
_margin-right:20px;
}
#cajaarriba{
height:100%;
background-image: url(../images/arriba.gif);
background-position: top center;
background-repeat: no-repeat;
padding-top:30px;
}
.caja {
width:230px;
height:100%;
background-image: url(../images/centro.gif);
background-repeat: repeat-y;
margin-top:50px;
float:left;
}
* html .caja{
margin-left:30px;
}
.cajaabajo {
height:100%;
background-image: url(../images/abajo.gif);
background-position: bottom left;
background-repeat: no-repeat;
padding: 15px 0px 15px 15px;
}
.lateralderecho{
width:600px;
_width:600px;
height:100%;
text-align:center;
margin-top:38px;
margin-left:5px;
padding: 13px 3px 0px 5px;
border-color:#aaa;
border-width:1px;
float:right;
}
* html .lateralderecho{
margin-right:30px;
}
#encabezado{
background-color:#9ACD32;
border-width:1px;
border-style:solid;
border-color:#9ACD32;
margin-top:0px;
margin-right:0px;
padding-top:0px;
top:0px;
padding:0px 0px 0px 0px;
text-align:center;
color:#FFFFFF;
}
H3{
margin-top:2px;
margin-bottom:2px;
}
#contenido{
border-width:1px;
border-style:solid;
border-color:#9ACD32;
margin-top:0px;
padding-top:50px;
text-align:center;
text-indent:0px;
font-weight:bold;
}
#contenedorb{
border-style:solid;
border-color:#aaa;
height:100%;
width:850px;
_width:980px;
}
y el HTML:

Código HTML:
<html>

<head>
  <title></title>
  <link rel="STYLESHEET" type="text/css" href="CSS/procesar.css">
</head>

<body>
<div class="contenedor">
<div id="cabecera"><img src="images/cabecera.gif" width="850" height="100"  border="0"></div>
<div id="contenedorb">
 <div class='caja'>
    		<div id='cajaarriba'>
        		<div class='cajaabajo'>
    			<ul>
     			<li><a href='home.php'>Inicio</a>
        		<li><a href='cambiarContrasena.php'>Cambiar contraseña</a>
        		</ul>
       			 </div>//Cierra caja
       		 </div>//Cierra cajaabajo
        </div>//Cierra caja
        <div class="lateralderecho">
          <div id="encabezado">
    	    <h3>Está matriculado de los siguientes cursos:</h3>
          </div>//Cierra encabezado
        <div id="contenido">
               Aqui va texto y mas texto
</div>//Cierra contenedorb
</div>//Cierra contenedor
            
  #10 (permalink)  
Antiguo 24/05/2006, 09:10
 
Fecha de Ingreso: enero-2006
Ubicación: Maracay, Edo. Aragua
Mensajes: 206
Antigüedad: 11 años, 10 meses
Puntos: 0
Sería bueno que alguien respondiera a esta interrogante; tengo meses intentando hacer esto y no he podido.
  #11 (permalink)  
Antiguo 30/05/2006, 02:38
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
Lo he estado mirando un poco por encima. Perdona no haberte contestado antes, pero de vez en cuando hay que trabajar un poco

Aquí hay unos screenshot retocados del efecto en un firefox y en un Explorer




A ver, lo primero metele algún Doctype que para los temas de alturas siempre viene bien, también debes definir la altura en todos los padres de los divs que necesiten alguna altura.

El mayor problema es que para firefox, si le indicas altura 100% y luego le das un margin-top el bloque coje el 100% de la altura del padre (por ejemplo 125px) y luego le suma el margin (si por ejemplo el margin-top es de 50px, el bloque sale por debajo del padre esos 50px) así q deberías no usar el margin si quieres que se vea bien en el Firefox (y demás navegadores que cumplen los standar del W3C)

Pero poniendo todos los padres con height (100% por ejemplo) incluido el html y el body los divs deberían bajarte hasta abajo.

Además de eso comprueba el css, está un poco enrevesado

Espero que te sirva.
__________________
.-. GeL/T0 .-. Quieres saber mas de mi? lee mi blog: http://g05l21.net

Última edición por g05l21; 30/05/2006 a las 02:44
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 12:00.