Foros del Web » Creando para Internet » HTML »

Problema con CSS3 usando múltiples background-images

Estas en el tema de Problema con CSS3 usando múltiples background-images en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/08/2011, 23:18
 
Fecha de Ingreso: agosto-2010
Mensajes: 10
Antigüedad: 13 años, 8 meses
Puntos: 2
Pregunta Problema con CSS3 usando múltiples background-images

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 original
  1. nav#menu li.element{
  2.     display: block;
  3.     margin-left: 10px;
  4.     margin-right: 10px;
  5.     padding: 7px;
  6.     float: left;
  7.     height: 19px;
  8.     background: url('../../../images/admin/menu-left.png')  left no-repeat,
  9.                 url('../../../images/admin/menu-center.png') 15px 0px repeat-x;
  10. }

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

Última edición por Patonsky1; 28/08/2011 a las 23:33 Razón: FF (faggotry factory)
  #2 (permalink)  
Antiguo 30/08/2011, 01:18
 
Fecha de Ingreso: enero-2007
Mensajes: 64
Antigüedad: 17 años, 2 meses
Puntos: 1
Respuesta: Problema con CSS3 usando múltiples background-images

Con la propiedad overflow:hidden solucioné un problema parecido al tuyo. Lamentablemente en explorer no funciona, en chrome, safari, opera y firefox va bien
  #3 (permalink)  
Antiguo 31/08/2011, 08:32
 
Fecha de Ingreso: agosto-2010
Mensajes: 10
Antigüedad: 13 años, 8 meses
Puntos: 2
Respuesta: Problema con CSS3 usando múltiples background-images

No lo termino de ver... ¿Cual era tu problema?
  #4 (permalink)  
Antiguo 02/09/2011, 09:12
Avatar de DrFaust  
Fecha de Ingreso: septiembre-2011
Ubicación: Buenos Aires
Mensajes: 308
Antigüedad: 12 años, 7 meses
Puntos: 87
Respuesta: Problema con CSS3 usando múltiples background-images

Veo el problema, y no creo que exista una solución. Ahora bien, ya que estás usando CSS3, ¿qué te impide utilizar la propiedad border-radius para crear bordes redondeados en tus contenedores? Es soportada por casi todos los navegadores, y se degrada de maravillas.

Etiquetas: css, css3, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:43.