CSS - Línea vertical en menú horizontal

   
Vista:

Línea vertical en menú horizontal

Publicado por Martín (4 intervenciones) el 05/10/2014 23:36:40
Hola a todos.
Soy nuevo en esto del CSS y quizás esto os suene a tontería pero no caigo como hacerlo.
Estoy haciendo un diseño horixontal del tipo:

Cerrar sesión | Ayuda | Centro de seguridad

He creado el menú co un <ul> y <li>, con display:inline y list-style-type:none con sus respectivos padding.
Todo perfecto. Lo que no sé es cómo integrar y dónde la barra vertical. Lo he mirado en difrentes páginas y la barra no es selecionable con el cursor, así que supongo que está hecha con CSS.
He conseguido algo parecido dándole un border-right a la <li> pero me parece un poco chapucero y la barra sí que se puede seleccionar con el cursor, por lo que deduzco que se hace de otra manera.

Por ejemplo aquí:
http://www.sport.es/es/
Las barras que separan PORTADA BARÇA MADRID ESPAÑOL

¿Alguien me puede indicar como hacerlo?
Gracias de antemano.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Línea vertical en menú horizontal

Publicado por xve (352 intervenciones) el 06/10/2014 08:05:07
Hola Martin, esa barra a la que haces referencia, es el borde del <li>... en la pagina sport.es es:
1
border-left: 1px solid rgb(255, 255, 255);

Todos los menus que han necesitado de esa separación, los hemos realizado siempre de este modo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Línea vertical en menú horizontal

Publicado por Martín (4 intervenciones) el 06/10/2014 10:43:13
Gracias xve.
Lo había hecho así dándole al padding de la izquierda y de la derecha el mismo valor para que la línea quedase centrada.
Para que no apareciese la última línea detrás de la última <li>, creé la siguiente regla:

1
2
3
li+li+li{
border-left:none;
}


Supongo que es lo correcto.
Pensaba que había otra manera de hacerlo porque no veía el código muy limpio.

Gracias por la respuesta.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Línea vertical en menú horizontal

Publicado por xve (352 intervenciones) el 06/10/2014 11:24:37
De la manera que has utilizado, siempre tendrás que acordarte de modificar ese estilo cuando añadas o elimines opciones del menu. La manera correcta a mi modo de ver seria:

1
li:last-child {border-left:none;}

De esta manera, el ultimo nunca tendrá el borde, sean cuantas sean las opciones de menú.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Línea vertical en menú horizontal

Publicado por Martín (4 intervenciones) el 06/10/2014 11:32:04
Mucho mejor.
Solo conocía el first-child de los pseudoelementos.

Gracias de nuevo xve.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar