Autor Tema: Ejercicio curso CSS CU01032D ejemplos de posicionamiento fixed (Leído 2777 veces)

Jose Luis · « **en:** 15 de Diciembre 2014, 03:12 »

Buenas.Me parece que hay un error en el archivo css 1 en la última linea:

/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial; }
body {width: 600px; height:2400px; border-style:dotted;}
div {border-style: solid;}
div div {border-style: dashed; border-color: green; margin: 5px;}
div div div {border-style: dashed; border-color: red; margin: 5px;}
 #menu1 { position:fixed; left:50; top:0;}

Creo que debería de ser left:50px. ¿No es así?.
Tambien tengo otra pregunta sobre este tema:al explicar que" Al hacer scroll, comprobarás que la caja del elemento con id menu1 se mantiene fija en una posición de la página aunque nos desplacemos con el scroll."quereis decir que al bajar en la página el
div baja hacia abajo también o que quereis decir porque a mí no me hace nada con el chrome. Si es así podriais mandarme más ejemplos por favor o si no podriais explicarmelo de otra manera o más extensamente porque no me entero donde esta la diferencia con absolute ya que no me hace nada.Gracias

Mario R. Rancel · « **Respuesta #1 en:** 15 de Diciembre 2014, 09:39 »

Hola, tienes razón en que en lugar de poner:

#menu1 { position:fixed; left:50; top:0;}

Debería poner

#menu1 { position:fixed; left:50px; top:0;}

Lo que dices al hacer scroll, es lo que tú has comentado: al hacer scroll, si el menu1 no estuviera fixed, dejarías de verlo. En cambio haces scroll hacia abajo y lo sigues viendo porque está fijado con fixed. Prueba a quitarle el fixed para ver la diferencia.

Lo he probado en chrome con este código y funciona correctamente:

Código: [Seleccionar]

<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{font-family: arial; }
body {width: 600px; height:2400px; border-style:dotted;}
div {border-style: solid;}
div div {border-style: dashed; border-color: green; margin: 5px;}
div div div {border-style: dashed; border-color: red; margin: 5px;}
#menu1 { position:fixed; left:50px; top:0;}
</style>
</head>
<body>
<!-- menu -->
<div id="menu1">
<div>Menú</div>
<hr/>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="libros.html" >Libros de programación</a> </li>
<li><a href="cursos.html" >Cursos de programación</a> </li>
<li> <a href="humor.html" >Humor informático</a> </li>
</ul>
</div>
<!-- fin menu -->
</body>
</html>

Sobre las diferencias entre fixed y absolute, en algunos casos los resultados pueden ser parecidos. Mira lo que indica la tabla "Propiedad CSS position" de la entrega CU01032D y haz pruebas con una web que tenga más contenidos (por ejemplo texto por arriba y por abajo del elemento que está posicionado).

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: