Autor Tema: CSS ¿Qué es, cómo crear y usar un sprite? Extraer imágnes de una mayor CU01037D  (Leído 1708 veces)

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Respuesta al ejercicio CU01037D del tutorial básico de programador web con CSS.

HTML (sin head).

Código: [Seleccionar]

<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

Código: [Seleccionar]

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;}

« Última modificación: 14 de Mayo 2017, 19:32 por Alex Rodríguez »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Ejercicio Final (CU01037D)
« Respuesta #1 en: 10 de Marzo 2017, 13:04 »
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:
Código: [Seleccionar]
<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:
Código: [Seleccionar]
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:

Código: [Seleccionar]
<!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

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Re:CSS. ¿Qué es, cómo crear y usar un sprite?. (CU01037D)
« Respuesta #2 en: 11 de Marzo 2017, 16:13 »
Pedro! muchas gracias como siempre!

Ya me pongo a ver tus mejoras. Un abrazo.

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Re:CSS. ¿Qué es, cómo crear y usar un sprite?. (CU01037D)
« Respuesta #3 en: 11 de Marzo 2017, 17:07 »
Pedro, gracias!
Sin ver tu código corregí el mio así:

HTML
Código: [Seleccionar]

<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

Código: [Seleccionar]

.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!


 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".