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.
Tema: CSS ¿Qué es, cómo crear y usar un sprite? Extraer imágnes de una mayor CU01037D (Leído 2853 veces)
RSS -
WAP2