Foros del Web » Creando para Internet » CSS »

una capa sin scroll y otra con él

Estas en el tema de una capa sin scroll y otra con él en el foro de CSS en Foros del Web. Hola, amigos. A ver si alguien puede echarme una mano, el posicionamiento con CSS me supera. Quiero una página dividida en dos capas que queden ...
  #1 (permalink)  
Antiguo 05/09/2005, 15:41
 
Fecha de Ingreso: octubre-2004
Ubicación: España
Mensajes: 894
Antigüedad: 13 años, 1 mes
Puntos: 3
una capa sin scroll y otra con él

Hola, amigos. A ver si alguien puede echarme una mano, el posicionamiento con CSS me supera.
Quiero una página dividida en dos capas que queden lado a lado (como si fueran dos marcos en una misma fila).
La capa izquierda debe tener un ancho fijo (500px) y no hacer "scroll". Esto lo tengo conseguido.
La capa derecha debe llenar el ancho restante disponible (es decir, sin ancho fijo) y debe tener un scroll vertical cuando lo necesite.

He hecho esto:
Código PHP:
body overflow:hidden; }
#izqda { 
    
position:absolute
    
width:500px;
    
overflow:hidden
}
#dcha {
    
position:absolute
    
left:500px
    
overflow:visible

No consigo ninguna combinación de "overflow" que llene el ancho disponible sin írseme el texto por la derecha y que al no caber en vertical me aparezca el scroll.

Gracias por anticipado
__________________
Angel :cool:
  #2 (permalink)  
Antiguo 05/09/2005, 18:03
Avatar de hunab  
Fecha de Ingreso: febrero-2005
Ubicación: Barcelona
Mensajes: 133
Antigüedad: 12 años, 9 meses
Puntos: 1
a ver, lo primero decirte que en tu css no tiene ninguna utilidad el posicionamiento absoluto, podrias probar algo como esto:

#izqda {
float:left;
width:500px;
height:500px;
}

#dcha {
margin-left:500px;
height:500px;
overflow:auto;
}
__________________
Marcio Barrios
marciobarrios.com // artículos sobre estándares y desarrollo web
  #3 (permalink)  
Antiguo 05/09/2005, 19:00
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
ponle overflow:auto al body no hidden
  #4 (permalink)  
Antiguo 06/09/2005, 03:05
 
Fecha de Ingreso: octubre-2004
Ubicación: España
Mensajes: 894
Antigüedad: 13 años, 1 mes
Puntos: 3
Gracias por las respuestas, pero sigue sin funcionar bien.
Con la solución "float" de hunab la capa dcha se me va debajo de la capa izda, mientras que quiero que ambas empiecen desde arriba; por eso necesito "absolute", para poder fijar el "top".
La razón de poner overflow:hidden al body es que no quiero que la capa izda se mueva, por lo cual mi idea era anular los scroll de body e izda y activar el de dcha.
También he intentado definir "height" y "max-height" a 100%, pero me ha dado igual.

Este es un código de prueba que tengo:
Código HTML:
<body>
<div id="izda">
  <img src="algo.gif" width="490" height="490"></div>
<div id="dcha">
Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. 
Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. 
</div>

</body> 
Quiero que la imagen esté quieta y que la columnaderecha de texto haga scroll cuando sea necesario.
__________________
Angel :cool:
  #5 (permalink)  
Antiguo 07/09/2005, 00:15
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 13 años, 5 meses
Puntos: 2
Prueba con algo como esto:

Código:
#izq{
width: 300px;
height: 300px;
float: left;
border: 1px solid red;
}
#der{
height: 400px;
border: 1px solid blue;
overflow: auto;
}
OJO: En tu HTML debe encontrarse primero el div izquierdo y luego el derecho.

(Con bordes para que todo se vea mejor )
__________________
Mi pequeño espacio en la web: VisiónE
"El cosmos es todo lo que es, todo lo que fue, y todo lo que será alguna vez."
  #6 (permalink)  
Antiguo 07/09/2005, 02:45
 
Fecha de Ingreso: octubre-2004
Ubicación: España
Mensajes: 894
Antigüedad: 13 años, 1 mes
Puntos: 3
Gracias, KnowDemon
Tu código funciona (y, mirándolo bien, es básicamente como el de hunab, así que algo debí estropear en la prueba anterior).
El problema es que no quiero definir un alto en píxeles para la capa derecha, y en cuanto cambio el "height" a % u otra cosa deja de funcionar.
Entretanto he encontrado otra solución que se adapta mejor a lo que quiero:
http://tagsoup.com/-dev/null-/css/fixed/
Gracias por la ayuda
__________________
Angel :cool:
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 16:04.