estilos de a:

Hola foro.

Llevo ya un mes anclado en el mismo problema. Creo que voy a empezar a ser mal visto por aquí...

La presentación de las "a:" se muestra correcta, pero los problemas comienzan con el "hover".

Es como si la página no reconociera el ratón encima de las palabras del menú.

Tengo la "plantilla" de este modo:


<!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 la hoja estilo-general.css de este modo:


    <!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>



    Los problemas creo que son tres:

    1- El menu de las "a:" no reconoce el raton cuando este esta encima de las palabras
    2- La selección de las palabras muestra un recuadro punteado alrededor de estas sin que se modifique la imagen como deveria ser si siguiera las órdenes del comando "hover"
    3- Al tratar los elementos del menu como bloques

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

    para que quede marcada la selección ahunque el ratón no esté exactamente encima de la palabra, me aparece seleccionado el bloque cuando selecciono la palabra i con puntos en cursiva en forma de rectangulo. Es decir, lo mismo que para el hover. En lugar de aplicar las modoficaciones estilisticas indicadas, realiza un recuadro punteado indicando que reconoce la selección pero nada acerca del estilo.

    Además, en el caso de la selección en bloques, solo reconoce el bloque indicado cuando se selecciona la palabra. Es decir, que sabe que el alcance de la palabra abarca toda la linea. Pero si seleccionas la "linea" dónde se encuentra esta palabra, no la reconoce a ella, no reconoce nada de nada cuando esa es la funcion realmente deseada...

    Creo tener un gran problema con el "hover" y otro gran problema con la detección de la situación del "ratón" en el campo del menú lateral...


    Siento mucho la extensión, pero no me se explicar más escuetamente y no veo solución al tema.

    El tema de las a:menu li{} etc... ya lo he provado y el resultado és el mismo.


    Una ayuda porfavor!!!! :cry:
  • Un abrazo muy fuerte!
    Perdón, no anoté bién la hoja de estilos...

    Mi hoja de estilo-general.css és la siguiente:

    * {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 {}
    Un abrazo muy fuerte!
    En tu hoja de estilos cambia esta linea:
    a {color: brown ; text-decoration: none ; display: block;}

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


    Bye.
    Hola pitufo...

    primeramente gracias por tu atención!

    Digo peor porque con el resultado, al seleccionar el link solo selecciono la palabra en lugar de la linea entera.

    De este modo ahún estoy más lejos de lograr que pasando el ratón por algun lugar de la linea me reconozca el link que haya en alguna parte de esta. Ahora la linea no existe para el ratón.

    Y el otro problema persiste. El link sigue sin reconocer cuando esta seleccionado y cuando no. Bueno, sí coloca un punteado discontinuo, pero de estilos no quiere saber nada de nada...

    La hoja de estilos ha quedado del siguiente modo ahora:

    * {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: link {color: brown ; text-decoration: none ; display: block }
    a: visited {}
    a: hover {color: red ; text-decoration: underline ; background-color: silver }
    a: active {}

    Pero con la anterior, esta que añado ahora, me acerco más al resultado que espero, a pesar de estar ahún muy lejos:

    * {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 {}

    A ver si damos con la solución, yo sigo con las pruevas... Grácias pitufo!!!
    Un abrazo muy fuerte!
    A ver foro, el problema podria estar en la plantilla?

    Si no es por este hecho, no se me ocurre nada!
    Un abrazo muy fuerte!
    isalavedra escribió:A ver foro, el problema podria estar en la plantilla?

    Si no es por este hecho, no se me ocurre nada!
    Hola:
    Bueno, hice unas pruebas, creando un hoja de estilo y una página exactamente con los códigos que usted ha puesto en sus mensajes y aún poniendo el cursor encima de los enlaces, estos no hacían nada, por tanto, suponiendo que los códigos que usted ha puesto en los mensajes son exactamente los que tiene en su página y en su hoja de estilo-general, le recomiendo que revise los códigos en su página y en su hoja de estilo, pero no porque estén mal escritos, seguramente es algún espacio que usted ha dejado en algún código como por ejemplo,(y solo es un ejemplo):

    *{margin:0px;padding:0px;border:0px}
    Fíjese que los he puesto todo seguido, sin ningún espacio, pero si usted algún código lo tiene así:
    * {margin:0px;padding:0px;border:0px}
    Como ve el asterisco está separado de la llave que viene a continuación, ese tipo de situaciones hacen que los códigos no funcionen adecuadamente, se lo digo, porque al juntar yo sus códigos en la página y en la hoja de estilo que cree con sus códigos copiados literalmente de sus mensajes, estos si funcionan a la perfección.
    Los únicos que deben estar separados son en su hoja de estilo-general, los de la capa global, el 4px del auto
    de la capa menu el menu del li
    y en la misma capa menu el 4px del 0px y del 4px y del 6px.
    Pruebe revisando todo
    Saludos