Enlaces con fondo II

Hola a todos!

He creado este segundo espacio, porque Carlitozz inició en el anterior un nuevo tema y no quería confundir temas, preguntas y respuestas...

El hecho es que tu Pitufo me respondes que:

Hola.

Probé tu código y si funciona. No se que es lo que quieres hacer, pero los enlaces si se muestran como bloque.



Saludos.


Verás, la idea es que no se necesite estar exactamente sobre la palabra de selección del menú para que esta quede seleccionada. Es decir, que situando el ratón en la misma línea en la zona de menú, la señalización se realice de forma intuitiva...

Eso es lo que pretende la lección "Enlaces con fondo", no?

En mi ordenador, al seleccionar una palabra del menú, si queda seleccionada la línea entera ya que:

#navegacion {background-color: gray }

Pero si en lugar de estar "encima" mismo de la palabra estoy a su lado (siempre dentro del espacio menú) la palabra que quiero seleccionar no queda marcada de forma intuitiva. Y eso debería suceder ya que:

a {color: brown ; font-size: 1.3em; text-decoration: none; display: block }

No es así?? Es un problema que sólo tengo yo en mi ordenador??

Te repito los códigos:

PLANTILLA

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


    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 }
    #menu li {list-style:none ; margin: 4px 0px 4px 6px}
    a {color: brown ; font-size: 1.3em; text-decoration: none; display: block }
    a:link {}
    a:visited {}
    a:hover {color: red ;text-decoration: underline; background-color: silver }
    a:active {}
    #pie {background-color: brown}

    Espero haberme explicado bién... Dónde tengo el fallo?
  • Un abrazo muy fuerte!
    Hola.

    Si. Si funciona.


    El Problema es que así como lo tienes ahora no funciona con Internet Explorer 6 que supongo que es el navegador que estas utilizando.


    Solo agregarle al a {} height: 1em; y creo que con eso se solucionara tu problema.



    Saludos.


    .
    Eres un genio Pitufo!!!

    Va fenomenal...

    Gracias, gracias, gracias!
    Un abrazo muy fuerte!
    a {Height:1em;} = es la altura del elemento "a".


    traducido al español seria: La altura del los elementos "a" sera igual al tamaño que actualmente tiene el texto.

    Es solo un pequeño truco para que IE6 lo trate como un elemento de bloque.





    Saludos.


    .