[SOLUCIONADO] Crear menú horizontal, no funciona bien

BramSt · #1 (**permalink**) 12/01/2016, 15:50

Hola, pues estoy haciendo un pequeño código de un menú horizontal muy básico, pero no me termina de salir bien.

El ejercicio es el siguiente, y además tiene que cambiar el color del li cuando pase el ratón.

Y tengo estos problemas:

-cuando tengo el menú construído, hay un pequeño hueco que entre los li que no consigo eliminar, y se hace patente al pasar el raton por encima.

-al hacer un padding para tratar de ensanchar los enlaces, después al pasar el ratón resulta que me colorea sobrepasando los bordes del propio menú... y si hago el padding al li, es el propio borde del li el que sobrepara al menu. Vamos, que hay algo que no va bien con esto.

-Por último, me gustaría que me explicárais a la hora de hacer un menú horizontal, la diferencia entre hacer un float:left y un display:inline.

Muchas gracias. Aquí teneis los códigos:

Código HTML:

Ver original<html>
    <head>
        <title>
        </title>
        <link rel="stylesheet" type="text/css" href="Estilos.css"/>
        
    </head>
    <body>
    
            <ul id="menu">
                <li><a href="#" title="Enlace genérico">Inicio</a></li>
                <li><a href="#" title="Enlace genérico">Elemento 2</a></li>
                <li><a href="#" title="Enlace genérico">Elemento 3</a></li>
                <li><a href="#" title="Enlace genérico">Elemento 4</a></li>
                <li><a href="#" title="Enlace genérico">Elemento 5</a></li>
                <li ><a href="#" title="Enlace genérico">Elemento 6</a></li>
            </ul>
        
    </body>
</html>

Y el CSS:

Código CSS:

Ver originalbody
{
    font-family:papyrus;
}
 
#menu
{
    background-color:#58D3F7;
    list-style-type:none;
    padding:0;
    display:inline;
    border-left:1px solid blue;
    border-top:1px solid blue;
    border-bottom:1px solid blue;
    
}
 
#menu li
{
    display:inline;
    border-right:1px solid blue;
    
    /*padding:4px;*/
    
    
    
    
    
}
 
#menu li a
{
    text-decoration:none;
    
    /*padding:4px;*/
    
    
    
}
 
#menu li a:hover
{
    background-color:red;
}

g3kdigital · #2 (**permalink**) 12/01/2016, 17:04

1ro reemplaza display:inline por display:inline-block, inline es para definir un texto (cosa que no puede ser un menu) e inline-block es para que los elementos bloques, se coloquen uno al lado del otro, perdiendo entre cosas su ancho:100% y este atributo queda determinado por el contenido o por el ancho que especifiquemos, además de poder recibir propiedades como: padding, border, entre otros.

2do La razón de que el hover sobrepase el ancho del li, era por el display: inline del .menu, prueba como te dije a cambiarlo por inline-block.

3ro No intentes, darle paddging a los LI, sino al enlace y a este añadele la propiedad: display: block o inline-block. Eso te quitara dolores de cabeza en cuanto accebilidad, vistas moviles y hovers.

4to La diferencia entre float e inline-block, es que el primero "saca" a los elementos del flujo normal del documento y los flota como globos, es decir hacia arriba. Eso evita el espacio entre objetos que comentas, pero añade un problema y es que automaticamente al elemento siguiente sino tiene float, de igual manera lo flota, tienes siempre al final de usar un float, añadir un elemento que limpie los flotados "clear:both", esto es un problema que esta bien documentado en la web. El segundo como te dije, hace que los elementos se comporten como bloques (div) pero a la vez como textos, por eso se colocan uno al lado del otro, pero los textos siempre tienen un espacio por defecto entre sus caracteres (por eso el espacio blanco), para eliminarlo tienes varias opciones, solo colocare las más usuales:

Código CSS:

