Ver Mensaje Individual
  #2 (permalink)  
Antiguo 19/09/2011, 13:50
jhz1983
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: Barras laterales degradadas

bueno os pego el codigo completo css:

Código:
#lateralizq {
	width:10%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;		
	}
#contenedor {
	width: 80%;
	height:100%;
	position:absolute;
	top:0;
	left:10%;
	border:1px solid black;
	
	}
#lateralder {
	width: 10%;
	height:100%;
	position:absolute;
	top:0;
	right: 0;
	
	}
#barraizq
	{
	float:right;
	width:10px;
	height:100%;
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.33) 50%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.33)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* IE10+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* W3C */
	}

#barrader {
	float:left;
	width:10px;
	height:100%;
	background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(255,255,255,0.33) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.65)), color-stop(50%,rgba(255,255,255,0.33)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0.33) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0.33) 50%,rgba(255,255,255,0) 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0.33) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
	background: linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0.33) 50%,rgba(255,255,255,0) 100%); /* W3C */
	}
#nav	{
	width:100px;
	height:100%;
	float:left;
	border: 1px solid black;
	}
#cabecera {
	width:100%;
	height:125px;
	background-color: black;
	}
#contenido {
	width:100%
	height:100%;
		}



el div nav se sale por debajo del contenedor y los divs que contienen las barras laterales degradadas no se adaptan si la pagina crece