Buenas!
Ando haciendo los clásicos menúes de tres piezas: izquierda, centro que se repite, y derecha, y me gustaría hacerlo con los nuevos estándares y sus ventajas (gastar muchas menos divs, etiquetas semánticas, etc.
El caso es que estoy haciendo un pequeño menú con un borde redondeado a cada lado, y tengo pensado hacerlo con un solo elemento, y no con tres.
El CSS que tengo es:
Código CSS:
Ver originalnav#menu li.element{
display: block;
margin-left: 10px;
margin-right: 10px;
padding: 7px;
float: left;
height: 19px;
background: url('../../../images/admin/menu-left.png') left no-repeat,
url('../../../images/admin/menu-center.png') 15px 0px repeat-x;
}
El problema es que, como imagináis, el borde redondeado tiene el fondo transparente. La imagen menu-center.png tiene la propiedad de repetirse en el eje X, así que hace lo que le mandan, y se estira hasta tapar el trozo transparente de la primera imagen, vamos, que las coordenadas no funcionan. Sólo funcionan en este eje cuando el repeat es none.
¿Me estoy dejando algo? ¿Es directamente imposible y voy a tener que crear tres elementos como se ha hecho toda la vida? Me gustaría por una vez tener un diseño completo, y un HTML que tenga las mínimas etiquetas posibles, por eso de legibilidad, que sea fácil de editar, carga, que los spiders se lien menos, aprender, etc.
¿Alguien conoce algo sobre el tema? Ando corto de pelas, pero Dios os lo pagará ^^
EDIT: si no veis el problema, decídmelo y subo imágenes, OYGAN
EDIT2: Oh, y acabo de descubrir los css border-image, pero nada