Duda del módulo 2 sombrear menú

anairam · 12 May 2009, 06:30 · Solicitar retirada

Hola buenas noches, me da mucha pena darles lata de nuevo, pero es que otra vez estoy atorada, no me aparecen los cambios a partir de propiedades de los enlaces, es decir sombrear un enlace cuando se pasa el cursor, así como subrayarlos y luego cambiarlos de color.

MI PLANTILLA VA ASÍ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-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">
<ul>

Enlace 1

Enlace 2

Enlace 3</div>Esta será la zona principal de la web
</div>

<div id="pie">Este es el pié de página</div>
</div>

</body>
</html>

Y MI HOJA DE ESTILOS VA ASÍ
* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#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}
a {color: blue; font-size:1.3em ; text-decoration: none}
a:link ()
a:visited ()
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active ()
a {color: brown ; text-decoration:none ; display: block }
#pie {background-color: brown}

LES AGRADECERÉ MUCHO QUE ME PUEDAN AYUDAR, YA LO INTENTÉ DE MIL MANERAS.

saruman · 12 May 2009, 13:27 · Solicitar retirada

HOLA:
Creo que estas muy al principio y no debes OBSESIONARTE CONQUE NO TE SALE ESTO O AQUELLO
Si estás siguiendo como creo el curso PASO A PASO, hay que ir despacio y enseguida tendrás que poner otras instrucciones, no quiero adelantarme mucho pero te voy a poner casi la solucion pero prefiero que vayas pasito a pasito sabiendo lo que haces y aprendiendo a consultar y hacer vista previa y modificar lo que no has puesto bien

#menu {background-color: yellow; width: 150px ;
text-align:left ; margin: 5px 10px 5px 5px ;float:left ;
background-image: url/(objetos/menu-parte-inferior.gif)
background-position: bottom ;
padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 3px 6px 3px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:7px ; background-image:url/(objetos/menu-curva-superior.gif)}

Como ves no tienes completadas las instrucciones en tu hoja de estilos

ESPERO QUE TE SIRVA DE AYUDA

UN SALUDO: SARUMAN

abrahan gonzalez · 12 May 2009, 16:04 · Solicitar retirada

anairam escribió:Hola buenas noches, me da mucha pena darles lata de nuevo, pero es que otra vez estoy atorada, no me aparecen los cambios a partir de propiedades de los enlaces, es decir sombrear un enlace cuando se pasa el cursor, así como subrayarlos y luego cambiarlos de color.

MI PLANTILLA VA ASÍ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-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">
<ul>
Enlace 1
Enlace 2
Enlace 3</div>Esta será la zona principal de la web
</div>

<div id="pie">Este es el pié de página</div>
</div>

</body>
</html>

Y MI HOJA DE ESTILOS VA ASÍ
* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#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}
a {color: blue; font-size:1.3em ; text-decoration: none}
a:link ()
a:visited ()
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active ()
a {color: brown ; text-decoration:none ; display: block }
#pie {background-color: brown}

LES AGRADECERÉ MUCHO QUE ME PUEDAN AYUDAR, YA LO INTENTÉ DE MIL MANERAS.

Si te fijas, debes saber que los enlaces se componen de cinco partes no de seis
son todos en un grupo que se llama el grupo de las aes

a {}
a:link ()
a:visited ()
a:hover {}
a:active ()
Todo ese grupo tiene que ver con los enlaces
donde dice a{} debes poner el color que van a tener los enlaces, asi como lo pone el curso, si le pones que las letras midan 1.3em le estás diciendo que midan un 30% mas grande de lo normal y eso te puede dar problemas de espacio en la capa menu, hasta que no domines bien los enlaces
a{color: brown ; text-decoration:none ; display: block}
donde dice a:link{} no pongas nada
donde dice a:visited{} puedes poner también el color
donde dice a:hover{} puedes poner el color y el fondo de color que quieres cuando pongas el cursor encima del enlace y puedes poner el text-decoration:underline para que te salga subrayado
donde dice a:active{} puedes poner color:black o el que quieras
Es mejor que lo hagas por ahora como dice el curso
espero haberte ayudado algo

anairam · 12 May 2009, 20:16 · Solicitar retirada

Hola chicos, les agradezco mucho su respuesta, ya probé lo que me dijeron, pero sigo sin poder sombrear el menú cada que mi cursor pasa por ahí, no se qué hacer, espero puedan ayudarme, gracias, volví a seguir nuevamente las instrucciones del curso, pero se me hace que le falta algo porque sigo igual, gracias.

fernando mendoza · 12 May 2009, 21:04 · Solicitar retirada

hola anairam vamos a tratar de corregir si. el pie lo colocas debajo de la capa menu.
#pie {background-color: brown}
aqui donde esta rojo faltan los dos puntos.
a:{color: brown ; text-decoration:none ; display: block }
corigelos parentisis () cambialos por llaves o corchetes {}
saludos.

anairam · 13 May 2009, 00:37 · Solicitar retirada

Hola Fernando, muchas gracias por tu respuesta, si se corrigió un poquito pero creo que hay algo más que me falta, pues sigue sin sombrearse mi menú.

Ahora mi hoja de estilos está así:

* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#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}
a: {color:brown ; text-decoration:none ; display:block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color:silver}
a:active [color:black]

De favor ayúdame, gracias.

peugeot · 13 May 2009, 02:48 · Solicitar retirada

Hola,

solo tienes que poner un poquito más de orden en tus códigos css que deben quedar de la siguiente manera:

#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left }
#menu li {list-style:none ; margin: 4px 0px 4px 6px}

a {color:brown ; text-decoration:none ; display:block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color:silver}
a:active {color:black}
#pie {background-color: brown}

Después de a: tienes 2 puntos que hay que eliminar y cambiar las llaves por corchetes a a:active

Eso es todo, y a prestar más atención que no cuesta mucho. saludos :wink: