Imagenes en Menu por CSS

sebaturen · #1 (**permalink**) 26/07/2012, 20:38

Holas, estaba buscando la forma de hacer que en un CSS me aparezca una imagen del menú a la izquierda y al a derecha para cada ítem, por ejemplo:

Se ve que tiene 2 corchetes a la derecha y a la izquierda y este es dedicado para cada item, el punto es que por HTML es muy sencillo, pero como estoy trabajando para una plantilla de un sistema auto administrable, requiero que para cada menú que se cree me aparezcan las imágenes a cada lado, no se si se entiende.

Espero puedan ayudarme y se algo sumamente sencillo ^^

furoya · #2 (**permalink**) 26/07/2012, 21:23

Sin ver el código no se te puede ayudar mucho. Parece que tienes una limitación para hacer ese menú, pero no llego a entender cuál es.

Para empezar, busca en CSS información sobre pseudo elementos :after y :before, con su content.

Estaba pensando (pero tendría que probarlo), que también se puede hacer un borde. Hay que ver cómo queda.

sebaturen · #3 (**permalink**) 26/07/2012, 21:42

Hola furoya, gracias por atender mi tema, mira no se que código buscas exactamente, ya que e estado probando con CSS y al final no tengo nada mas de lo base, tamaños, posiciones, etc.

Por otro lado, crearle un borde no me funcionaria ya que es una "imagen" con cierto diseño determinado.

Voy a revisar lo que me dejaste, desde ya muchas gracias.

sebaturen · #4 (**permalink**) 26/07/2012, 22:14

Amigo Furoya, funciona perfecton con :after y :before ^^ GRACIAS!

Tema solucionado ^^

furoya · #5 (**permalink**) 28/07/2012, 18:01

De nada. Qué bueno que te sirviera.

Me quedé pensando en eso de los bordes. Recién me tomé unos minutos y lo probé. Ya que estoy lo posteo acá, para que no quede medio descolgado en otro post.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<style type="text/css">
#menu {background-color: black; padding: 12px; font: normal 14px/120% sans-serif; }
#menu span {color: white; margin: 10px; border-color: black gray; border-width: 2px; 
border-style: solid; padding:5px; border-radius: 20px / 10px; cursor: pointer; }
</style>
</head>
<body>
<span id=menu><span>ALFA</span><span>MIKE</span><span>ZULU</span></span>
</body>
</html>

A border-radius puede que haya que agregarle un prefijo para que se vea en navegadores viejos; no estoy seguro.
Y en IE no sé si anda ni con prefijos, supongo que en el 9 sí.