Tema: como ajustar esto?
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/10/2011, 13:03
DMH1983
 
Fecha de Ingreso: enero-2009
Mensajes: 40
Antigüedad: 15 años, 3 meses
Puntos: 0
como ajustar esto?
bien la verdad.. soy un desastre con la maquetación... estoy intentando hacer.. una maquetación básica de una página en 3 divs... 2 laterales con un degradado y el central donde iria todo el contenido.. la cosa está en que el lateral derecho se me corre a la izq y el degradado desaparece y queda en blanco.. quiero que el lateral derecho se quede fijo aunque haga la página más pequeña..

HTML
Código: 
<html>
	<head>
	<link rel="stylesheet" href="nuevocss.css" type="text/css">
	</head>

	<body>

		<div id="contenedor">

			<div id="lateralizq">
			</div>

			<div id="lateralder">
			</div>

			<div id="contenido">

				<div id="nav">
				</div>

				<div id="material">
				</div>
			</div>
		</div>
	</body>

</html>
CSS
Código: 
#contenedor { width:100%; height: auto; margin:auto; padding:0; background-color:black;}
 	
 	#lateralizq { width:10%; position:absolute; left:0;top:0; height:100%; background-color:green;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 */}
 	
 	#lateralder { width:10%; position:absolute; right:0; top:0; height:100%; background-color:red;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 */}
 	
 	#contenido { width:80%; min-width:800px; height:100%; background-color: blue;position: absolute; left:10%; top:0;}