Autor Tema: Extraer pequeñas imágenes Concepto de sprite CSS y alineación vertical. CU01037D (Leído 2079 veces)

alefaletti · « **en:** 25 de Febrero 2017, 19:20 »

Estimados; les paso mi ejercicio CU01037D del tutorial básico de programación web con CSS. Se aceptan miles y miles de correcciones. jejejej
(alguien sabe como alinear el texto de cada "li" en relación al logo de su izquierda?)

HTML:

Código: [Seleccionar]


<html>
	<head>
		<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="CSSSprite(38).css">
		<style> li {list-style-type: none;} </style>
	</head>

	<body>

		<h1> Portal Web aprenderaprogramar.com </h1>
		<h1> Didáctica y disvulgación de la programación </h2>
	
		<div id="divisor"> </div>

	<div id="items">
			<ul class="items">
				<li id="uno"> <div> </div>   <a href="#">Inicio</a> </li> </br> </br>
				<li id="dos"> <div> </div>   <a href="libros.html">Libros de programación</a> </li> </br> </br>
				<li id="tres"> <div> </div>  <a href="cursos.html">Cursos de programación</a> </li> </br> </br>
				<li id="cuatro"> <div> </div> <a href="humor.html">Humor informático</a> </li> </br> </br>
			</ul>
	</div>

	Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.
	
</html>

CSS

Código: [Seleccionar]


#divisor {background-image:url(http://elsitiodeale.byethost7.com/CU01037D_5.png); width:100%; height:40px;}
#items {margin-left:-40px;}
.items li {text-align:left; padding-top:5px;}

.items #uno div 
{background-image:url(http://elsitiodeale.byethost7.com/4%20Iconos.png);
float:left;
margin-right:8px;
width:40px; 
height:40px;
}

.items #dos div 
{background-image:url(http://elsitiodeale.byethost7.com/4%20Iconos.png);
background-position:-33%;
margin-right:8px;
float:none; float:left;
width:40px; 
height:40px;
}

.items #tres div 
{background-image:url(http://elsitiodeale.byethost7.com/4%20Iconos.png);
background-position:-67%;
margin-right:8px;
float:none; float:left;
width:40px; 
height:40px;
}

.items #cuatro div 
{background-image:url(http://elsitiodeale.byethost7.com/4%20Iconos.png);
background-position:-100%;
margin-right:8px;
float:none; float:left;
width:40px; 
height:40px;
}

pedro,, · « **Respuesta #1 en:** 28 de Febrero 2017, 09:57 »

Buenas alefaletti.

En cuanto a tu duda, si he entendido bien, lo que quieres es alinear verticalmente el texto junto con la imagen que añadiste en cada elemento "li", asi que una de las formas posibles podría ser la siguiente:

Código: [Seleccionar]

.items a {
	position: relative;
	top: 10px;
}

En el resto de código CSS que planteaste, repites muchas propiedades como width, height,... con el mismo valor, para no repetir tanto código te dejo otra posible solución a tu ejercicio:

Código: [Seleccionar]

#divisor {
				background-image:url(http://elsitiodeale.byethost7.com/CU01037D_5.png); 
				width:100%;
				height:40px;
			}
			
			#items {
				margin-left:-40px;
			}

			.items li {
				text-align:left;
				padding-top:5px;
			}

			.items a {
				position: relative;
				top: 10px;
			}

			.items #uno div {
				background-image:url(http://elsitiodeale.byethost7.com/4%20Iconos.png);						
			}

			.items div {
				margin-right:8px;
				float:left;
				width:40px; 
				height:40px;
			}

			.items #dos div {
				background-image:url(http://elsitiodeale.byethost7.com/4%20Iconos.png);
				background-position:-33%;
			}

			.items #tres div {
				background-image:url(http://elsitiodeale.byethost7.com/4%20Iconos.png);
				background-position:-67%;
			}

			.items #cuatro div {
				background-image:url(http://elsitiodeale.byethost7.com/4%20Iconos.png);
				background-position:-100%;
			}
			li {
				list-style-type: none;
			}

Saludos.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: