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

Ourii · #1 (**permalink**) 12/08/2011, 04:34

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! :)

Batan · #2 (**permalink**) 12/08/2011, 04:48

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<html>
<head><title>Prueba</title></head>
<div id="div_fuera" style="position:fixed; top: 400px; left: 0px;">Esto queda fuera del body</div>
<body>
<div>Esto queda dentro del body, cuerpo de la page.</div>
</body>
</html>

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

Saludos

Ourii · #3 (**permalink**) 12/08/2011, 13:59

OK, muchas gracias!! después lo pruebo!!^^

IsaBelM · #4 (**permalink**) 12/08/2011, 15:05

Cita:

Iniciado por Batan

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>

C2am · #5 (**permalink**) 12/08/2011, 22:08

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

IsaBelM · #6 (**permalink**) 13/08/2011, 06:12

Cita:

Iniciado por C2am

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

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

Batan · #7 (**permalink**) 13/08/2011, 06:23

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

C2am · #8 (**permalink**) 13/08/2011, 14:06

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