Foros del Web » Creando para Internet » CSS »

Caja div siempre pegada a un lado de la pantalla de usuario

Estas en el tema de Caja div siempre pegada a un lado de la pantalla de usuario en el foro de CSS en Foros del Web. Hola! Pues mi pregutna es si alguien sabe como hacer una caja CSS que siempre vaya pegada al borde de la pantalla del usuario. Saludos! ...
  #1 (permalink)  
Antiguo 12/08/2011, 04:34
 
Fecha de Ingreso: enero-2011
Mensajes: 12
Antigüedad: 6 años, 4 meses
Puntos: 0
Pregunta Caja div siempre pegada a un lado de la pantalla de usuario

Hola!
Pues mi pregutna es si alguien sabe como hacer una caja CSS que siempre vaya pegada al borde de la pantalla del usuario.

Saludos! :)
  #2 (permalink)  
Antiguo 12/08/2011, 04:48
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 8 meses
Puntos: 63
Respuesta: Caja div siempre pegada a un lado de la pantalla de usuario

Por supuesto.
Entre las etiquetas del body tu muestras el contenido de tu página, el body es como un div que contiene todo tu cuerpo.

Lo que queda fuera del body es como un div que no tiene contenedor, por lo cual

Código HTML:
Ver original
  1. <head><title>Prueba</title></head>
  2. <div id="div_fuera" style="position:fixed; top: 400px; left: 0px;">Esto queda fuera del body</div>
  3. <div>Esto queda dentro del body, cuerpo de la page.</div>
  4. </body>
  5. </html>

Para posicionarla tan solo asignamos las propiedades CSS en la etiqueta por medio del style="".

Saludos
  #3 (permalink)  
Antiguo 12/08/2011, 13:59
 
Fecha de Ingreso: enero-2011
Mensajes: 12
Antigüedad: 6 años, 4 meses
Puntos: 0
Respuesta: Caja div siempre pegada a un lado de la pantalla de usuario

OK, muchas gracias!! después lo pruebo!!^^
  #4 (permalink)  
Antiguo 12/08/2011, 15:05
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 11 meses
Puntos: 1010
Respuesta: Caja div siempre pegada a un lado de la pantalla de usuario

Cita:
Iniciado por Batan Ver Mensaje
Por supuesto.
Entre las etiquetas del body tu muestras el contenido de tu página, el body es como un div que contiene todo tu cuerpo.

Lo que queda fuera del body es como un div que no tiene contenedor, por lo cual

Para posicionarla tan solo asignamos las propiedades CSS en la etiqueta por medio del style="".

Saludos
que lógica tiene colocarlo fuera de la etiqueta body?? eso no pasa ninguna validación

prueba con este

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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#slide_menu{
background-color: #282828;
color: #CCC;
font: 13px Verdana, Helvetica, sans-serif;
text-align: left;
display: block;
cursor: pointer;
width: 150px;
height: auto !important;
padding: 40px 30px;
position: fixed;
top: 100px;
left: -190px;
border: 1px solid #424141;
-moz-border-radius: 0 12px 12px 0;
-webkit-border-radius: 0 12px 12px 0;
-moz-box-shadow: 2px 2px 5px #333;
-webkit-box-shadow: 2px 2px 5px #333;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}


#slide_menu:hover{
left: -20px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
</style>
</head>
<body>
<div id="slide_menu">
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.
</div>
</body>
</html>
  #5 (permalink)  
Antiguo 12/08/2011, 22:08
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 4 meses
Puntos: 306
Respuesta: Caja div siempre pegada a un lado de la pantalla de usuario

Así es, lo que hace que se quede fija es el css y no la posición fuera del body.
Prueba tal como dijo Batan, y prueba moviendo ese div dentro del body y no notaras diferencias, ya que la posición la estas fijando con el estilo (css).

La solución que da IsabelM es completísima, muy buen efecto, aunque seguramente no funcione ese efecto en IE, de todas forma, me gusta

saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #6 (permalink)  
Antiguo 13/08/2011, 06:12
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 11 meses
Puntos: 1010
Respuesta: Caja div siempre pegada a un lado de la pantalla de usuario

Cita:
Iniciado por C2am Ver Mensaje
Así es, lo que hace que se quede fija es el css y no la posición fuera del body.
Prueba tal como dijo Batan, y prueba moviendo ese div dentro del body y no notaras diferencias, ya que la posición la estas fijando con el estilo (css).
que funcione no quiere decir que sea correcto. como ya dije no pasará la validación
Cita:
Iniciado por C2am Ver Mensaje
La solución que da IsabelM es completísima, muy buen efecto, aunque seguramente no funcione ese efecto en IE, de todas forma, me gusta

saludos
seguramente no, es que no funciona. pero con ese código tiene el efecto slide en todos los navegadores y en ie tiene sólo que él busca
  #7 (permalink)  
Antiguo 13/08/2011, 06:23
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 8 meses
Puntos: 63
Respuesta: Caja div siempre pegada a un lado de la pantalla de usuario

Hola muy buenas.

Bueno con respecto a lo de la validación, no lo sabia sinceramente, asi que gracias.

Probando el efecto oque dijo @IsaBelM si es cierto que no se puede en explorer, de echo no me gustó mucho la diferencia que hubo, normal es IE...

Saludos
  #8 (permalink)  
Antiguo 13/08/2011, 14:06
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 4 meses
Puntos: 306
Respuesta: Caja div siempre pegada a un lado de la pantalla de usuario

Hola IsabelM, mi respuesta no es "en contra" de la tuya, sino que lo invitaba a Ourii a que probara, jugara con el código, planteando dichas alternativas para que comprendiera que lo que dijo Batan (hola) no es del todo exacto (ni correcto semanticamente el html), aunque el css sí.
Viste que la única forma de aprender es escribiendo código e ir entendiendo que es lo que hace.


La verdad que no había probado el efecto de transición, así que gracias.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: caja, lado, pantalla, siempre, usuarios
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 21:59.