Ver original.padre /*en tu caso el ul*/
{
font-size: 0;
letter-spacing: -1px; /*o el que quieras*/
}
 
.hijo /*en tu caso los li*/
{
font-size: initial;
letter-spacing: normal;
}

Código CSS:

Ver original.padre
{
letter-spacing: -0.35em; /*depende de la tipografia que uses, pero normalmente es este*/
}

Código CSS:

Ver original.hijo
{
margin-right: -0.35em; /*reitero que depende de la tipografia que uses*/
}

Cualquier otra duda, me comentas.

BramSt · #3 (**permalink**) 12/01/2016, 18:05

Muchísimas gracias, compañero.

Yo no sabía que existía un display: inline-block. Tampoco nos lo han enseñado en clase. Hasta ahora sólo conocía inline y block. La diferencias de efectos entre los display para listas me están volviendo loco también.

Voy a estudiarme bien todo lo que me has puesto y a ver si pillo las diferencias entre los diferentes displays, que ahora veo que son al menos 3...

Y si no me sale, te pregunto :)

g3kdigital · #4 (**permalink**) 13/01/2016, 08:34

En realidad son muchos más:

inline
block
flex
inline-block
inline-flex
inline-table
list-item
run-in
table
table-caption
table-column-group
table-header-group
table-footer-group
table-row-group
table-cell
table-column
table-row
none
initial
inherit

Puedes estudiar que hace cada uno y estudiar su comportamiento aquí:

http://www.w3schools.com/cssref/pr_class_display.asp

BramSt · #5 (**permalink**) 13/01/2016, 08:36

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 originalbody
{
    font-family:papyrus;
}
 
#menu
{
    background-color:#58D3F7;
    list-style-type:none;
    padding:0;
    display:inline-block;/*si lo doy solo inline los bordes del li sobrepasan al meter padding*/
    border-top:1px solid blue;
    border-bottom:1px solid blue;
    border-left:1px solid blue;
    
    /*letter-spacing:-0,35em;*/
    
}
 
#menu li
{
    display:inline-block;
    
    margin:0;/*no son los margenes lo del hueco, que es?*/
    
    
    /*margin-right:-0,35em;*/
    
    /*padding:4px;*/
    
    
    
    
    
}
 
#menu li a
{
    text-decoration:none;
    display:block;
    padding:6px 10px;
    margin:0;
    border-right:1px solid blue;
    
    
}
/*una id a la a sería por ejemplo a#identificador{}*/
 
#menu li a:hover
{
    background:red;
    
}

Y el HTML:

Código HTML:

Ver original<html>
    <head>
        <title>
        </title>
        <link rel="stylesheet" type="text/css" href="Estilos.css"/>
        
    </head>
    <body>
    
            <ul id="menu">
                <li><a href="#" title="Enlace genérico">Inicio</a></li>
                <li><a href="#" title="Enlace genérico">Comentarios</a</li>
                <li><a href="#" title="Enlace genérico">Noticias</a></li>
                <li><a href="#" title="Enlace genérico">Contacto</a></li>
                <li><a href="#" title="Enlace genérico">Acerca de</a></li>
                
            </ul>
        
    </body>
</html>

Muchas gracias.

g3kdigital · #6 (**permalink**) 13/01/2016, 09:30

:D BramSt en el css que usas en los margenes utilizas "," (coma) y no "." (punto) por eso no ves cambios. Sin embargo debido a tu tipografía "papyro" va a ser más complicada usar esta solución, prueba la primera que te muestro:

Código CSS:

Ver original.padre{font-size:0} .hijo{font-size:16px /*o lo que quieras*/}

Recuerda que padre es "ul" e hijo "li".

Otra cosa que puedes hacer es reordenar el código de manera que no hayan espacios vacios entre las etiquetas li, así:

Código HTML:

