Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: 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
-
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:
<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