Tema: Crear menú horizontal, no funciona bien
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 13/01/2016, 08:36
Avatar de BramSt
BramSt
 
Fecha de Ingreso: abril-2015
Mensajes: 117
Antigüedad: 9 años
Puntos: 5
Respuesta: Crear menú horizontal, no funciona bien
Hola de nuevo


PD: Gracias por tu respuesta, g3kdigital, se ve que hemos publicado a la vez XD.

Si, ya he visto que son muchos más.

Ya tengo el tema un poco más comprendido (creo). El ejercicio está casi bien pero sigue manteniendo el pequeño fallo del hueco (es decir, que cuando se pasa el puntero por encima de la caja, cambia de color como se describe con :hover, pero queda ese pequeño hueco azul), y la solución que me dabas, g3kdigital, no me ha funcionado.

Por si no se me ha entendido bien, el problema es este (mi profesora tampoco ha conseguido solucionarlo):



Mirando el modelo 3d con firefox, lo que básicamente ocurre es que entre los li queda un hueco, y hace que se vea el azul de la ul:



He intentado de todo (inlcuyendo la solución dada por el compañero, como digo), pero no consigo quitarlo.


¿Qué hago mal?

Puede que tenga que ver con los bordes, ya que la primera ul si se llena de rojo correctamente... pero no sé cómo arreglarlo.

Aquí tenéis el codigo CSS tal y como está ahora:

Código CSS: 
Ver original
  1. body
  2. {
  3.     font-family:papyrus;
  4. }
  5.  
  6. #menu
  7. {
  8.     background-color:#58D3F7;
  9.     list-style-type:none;
  10.     padding:0;
  11.     display:inline-block;/*si lo doy solo inline los bordes del li sobrepasan al meter padding*/
  12.     border-top:1px solid blue;
  13.     border-bottom:1px solid blue;
  14.     border-left:1px solid blue;
  15.     
  16.     /*letter-spacing:-0,35em;*/
  17.     
  18. }
  19.  
  20. #menu li
  21. {
  22.     display:inline-block;
  23.     
  24.     margin:0;/*no son los margenes lo del hueco, que es?*/
  25.     
  26.     
  27.     /*margin-right:-0,35em;*/
  28.     
  29.     /*padding:4px;*/
  30.     
  31.     
  32.     
  33.     
  34.     
  35. }
  36.  
  37. #menu li a
  38. {
  39.     text-decoration:none;
  40.     display:block;
  41.     padding:6px 10px;
  42.     margin:0;
  43.     border-right:1px solid blue;
  44.     
  45.     
  46. }
  47. /*una id a la a sería por ejemplo a#identificador{}*/
  48.  
  49. #menu li a:hover
  50. {
  51.     background:red;
  52.     
  53. }

Y el HTML:
Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <title>
  4.         </title>
  5.         <link rel="stylesheet" type="text/css" href="Estilos.css"/>
  6.         
  7.     </head>
  8.     <body>
  9.     
  10.             <ul id="menu">
  11.                 <li><a href="#" title="Enlace genérico">Inicio</a></li>
  12.                 <li><a href="#" title="Enlace genérico">Comentarios</a</li>
  13.                 <li><a href="#" title="Enlace genérico">Noticias</a></li>
  14.                 <li><a href="#" title="Enlace genérico">Contacto</a></li>
  15.                 <li><a href="#" title="Enlace genérico">Acerca de</a></li>
  16.                 
  17.             </ul>
  18.         
  19.     </body>
  20. </html>

Muchas gracias.