Ver original<ul id="menu">
    <li>
         <a href="#" title="Enlace genérico">Inicio</a>
    </li><li>
         <a href="#" title="Enlace genérico">Comentarios</a>
    </li><li>
          <a href="#" title="Enlace genérico">Noticias</a>
    </li><li>
          <a href="#" title="Enlace genérico">Contacto</a>
    </li><li>
          <a href="#" title="Enlace genérico">Acerca de</a>
    </li>              
</ul>

Me cuentas:

BramSt · #7 (**permalink**) 13/01/2016, 12:47

Cita:

Iniciado por g3kdigital

:D BramSt en el css que usas en los margenes utilizas "," (coma) y no "." (punto) por eso no ves cambios

Ni cuenta me había dado jajajajja.

Vale, esta primera solución la estudio luego, ahora según la miro no la entiendo mucho... ¿Poner una font size en un elemento en el que no hay texto propiamente dicho? (el ul). ¿Por qué? ¿Qué consigo exactamente con ese código aparte de quizá agrandar la fuente? (Luego lo pruebo).

La segunda, la de no dejar huecos entre los li, ha funcionado perfectamente... pero, ¿me explicas eso por favor? Me quedo totalmente descolocado... ¿Cómo es que se creaba un hueco entre los li por simplemente tabular el HTML?

Tengo la impresión de que se me pasa algo muy básico que mi profesora o no se ha dado cuenta o tampoco conoce...

g3kdigital · #8 (**permalink**) 13/01/2016, 14:41

Es normal que tu profesora no lo conozca. Y sí, es normal lo de font-size, recuerdas que te dije la primera vez que te respondí y es que display: inline-block transforma los elementos bloque como si fueran textos

Cita:

Iniciado por g3kdigital

... El segundo como te dije, hace que los elementos se comporten como bloques (div) pero a la vez como textos, por eso se colocan uno al lado del otro, pero los textos siempre tienen un espacio por defecto entre sus caracteres (por eso el espacio blanco)...

Algo muy parecido pasaba con display:inline, solo que este solo hace que se comporten como textos únicamente y no acepten atributos como padding, bordes, ancho, alto, etc.

De hecho creo que es la mejor solución debido a la fuente irregular que usas: Papyrus, porque lo de acomodar el html, en realidad para fines prácticos no tiene mucho sentido.

Para explicarte como funciona habría que leer la documentación oficial de la w3c o leete este otro articulo que es muy bueno y explica muchas cosas:

https://escss.blogspot.com/2012/03/d...empeno-en.html

Es uno de los más completos en español, como verás no hay una solución estable y siempre dependerá del caso.

Recuerda: display es una forma de decirle al navegador que un elemento adquirirá propiedades inherentes de otro elemento diferente, de hecho puedes decirle que una etiqueta párrafo P, se comporte como celda de tabla display: table-cell o como item de lista display:list-item

Como en este pen que hice de ejemplo: http://codepen.io/g3kdigital/pen/LGjOKZ?editors=110

Otro muy nuevo es usar display:flex, que elimina todos esos problemas de usar float, inline-block, pero al ser tan nuevo no es retrocompatible con versiones viejas de navegadores.

BramSt · #9 (**permalink**) 13/01/2016, 16:11

Muchas gracias compañero. Más para estudiar, y yo encantado :)

¿Entonces inline hace que se comporten como textos o simplemente hace que ocupe en el flujo sólo su propia anchura de contenido y no todo el bloque? Es lo que yo tenía entendido...

Yo como miro mucho por mi cuenta ya ando probando las media queries, que son un arma muy muy buena parece ser.

No obstante, puedes explicarme lo que pasaba con el li al tabularlo y el hueco ese, que es lo que más desconcertado me tiene?

Muchas gracias :) Si te pudiera dar mil puntos te los daba XD

BramSt · #10 (**permalink**) 15/01/2016, 14:33

Bueno, marco el tema como solucionado. Si alguien pudiera explicarme por qué se crean huecos entre los li de una lista horizontal por tabular, se lo agradecería.

Muchas gracias!