Foros del Web » Creando para Internet » CSS »

Elemento con posición fija dentro de una DIV con scrollbars

Estas en el tema de Elemento con posición fija dentro de una DIV con scrollbars en el foro de CSS en Foros del Web. Hace rato que estoy intentando hacer esto. Pero no he logrado hacerlo puro CSS, actualmente en mis pruebas de concepto lo estoy solucionando con jquery, ...
  #1 (permalink)  
Antiguo 22/04/2011, 16:31
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 9 años, 3 meses
Puntos: 187
Elemento con posición fija dentro de una DIV con scrollbars

Hace rato que estoy intentando hacer esto. Pero no he logrado hacerlo puro CSS, actualmente en mis pruebas de concepto lo estoy solucionando con jquery, pero esto hace que el posicionamient o sea algo lento y sea parpadeando.

http://testing.bitsarg.com.ar/test.html

En esa pagina pueden ver lo que estoy tratando de lograr y tambien pueden ver como lo tengo actualmente solucionado (funciona de IE 8 en adelante, no lo he probado para abajo).

Explicando un poco. Tengo un contenedor que define el tamaño de la ventana visible. Dentro el contenido puede crecer a gusto y la idea es que se formen las scroollbars. El problema resulta en que yo quiero que las etiquetas de las columnas se mantengan, para que la persona que ve la informacion siempre termina sabiendo donde esta parada. El problema (creo que no tiene solucion) es que el posicionamient o absoluto, por mas que lo haga contra el contenedor (el que tiene el ancho y alto definido, las scrollbars y posicion distinta de estatica) aun asi requiere del mini script para ir corrigiendo su posicion, por lo que estoy totalmente atado.

Igualmente si alguno se enfrentó alguna vez a algo similar, escucho ideas.

Saludos y Gracias
  #2 (permalink)  
Antiguo 23/04/2011, 07:21
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Elemento con posición fija dentro de una DIV con scrollbars

no es absolute, sino fixed
Cita:
<!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 content="text/html; http-equiv="Content-Type" charset=utf-8"/>
<title></title>
<style type="text/css">
.notice {
height: 285px;
width: 250px;
border: 1px solid black;
}

.notice p {
overflow: auto;
height: 250px;
width: 250px;
margin-top: 35px;
}

.notice div {
position: fixed;
width: 250px;
background-color: yellow;
padding: 0 0 8px 0;
}

.notice div > a {
float: right;
padding: 7px 40px 0 0;

}
</style>
</head>

<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type<br /> and scrambled it to make a type specimen book. <br />It has survived not only five centuries, but also the leap into electronic typesetting, remaining <br />essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,<br /> and more recently with desktop publishing software like Aldus PageMaker including <br />versions of Lorem Ipsum.<br /><br /><br />
<div class="notice">
<div><a href="#">Leer Mas</a></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>
  #3 (permalink)  
Antiguo 23/04/2011, 09:24
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 9 años, 3 meses
Puntos: 187
Respuesta: Elemento con posición fija dentro de una DIV con scrollbars

Estimada IsaBeIM, si utilizo "position:fixed" en mi caso, como lo que quiero que tenga posicion fija es algo que tiene que tener scroll, si utilizo esa propiedad, lo fijo rompe el layout y queda flotando por fuera de la caja con scroll.
  #4 (permalink)  
Antiguo 24/04/2011, 09:32
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Elemento con posición fija dentro de una DIV con scrollbars

sigamos con el estilo epistolar.

querido ryugen, por alguna razón no me fijé en el scroll horizontal. con motivo de tal hecho ninguna propiedad position, solventará tu problema. si usas fixed, desbordará el bloque padre. si en el padre usas relative y en el hijo absolute, el padre no será desbordado, pero habrá desplazamiento horizontal. de tal modo que la única solución es usar alguna librería.

sin mas, se despide.

IsaBelM

Etiquetas: fija, scrollbars
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 15:01.