Regresar a la página ComoCrearTuWeb.com
Resultados 1 al 3 de 3

Tema: Problema con enlaces

  1. #1
    Recien Llegado! Habitante
    Fecha de Ingreso
    19 feb, 13
    Mensajes
    17
    Poder de Reputación
    13

    Problema con enlaces

    Hola a todos!! A ver si me podéis ayudar con esta duda. Tengo un menú horizontal (en construcción) y tengo puesto los enlaces en estado hover para que al poner el ratón encima cambie de color el fondo del enlace en cuestión. Lo que no sé es porqué el fondo del enlace no ocupa toda la casilla en la que está ese enlace, sólo rellena la parte de las letras del enlace y me gustaría que ocuparía todo. Os dejo el código

    Código en html:

    Código HTML:
    <div id="navegacion">
        <ul><li><a href="#">Inicio</a></li><li><a href="#">Productos</a></li><li><a href="#">Cat&aacutelogos</a></li><li><a href="#">Contacto</a></li></ul>
       </div>
    Código en css

    Código HTML:
    #navegacion {background-color: white ; border: black 1px solid; margin:10px 0px;height:30px; font-family:"Times New Roman", Times, serif ;font-weight: bold;}
    #navegacion ul {margin-left: 300px;} 
    #navegacion li {float:left; list-style:none; margin:0px 0px 0px 0px;border-right: black 1px solid; border-left: black 1px solid;padding:5px;}
    
    a {color: #3537FF ; text-decoration: none; display: block;}
    a:link {}
    a:visited {color: Blue;}
    a:hover { color: #00008B; text-decoration: none; background-color: #9B9CFF;}
    a:active {}

    Espero haberme explicado bien.

    Un saludo y gracias!!

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,046
    Poder de Reputación
    27
    Hola:

    Esto funciona:

    Código HTML:
    #navegacion {background-color: white ; border: black 1px solid; margin:10px 0px; font-family:"Times New Roman", Times, serif ;font-weight: bold;}
    #navegacion ul {margin-left: 300px;}
    #navegacion li:first-child { border-left: 1px solid black; }
    #navegacion li {float:left; list-style:none; margin:0px 0px 0px 0px;border-right: black 1px solid;}
    #navegacion ul:before,
    #navegacion ul:after { content: ' '; display: table;	}
    #navegacion ul:after { clear: both; }
    a {color: #3537FF ; text-decoration: none; display: block; padding: 5px;}
    a:link {}
    a:visited {color: Blue;}
    a:hover { color: #00008B; text-decoration: none; background-color: #9B9CFF;}
    a:active {}

  3. #3
    Recien Llegado! Habitante
    Fecha de Ingreso
    19 feb, 13
    Mensajes
    17
    Poder de Reputación
    13
    Hola skaparate, sí que es verdad que el código que me pones funciona correctamente en Firefox pero en el Explorer no me aparece el borde de la izquierda del primer enlace. ¿Alguna solución? Y otra cosa, si aumento el tamaño de mi menú, ¿qué debo hacer para que se adapte tu código? He estado probando a aumentar el padding que pones a 5px y parece que funciona bien, ¿con eso bastaría?

Temas Similares

  1. problema con enlaces
    Por rojoroker en el foro Foro General
    Respuestas: 3
    Último Mensaje: 12/01/2010, 22:19
  2. Problema con los enlaces :(
    Por CrisMg en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 3
    Último Mensaje: 16/07/2009, 21:17
  3. problema con los enlaces
    Por ganesha en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 3
    Último Mensaje: 01/09/2008, 21:10

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •