Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Lorenzo31 en 14 de Febrero 2016, 18:09
-
Buenas entrego mi ejercicio, la verdad que aun me veo muy pez en esto del CSS, ya quisiera poder hacer muchas cosas más, en fin poco a poco.
La validación me dio todo correcto en w3.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos122D.css"/>
</head>
<body>
<div id="header"> <h1>Aprendizaje de la programación</h1> </div>
<div id="menu">
<h2>Menú</h2>
<ul>
<li>Programación básica</li>
<li>Programación intermedia</li>
<li>Programación avanzada</li>
</ul>
</div>
<div id="footer">Curso aprenderaprogramar.com</div>
</body>
</html>
estilos122D.css
h1 {background-color:#315CFF; color:#FF0000; font-size:300%; margin:0px; text-align:center;}
h2 {background-color:#FF0000; color:#315CFF; font-size:200%; margin:0px;}
ul, ul li { background-color:#000000; color:#FFFFFF; font-size:120%; margin:0px; width:45%; }
#footer { background-color: #66FF00; color:#CC00CC; font-size:80%; position:absolute; bottom:0; left:0; width:100%; }
-
Buenos días, todo de acuerdo con lo que se pedía en el ejercicio y como comentas tendrás que ir poco a poco. Otra opción es usar frameworks que te permiten ir muy rápido, pero en ese caso no aprendes los fundamentos, sino aprendes a usar el framework. Pero es otra opción...
Un comentario:
ul, ul li { background-color:#000000; color:#FFFFFF; font-size:120%; margin:0px; width:45%; }
Aquí aplicas un width de 45% a ul, y un width de 45% a elementos li dentro de ul. Esto significa que el elemento ul ocupará el 45% de lo que ocupa el padre y el elemento li un 45% de lo que ocupa el ul. Es decir, que aplicas una reducción dos veces, el efecto es que el texto del menú se apelotona hacia la izquierda al no poder abarcar todo el ancho del ul, sino sólo el 45% de este elemento
Saludos
-
Prefiero aprender poco a poco pero bien, no usaré framworks por lo que comentas, no sabes que estás haciendo realmente.
Muy interesante lo que me comentas. es cierto, lo que debería haber hecho entonces, para compartir algunas propiedades entre ellos pero no el width seria
ul, ul li { background-color:#000000; color:#FFFFFF; font-size:120%; margin:0px; }
ul { width:45%; }
Algo así sería? Gracias Mario por el comentario, me ayuda mucho.
-
Sí, la idea es agrupar todas las propiedades comunes y sólo poner por separado las que apliquen únicamente a ciertos elementos. De ese modo evitas repetir código.
Saludos