Voy por la lección 2, Tema fondos de enlaces.
http://www.comocreartuweb.com/ejemplo-con-divs/la-plantilla/enlaces…
A mi se me separan los textos del menú y no sé por qué es. Tengo esto:
Plantilla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Pueblos del mundo. Desarrollado por Roberto González Gómez(© robierzo)</title>
<link rel="stylesheet" href="Estilos-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<!--La # se pone para que no nos de error de momento, pues no tenemos ninguna ruta definida-->
<ul><li><a href="#">Enlace 1</a></li> <li><a href="#">Enlace 2</a></li> <li><a href="#">Enlace 3</a></li> <li>Elemento 4º de la lista</li></ul>
</div>
Esta será la zona principal de la web
</div>
<div id="pie">Este es el pié de página</div>
</div>
</body>
</html>
Estilos-general:
* {margin:0px; padding:0px; border:0px;}/*Sirve para que no quede margen en los bordes*/
body {text-align:center;}
#global {width:800px; margin:4px auto;}/*Definimos el tamaño de la weeb. este es un tamaño estandar*/
#cabecera {background-color:pink;}/*la almohadilla es para especificar que es un estilo único*/
#navegacion {background-color:gray;}/*Sirve para crear la barra de navegación*/
/*#contenido {background-color:orange;}*/
#contenido {background-color:orange; width:800px; float:left;}
#menu {background-color:yellow; width:150px; float:left; text-align:left;}
#menu li {list-style:none; margin:4px 0px 4px 6px;}
#pie {background-color:brown;}
/*Definimos los estados posibles de los enlaces, que como sabemos de definen con la letra a*/
/*Con el display:block hacemos que se active el link con sólo colocarnos sobre la linea del mismo.*/
a {color:brown ; text-decoration:none ; display:block}
a:link {}
a:visited {}
a:hover {color:red; text-decoration:underline; background-color: silver;}
a:active {}
Saludos.
http://www.comocreartuweb.com/ejemplo-con-divs/la-plantilla/enlaces…
A mi se me separan los textos del menú y no sé por qué es. Tengo esto:
Plantilla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Pueblos del mundo. Desarrollado por Roberto González Gómez(© robierzo)</title>
<link rel="stylesheet" href="Estilos-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<!--La # se pone para que no nos de error de momento, pues no tenemos ninguna ruta definida-->
<ul><li><a href="#">Enlace 1</a></li> <li><a href="#">Enlace 2</a></li> <li><a href="#">Enlace 3</a></li> <li>Elemento 4º de la lista</li></ul>
</div>
Esta será la zona principal de la web
</div>
<div id="pie">Este es el pié de página</div>
</div>
</body>
</html>
Estilos-general:
* {margin:0px; padding:0px; border:0px;}/*Sirve para que no quede margen en los bordes*/
body {text-align:center;}
#global {width:800px; margin:4px auto;}/*Definimos el tamaño de la weeb. este es un tamaño estandar*/
#cabecera {background-color:pink;}/*la almohadilla es para especificar que es un estilo único*/
#navegacion {background-color:gray;}/*Sirve para crear la barra de navegación*/
/*#contenido {background-color:orange;}*/
#contenido {background-color:orange; width:800px; float:left;}
#menu {background-color:yellow; width:150px; float:left; text-align:left;}
#menu li {list-style:none; margin:4px 0px 4px 6px;}
#pie {background-color:brown;}
/*Definimos los estados posibles de los enlaces, que como sabemos de definen con la letra a*/
/*Con el display:block hacemos que se active el link con sólo colocarnos sobre la linea del mismo.*/
a {color:brown ; text-decoration:none ; display:block}
a:link {}
a:visited {}
a:hover {color:red; text-decoration:underline; background-color: silver;}
a:active {}
Saludos.