Entrar

En la lista de enlaces cambiantes no me funciona Hover

diana · · Solicitar retirada
No hay manera que al poner el cursor del ratonzuelo sobre el enlace me salga rojo y subrrayado. Ya me arden los ojos de tratar de ver si tengo algun error y nada de nada. Aqui copio los dos files:

estilo-general.css

*{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}
#pie {background-color: brown}
#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 {}

plantilla.html

<!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 pie de la página </div>
    </div>
    </body>
    </html>

    Se agradece ayuda para poder continuar!!!!!
    • Yaneth · · Solicitar retirada
    Hola

    necesitas quitarle los espacios despues de la "a"

    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline; background-color: silver}
    a:active {}

    checalo y nos avisas

    recuerda guardar los cambios antes de hacer vista previa

    saludos
    antiyankis91 · · Solicitar retirada
    si pnes los otros 4 no te hara falta este :

    a {color: brown ; text-decoration:none; display: block}

    A ver k tal t va
    diana · · Solicitar retirada
    Muchas gracias por la ayuda a ambos. Ya me funcionó.
    Saludos,
    Diana la Cubana
    JorGens · · Solicitar retirada
    si pnes los otros 4 no te hara falta este :
    a {color: brown ; text-decoration:none; display: block}
    A ver k tal t va
    En mejor poner todos para evitar problemas con algunos navegadores.

    Un abrazo!
    andresgohi · · Solicitar retirada
    Hola, Jorgens:

    No hay caso con mi ejercicio. No hallo el error. No consigo el efecto BLOCK, no se me activa el enlace cuando posiciono el cursor fuera de las palabras.

    Te copio párrafo de tu clase y mis códigos a ver si puedes ayudarme.

    Gracias nuevamente.

    Andrés.-


    "Si te fijas en la vista previa de la plantilla.html verás que es necesario poner el cursor justo encima de las palabras del enlace (se suele llamar Anchor Text a los textos de los enlaces) para que estos funcionen. En cambio podemos hacer un pequeño truco para que estos se activen, funcionen, con solo colocar el cursor sobre la línea, sin necesidad de colocarlo justamente sobre el texto. No se si te has enterado de lo que acabo de decir, igual suena un poco extraño, pero tu haz lo que te digo y verás a qué me refiero.

    Añade esta última propiedad dejando el estilo de enlaces de la Hoja de Estilos estilo-general.css así:

    a {color: brown ; text-decoration:none ; display: block }

    Ocurren dos cosas ahora. La primera es buena, es el efecto que te acabo de comentar, que situando el cursor en la misma línea del enlace pero lejor del texto, también se activa el enlace ... "

    Van mis códigos:

    estilo-general.css:

    * {text-indent: 0px; 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}
    #contenido p{padding: 5px 10px 5px 10px; text-indent: 15px}
    #menu {background-color: yellow; width: 150px; float: left; text-align: left; margin: 3px 10px 3px 3px}
    #pie {background-color: brown}
    #menu li{list-style: none; margin: 4px 0px 4px 6px}
    a {color: blue; text-decoration: none; display: block}
    a:link {}
    a:visited {}
    a:hover {color: red; text-decoration: underline; background-color: silver}
    a:active {}
    p {text-align: justify}
    h1 {font-size: 1.2em; color: blue; font-weight: bold; text-decoration: underline; text-align: center}
    h2 {font.size: 1.1em; color: blue; font-weight: bold; text-decoration: none; text-align: center}

    plantilla.html:

    <DOCTYPE>
    <html>
    <head>
    <title>Page title</title>
    <link>
    </head>
    <body>
    <div>
    <div>Bienvenidos a mi Web</div>
    <div>Barra de Navegación</div>
    <div>
    <div>
    <ul>
  • <a>Enlace 1</a>
  • <a>Enlace 2</a>
  • <a>Enlace 3</a>
    </div>
    <h1>Esta será la zona principal de la web</h1>


    Primer párrafo de prueba para comprobar el funcionmiento de las propiedades aquí expuestas</p>
    <h2>Y subtítulo</h2>


    Nada más queda esperar que todo haya salido bien. Que los pa´rrafos funcionen debidamente. De otro modo estamos mal ¿capice?</p>
    </div>
    <div>Este es el pié de página</div>
    </div>
    </body>
    </html>
    • Yaneth · · Solicitar retirada
    Hola

    para que tus codigos salgan completos tienes que activar la casilla de abajo que dice:

    deshabilitar html en este mensaje

    copia y pega de nuevo, pero antes de darle enviar

    activa la casilla

    saludos
    andresgohi · · Solicitar retirada
    Gracias, Yaneth.

    Van mis hojas.

    Como contaba, no consigo el efecto esperado con {display: Block}. Todo lo demás, muy bien (Uso firefox, por si sirve el dato)
    ¿Dónde tengo el error?

    Más Saludos.

    estilo-general.css:

    * {text-indent: 0px; 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}
    #contenido p{padding: 5px 10px 5px 10px; text-indent: 15px}
    #menu {background-color: yellow; width: 150px; float: left; text-align: left; margin: 3px 10px 3px 3px}
    #pie {background-color: brown}
    #menu li{list-style: none; margin: 4px 0px 4px 6px}
    a {color: blue; text-decoration: none; display: block}
    a:link {}
    a:visited {}
    a:hover {color: red; text-decoration: underline; background-color: silver}
    a:active {}
    p {text-align: justify}
    h1 {font-size: 1.2em; color: blue; font-weight: bold; text-decoration: underline; text-align: center}
    h2 {font.size: 1.1em; color: blue; font-weight: bold; text-decoration: none; text-align: center}

    plantilla.html:

    <DOCTYPE>
    <html>
    <head>
    <title>Page title</title>
    <link>
    </head>
    <body>
    <div>
    <div>Bienvenidos a mi Web</div>
    <div>Barra de Navegación</div>
    <div>
    <div>
    <ul>
  • <a>Enlace 1</a>
  • <a>Enlace 2</a>
  • <a>Enlace 3</a>
    </div>
    <h1>Esta será la zona principal de la web</h1>


    Primer párrafo de prueba para comprobar el funcionmiento de las propiedades aquí expuestas</p>
    <h2>Y subtítulo</h2>


    Nada más queda esperar que todo haya salido bien. Que los pa´rrafos funcionen debidamente. De otro modo estamos mal ¿capice?</p>
    </div>
    <div>Este es el pié de página</div>
    </div>
    </body>
    </html>
    • tostyarepa · · Solicitar retirada
    es lo mismo k me sucedia a mi no me funciona en la vista previa pero luego de subirla a la web resulta k si funciona :S

    no se pk. pero bueno! si ya la subiste a la red abre tu pagina con el navegador y ve si funciona^^


    EDIT: te falta colocar esto en los enlaces <a>enlace 1</a>
    andresgohi · · Solicitar retirada
    Gracias por la respuesta!
    Claro que aún no toy en condiciones de subir mi página. Más adelante lo comprobaré entonces.

    Thanks again.