Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: alefaletti en 10 de Marzo 2017, 02:27
-
Respuesta al ejercicio CU01037D del tutorial básico de programador web con CSS.
HTML (sin head).
<body>
<h1> Portal Web aprender a programar </h1>
<h2> Didáctica y divulgación de la programación </h2>
<div>Menú</div>
</br>
<div id="divisor"> </div>
<ul>
<div id="uno"> </div> <li> <a href="#">Inicio</a> </li> </br> </br>
<div id="dos"> </div> <li> <a href="libros.html"> Libros de programación </a> </li> </br> </br>
<div id="tres"> </div> <li> <a href="cursos.html">Cursos de programación </a> </li> </br> </br>
<div id="cuatro"> </div> <li> <a href="humor.html">Humor informático </a> </li> </br> </br>
</ul>
<p> Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan </p>
</body>
</html>
CSS
li {list-style-type:none; margin-left:30px; position:relative; top:9px;}
#divisor{background-image:url(http://elsitiodeale.byethost7.com/CU01037D_5.png); width:%100; height:40px;}
#uno, #dos, #tres, #cuatro {background-image: url(http://elsitiodeale.byethost7.com/4%20Iconos.png); float:left; margin-left:-20px;}
#uno {width:40px; height:40px; }
#dos {background-position:40px; width:40px; height:40px;}
#tres{background-position:80px; width:40px; height:40px;}
#cuatro{background-position:120px; width:40px; height:40px;}
-
Hola alefaletti.
Tu código funciona bien, pero hay cosas que se podrían mejorar.
Los div que añadiste para colocar las imágenes deberían ir dentro de las etiquetas "li" y que al estar dentro de una lista "ul" el orden su sintaxis debe ser:
<ul>
<li>aquí todo lo que quieras añadir, div, span, img,...</li>
<li>...</li>
<li>...</li>
</ul>
De la manera que lo hiciste no te dará ningún error y se ejecutará bien, pero si lo hacemos de esta forma, estaremos siguiendo los estándares xhtml.
También podrías ahorrar código añadiendo alguna clase más, usas en cuatro sitios distintos estas dos propiedades:
width:40px; height:40px;
Otra cosa que deberías no intentar usar tanto es los "br" además de que los expresaste mal, porque no deben ir así: "</br>" sino que tendrían que ser así "<br/>". Podrías ganar ese espacio añadiendo márgenes, padding,...
Te dejo otra posible solución:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo www.aprenderaprogramar.es</title>
<style>
ul li {
list-style-type:none;
}
#divisor{
background-image:url(http://elsitiodeale.byethost7.com/CU01037D_5.png);
width:%100;
height:40px;}
.icono {
background-image: url(http://elsitiodeale.byethost7.com/4%20Iconos.png);
width:40px;
height:40px;
display: inline-block;
position: relative;
top: 15px;
margin-right: 5px;
}
#dos {
background-position:40px;
}
#tres{
background-position:80px;
}
#cuatro{
background-position:120px;
}
</style>
</head>
<body>
<h1> Portal Web aprender a programar </h1>
<h2> Didáctica y divulgación de la programación </h2>
<div>Menú</div>
<br/>
<div id="divisor"> </div>
<ul>
<li><div id="uno" class="icono"> </div> <a href="#">Inicio</a> </li>
<li><div id="dos" class="icono"> </div> <a href="libros.html"> Libros de programación </a> </li>
<li><div id="tres" class="icono"> </div> <a href="cursos.html">Cursos de programación </a> </li>
<li><div id="cuatro" class="icono"> </div> <a href="humor.html">Humor informático </a> </li>
</ul>
<p> Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan </p>
</body>
</html>
</html>
Saludos. ;D
-
Pedro! muchas gracias como siempre!
Ya me pongo a ver tus mejoras. Un abrazo.
-
Pedro, gracias!
Sin ver tu código corregí el mio así:
HTML
<body>
<h1> Portal Web aprender a programar </h1>
<h2> Didáctica y divulgación de la programación </h2>
<div>Menú</div>
<div id="divisor"> </div>
<ul>
<li> <div id="uno"> </div> <a href="#"> <span class="alinear"> Inicio </span> </a> </li>
<li> <div id="dos"> </div> <a href="libros.html"> <span class="alinear"> Libros de programación </a> </li>
<li> <div id="tres"> </div> <a href="cursos.html"> <span class="alinear"> Cursos de programación </a> </li>
<li> <div id="cuatro"> </div> <a href="humor.html"> <span class="alinear"> Humor informático </a> </li>
</ul>
<p> Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan </p>
</body>
CSS
.alinear {position:relative; top:11px; right:-9px;}
p{position:relative; left:-33px;}
li {list-style-type:none; margin-left:-8px; position:relative; top:-32px; padding-top:33px;}
#divisor{background-image:url(http://elsitiodeale.byethost7.com/CU01037D_5.png); width:%100; height:40px;}
#uno, #dos, #tres, #cuatro
{background-image: url(http://elsitiodeale.byethost7.com/4%20Iconos.png);
float:left; margin-left:-10px; width:40px; height:40px;
}
#dos {background-position:40px;}
#tres{background-position:80px;}
#cuatro{background-position:120px;}
Otro abrazo!