Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: 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:
<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
#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;
}
-
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:
.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:
#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. ;D