Foros del Web » Creando para Internet » CSS »

PNG transparente pisa al de debajo

Estas en el tema de PNG transparente pisa al de debajo en el foro de CSS en Foros del Web. Buenas chicos, os expongo el problema que tengo desde hace tiempo, y para el cual ya he probado malabarismos en css de todo tipo sin ...
  #1 (permalink)  
Antiguo 28/10/2009, 04:44
 
Fecha de Ingreso: mayo-2009
Mensajes: 7
Antigüedad: 8 años, 7 meses
Puntos: 0
Sonrisa PNG transparente pisa al de debajo

Buenas chicos, os expongo el problema que tengo desde hace tiempo, y para el cual ya he probado malabarismos en css de todo tipo sin resultado.
Tengo una web líquida, maquetada en 3 columnas, las 2 de los lados de ancho fijo, y la del centro extensible. El fondo de cada columna es un PNG transparente, muy largo para que se vea siempre aunque la resolucion sea grande.
El problema está en que pisa la transparencia del PNG de las otras dos columnas, como si una transparencia transparentase a la otra, y queda muy feo.
Para solucionar el problema con la columna izquierda, hice que la imagen de la columna central empezase a verse desde 20px a partir de la izquierda (que es lo que mide la imagen fija de la izquierda), ¿como podria hacer lo mismo con la de la derecha? O alguna otra alternativa. Si pongo en la imagen central: repeat-x, no me deja darle un margen de separacion. Dejo aquí el código:

Código PHP:
<div style="float:left;width:100%;height:284px;background:url('top_repe.jpg') 50px 0px no-repeat">

<
div style="float:left;width:20px;height:284px;background:url('top_der.jpg')"></div>
<
h1>Cabecera</h1>
<
div style="right:left;width:20px;height:284px;background:url('top_izq.jpg')"></div>

</
div
Ayuda plis. Gracias adelantadas.
  #2 (permalink)  
Antiguo 28/10/2009, 06:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: PNG transparente pisa al de debajo

Hola Quamis
En primer lugar, el hecho de poner los estilos en el body, no es utilizar css. Es pervertir su razón de ser: separar los contenidos de las propiedades de presentación.

Dices que utilizas una estructura de tres columnas, sin embargo el html que pones son dos cajas encerradas en otra y el h1 dentro de esta última pero fuera de las otras dos
Código html:
Ver original
  1. <div><!-- caja contenedora de las otras dos y h1-->
  2.        <div><!-- caja sin contenido --></div>
  3.         <h1>Cabecera</h1><! hermana del div anterior -->
  4.        <div><!-- caja sin contenido --></div>
  5. </div><!-- cierre de la caja contenedora de las otras dos y h1 -->

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 28/10/2009, 09:01
 
Fecha de Ingreso: mayo-2009
Mensajes: 7
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: PNG transparente pisa al de debajo

Ya, he puesto los estilos en las capas para que vierais todo junto, que al ser poco código supuse que era más claro de ver, los estilos los tengo en un fichero aparte siempre.
Son 3 columnas, pero en una sóla capa, es decir, estarían las 2 de los lados, que son esos divs de 20px, y la central que es el ancho restante y extensible. Si fueran 3 capas tendría problemas con el ancho de la central, ya que siendo líquida, si le doy un ancho con porcentaje no me encaja nunca con la columna derecha, que es fija.
El problema de todas formas sigue siendo la transparencia, olvidaos del ejemplo incluso. ¿Hay alguna forma para que no se pisen los PNGs si se colocan uno sobre otro? Que sólo se vea el de arriba.
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 23:42.