Foros del Web » Creando para Internet » CSS »

Diseño Liquido: Alguien q entienda los porcentajes por favor!!

Estas en el tema de Diseño Liquido: Alguien q entienda los porcentajes por favor!! en el foro de CSS en Foros del Web. Hola a todos! Sigo intentando armar una maqueta con diseño liquido... ya tengo un producto relativamente funcional pero me quedan algunos detalles... ante nada, este ...
  #1 (permalink)  
Antiguo 10/07/2007, 23:41
 
Fecha de Ingreso: diciembre-2004
Mensajes: 721
Antigüedad: 19 años, 3 meses
Puntos: 2
Diseño Liquido: Alguien q entienda los porcentajes por favor!!

Hola a todos!

Sigo intentando armar una maqueta con diseño liquido... ya tengo un producto relativamente funcional pero me quedan algunos detalles... ante nada, este es el código:


Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Liquid Test</title>



<style type="text/css">
HTML, BODY {
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
	padding: 0;
}

BODY {
	font: 11px tahoma, arial, sans-serif;
	background-color: #43505D;
	color: #525050;
}


/****************************************
 *										*
 *			CONTENEDORES				*
 *										*
 ****************************************/

#contenedor {
	width: 100%;
	height: 100%;
}

#head {
	width: 100%;
	height: 12%;
	background-color: #ffffff;
}

#toolbar {
	width: 100%;
	height: 3%;
	background-color: blue;
}

#cuerpo {
	width: 100%;
	height: 78%;
	background-color: maroon;
}

#footer {
	width: 100%;
	height: 7%;
	background-color: green;
}

.A {
	width: 20%;
	height: 100%;
	background-color: gray;
	float: left;
}

.B {
	width: 80%;
	height: 100%;
	background-color: orange;
	float: left;
}

.B1 {
	width: 98%;
	height: 98%;
	background-color: purple;
}


</style>

</head>
<body>

	<div id="contenedor">

		<div id="head"></div>
	
		<div id="toolbar"></div>

		<div id="cuerpo">
			<div class="A"></div>

			<div class="B">
				<div class="B1">

				</div>
			</div>

		</div>

		<div id="footer"></div>

	</div>

</body>
</html>

Todo va bien hasta que tengo que trabajar con la div "B1". Lo que yo pretendo es que la div tenga un margen de 1% con respecto a la div "B", su contenedora, pero parece que Internet Explorer considera valores diferentes a firefox.

¿Como puedo hacer que "B1" quede centradita con un margen de pequeño sin que se me deforme todo?


La verdad es que vengo a los ponchasos con este tema de los diseños liquidos... estoy investigando mucho en google y este foro y logre solucionar muchos problemas pero cada vez aparecen más cosas... ¿alguno tiene un buen link ó una buena lista de consejos a tener en cuenta para lograr un diseño liquido BIEN hecho?


desde ya MUCHAS GRACIAS a quien sepa darme una mano! :)

Un saludo atento!
  #2 (permalink)  
Antiguo 11/07/2007, 08:21
hq1
 
Fecha de Ingreso: abril-2007
Ubicación: Madrid, España
Mensajes: 107
Antigüedad: 17 años
Puntos: 0
Re: Diseño Liquido: Alguien q entienda los porcentajes por favor!!

Yo probaría a no poner WIDTH a la clase B (que ocupe lo que reste), además te falta añadir el borde en el estilo de B1 y, cómo no, la propiedad MARGIN con los valores "0" y "auto".
Por lo demás no se me ocurre ninguna otra cosa
__________________
Proyecto de revista digital:

www.elcampamentobase.es
  #3 (permalink)  
Antiguo 11/07/2007, 16:17
 
Fecha de Ingreso: diciembre-2004
Mensajes: 721
Antigüedad: 19 años, 3 meses
Puntos: 2
Re: Diseño Liquido: Alguien q entienda los porcentajes por favor!!

Lo voy a probar, Gracias HQ1 :)
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 06:05.