[SOLUCIONADO] Navbar con triangulo abajo

[SonrisaCs]

Buenas noches, quería saber cómo hacer un navbar parecido al de ésta imagen:



Lo que no me sale es poner el triángulo justo debajo de cada link.
La navbar la tengo codeada con <ul> y <li>.
Sé cómo hacer los triángulos pero no puedo ubicarlos exactamente debajo del texto centrados en el medio, desde ya gracias!

Dejo mi código:

Código CSS:

nav li:after {
    position: absolute;
    left: 50%;
    content: "\00a0";
    display: block;
    width: 0px;
    height: 0px;
    border-width:0px 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent #32a9de transparent;
}
 

Código HTML:

<nav>
    <ul>
    <li><a href="">Celulares</a></li>
    <li><a href="">Versus</a></li>
    <li><a href="">Sistemas Operativos (S.O.)</a></li>
    <li><a href="">ENLACE4</a></li>
    </ul>
    </nav>
 

Y una screen de cómo queda:

Se dan cuenta que no queda bien centrado? Ni idea por qué

PD: El rojo es sólo para que vean bien el div jajaja saludos!

[pzin]

Tienes dos opciones.

Una es usar calc() y la otra es poner un margen negativo a la izquierda:

Código CSS:

left: calc(50% - 10px)
/* O bien */
left: 50%;
margin-left: -10px;
 

La cosa es mover la mitad del triángulo a la izquierda, porque ahora mismo su parte izquierda está justo en el centro.

[Mikmoro]

Dudo que la posición absoluta sea la mejor solución. Si pones el gráfico y tu sitio de ejemplo es posible que haya una mejor manera de ubicarlo.

[pzin]

Mikmoro en este si que es la mejor solución, sobre todo al ser un pseudo-elemento (:after) que no forma parte del documento en si mismo.

En CSS moderno —no voy a llamarlo 3 — es muy habitual trabajar así con los pseudo-elementos.

[Mikmoro]

Me gustaría probar otras antes de estar seguro de que es la mejor solución. Habrá que ver qué pasa con navegadores, resolucinoes y tamaños de ventanas diferentes.

[pzin]

Yo presupongo que cada li tendrá una posición relativa, para hacer de contenedor, por eso no va a influir el tamaño de la ventana y demás.

[Mikmoro]

Si es así, y cada li tiene posición relativa para otorgar posición de referencia, imagino que las cosas se pueden colocar con respecto a él sin necesidad de posición absoluta, pero bueno, habría que saber exactamente cómo está todo.

[SonrisaCs]

Iniciado por pzin

Tienes dos opciones.

Una es usar calc() y la otra es poner un margen negativo a la izquierda:

Código CSS:

left: calc(50% - 10px)
/* O bien */
left: 50%;
margin-left: -10px;
 

La cosa es mover la mitad del triángulo a la izquierda, porque ahora mismo su parte izquierda está justo en el centro.

Muchas gracias pzin :) Me sirvió a la perfección, y el li está en position relative :)

[Mikmoro]

No tengo la fuente para probarlo pero, ¿habéis probado a pulsar control+ en el navegador para aumentar el tipo de letra, a ver si todo sigue bien (es algo habitual en cuanto a accesibilidad). No digo que no siga bien, sino si lo habéis probado, porque yo no tengo tus fuentes. Al usar px con el desplazamiento negativo para centrar, lo normal será que al aumentar o reducir se vuelva a descuadrar.

[pzin]

No se descuadra, por está siempre a la mitad (50%) restándole la mitad de su ancho (-10px).

http://jsfiddle.net/wv2ht

[Mikmoro]

Ah, ya. Lo que no entiendo entonces es qué es esto:
content: "\00a0";

Edito: ya veo: es un espacio en blanco de no separación. Entonces veo que no sé cómo se crea ese triángulo con los bordes y el espacio de no separación sin imágenes.
Por mi parte pues zanjado.

[SonrisaCs]

Iniciado por Mikmoro

Ah, ya. Lo que no entiendo entonces es qué es esto:
content: "\00a0";

Edito: ya veo: es un espacio en blanco de no separación. Entonces veo que no sé cómo se crea ese triángulo con los bordes y el espacio de no separación sin imágenes.
Por mi parte pues zanjado.

Bueno eso empieza a ser como un espacio en blanco, no entiendo bien como funciona, ya que lo saqué de un tutorial y si bien sirve, cuando quito eso los triángulos mágicamente desaparecen... Otra cosa que quiero destacar y ahora que veo bien se me presenta como duda, es que cuando presiono control+ se corren de lugar, o sólamente quitando unos pixeles de height a la ventana del navegador, osea minimizándola, cuando aprieto refresh los triángulos se corren, por qué será?
Img:

[pzin]

Seguramente tengas que añadirle a :after:

Código CSS:

bottom: 0
 

[SonrisaCs]

Iniciado por pzin

Seguramente tengas que añadirle a :after:

Código CSS:

bottom: 0
 

Otra vez, gracias por responder.
Le agregué bottom -10, porque sino quedaba dentro de la nav (lo gris oscuro) y no era lo que quería, pero sigue pasando lo mismo, al hacer ctrl+ y renovar la página se suben...

EDITO: Lo que veo es que si tiene el bottom: 0 no pasa eso, no queda visualmente como quiero, pero no se levanta cuando pongo zoom a la página

[pzin]

¿Lo tienes en algún sitio online para verlo in situ? Si cada li tiene una posición relativa no debería de moverse.

[SonrisaCs]

Iniciado por pzin

¿Lo tienes en algún sitio online para verlo in situ? Si cada li tiene una posición relativa no debería de moverse.

Ya lo solucioné, muchas gracias por la ayuda!