Foros del Web » Creando para Internet » CSS »

DIV líquido con sombra

Estas en el tema de DIV líquido con sombra en el foro de CSS en Foros del Web. Buenas, La idea es hacer una columna con sombras a los laterales, y esta columna debe crecer a lo ancho en función de la resolución, ...
  #1 (permalink)  
Antiguo 16/12/2010, 17:36
 
Fecha de Ingreso: diciembre-2010
Mensajes: 8
Antigüedad: 13 años, 3 meses
Puntos: 0
Pregunta DIV líquido con sombra

Buenas,

La idea es hacer una columna con sombras a los laterales, y esta columna debe crecer a lo ancho en función de la resolución, es decir, que sea líquida. Y al mismo tiempo que crezca totalmente de forma vertical (hasta la parte inferior siempre)

Adjunto captura:
[URL=http://img580.imageshack.us/img580/9448/dibujokww.jpg][IMG]http://img580.imageshack.us/img580/9448/dibujokww.th.jpg[/IMG][/URL]

El problema que hay (que quizá no se aprecie bien porque los degradados son muy pequeños) es que los degradados no crecen verticalmente hasta el final de la página

Este es el código

HTML

Código HTML:
Ver original
  1. <div id="wrap">
  2.     <div id="izq"></div>
  3.     <div id="drc"></div>
  4.     <div id="cnt"><p>Texto de prueba</p> </div>
  5. </div>


CSS

Código CSS:
Ver original
  1. #wrap {
  2. width: 90%;
  3. min-height: 100%;
  4. margin:0px auto;
  5. height:100%;
  6. }
  7.  
  8. #izq{
  9. float: left;
  10. width: 5px;
  11. height: 100%;
  12. background: url("./shadow-l.png") repeat-y scroll left top transparent;
  13. }
  14.  
  15. #drc{
  16. float: right;
  17. width: 5px;
  18. height: 100%;
  19. background: url("./shadow-r.png") repeat-y scroll right top transparent;
  20. }
  21.  
  22. #cnt{
  23. padding: 20px;
  24. overflow: hidden;
  25. background: none repeat scroll 0pt 0pt rgb(204, 204, 204);
  26. }

¿Sabéis alguna manera de solucionar esto?

Muchas gracias
  #2 (permalink)  
Antiguo 16/12/2010, 21:11
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años
Puntos: 21
Respuesta: DIV líquido con sombra

Edita y pon bien tu enlace a la imagen. A demás, puede poner una imagen mas grande.? gracia.s
  #3 (permalink)  
Antiguo 17/12/2010, 14:39
 
Fecha de Ingreso: diciembre-2010
Mensajes: 8
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: DIV líquido con sombra

Que raro, en la vista previa del mensaje aparecía...

Vuelvo a copiar el código y estilos todo junto, listo para copiar, pegar, guardar como htm y abrir para verlo idéntico:

Código HTML:
<html>
<head>
	<title>Prueba de columnas con sombra</title>

<!-- CSS -->
<style type="text/css" id="vbulletin_css">

body{
	margin:0px
}

p{
	margin:0px;
	padding:0px;
}

#wrapper {
	width: 90%;
	margin: 0px auto;
	height: 100%;
}

#izq{
	background: url("http://img547.imageshack.us/img547/9636/shadowleft.png") repeat-y scroll 0 0 transparent;
	float: left;
	height: 100%;
	width: 20px;
}

#drc{
	background: url("http://img8.imageshack.us/img8/8906/shadowright.png") repeat-y scroll 0 0 transparent;
	float: right;
	height: 100%;
	width: 20px;
}

#cnt{
	background: none repeat scroll 0 0 #EEEEEE;
	height: 100%;
	overflow: hidden;
	padding: 40px;
}



</style>


</head>

<body>

<div id="wrapper">
	<div id="izq"></div>
	<div id="drc"></div>
	<div id="cnt"><p>Contenido</p></div>
</div>

</body>
</html> 
Si abrís ese parece que está todo correcto, no?
el problema viene que cuando crece por el contenido (substituid el texto por uno lo suficientemente largo y lo veréis), que los degradados de los laterales no crecen más ([URL="http://img217.imageshack.us/img217/6021/capturael.jpg"]ver la imagen[/URL])

Conocéis alguna solución?

PD: lo he probado en Mozilla Firefox 3.6.13

Etiquetas: sombra
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 11:28.