Problema con DIV redimensionable con margenes fijos

Ased · #1 (**permalink**) 13/01/2010, 03:36

Hola a todos, mi duda es la siguiente, intento meter el api de google dentro de un contenedor que quede a cualquier resolución centrado pero con margenes fijos de 16px en bottom, left y right, y algo más en el top. Llego a darles margenes a left y a top pero no me salen en right y bottom.

Centrar ya he centrado elementos en css http://www.whatonline.org/, pero siempre tenian un ancho y alto fijo, el tema es que ahora no, dependiendo del monitor y el tamaño de la ventana necesito siempre que se escale centrado pero con los mismos margenes, no me vale hacer un body al 100% centrar y luego un contenedor al 90% porque será relativo al total, el resultado es cómo en la imagen que os paso.

No comento la posibilidad de hacerlo con frames porque no me parece adecuada y creo que con CSS irá mejor. Gracias de antemano por la ayuda :)

dacho · #2 (**permalink**) 13/01/2010, 08:38

Hola, probaste especificarle el margin tal como queres y no colocarle width?

Si no me equivoco se tendria que adaptar de forma correcta porque los elementos internos de la pagina estirarian al elemento contenedor.

Lo que decis esta bien, nunca vas a poder especificar un width en un porcentaje de 100% mas una margin en pixeles porque se te va a aparecer la barra horizontal.

Si no te funciona podemos ver alguna otra manera.

dacho · #3 (**permalink**) 13/01/2010, 12:17

Hola recien he tenido tiempo de comprobarlo y parece funcionar perfecto, no lo probe en IE porque estoy en linux en este momento pero deberia funcionar perfectamente, aca un ejemplo de lo que pedis:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>liquid test</title>
<style type="text/css" media="screen">
	
#liquid{clear: both; height: 500px; background-color: #666; margin: 130px 16px 16px 16px;}
		
		
</style>
</head>
<body>

<div id="liquid"></div>

</body>
</html>

Espero que te sirva :)

Ased · #4 (**permalink**) 13/01/2010, 15:49

Muchas gracias por tu interés dacho! Use lo primero que me comentaste y me dejaste una cosa bien clara, mejor dar los márgenes en el body y luego hacer encajar el contenido dentro.

Lo he conseguido casi casi, el único que me falla es el bottom, que me hace scroll por el tema del 100% de altura, el margen es el correcto cuando se acaba el mapa pero debería de encajarse como en los lados.

Gracias por la prueba que has hecho en html, veo que tu marcaste un height fijo, esto es lo que intento evitar ya que me intera que se ajuste bien en cualquier resolucion o tamaño de ventana.

Ves solución?? :)

dacho · #5 (**permalink**) 13/01/2010, 16:15

mmm... ahi no se si la veo... porque el height no se ajusta solo naturalmente como el width.

Con javascript no se puede porque uno no sabe que alto real tiene el explorador porque puede tener 1, 2, 3 o mil barras y se va para abajo asi que no se pueda saber que alto real puede haber.

Quizas yo no se hacerlo y se puede. Podes buscar sobre altos con diseño liquido (diseño liquido es que se agranda segun la resolucion de la pantalla).

Lo que no logro entender es porque queres tener una altura liquida y un margen fijo. por ahi si decis que es exactamente que queres hacer te puedo ayudar.

Solucion 1: colocar un margen porcentual es decir:

margin-top: 6%
margin-bottom: 3%
height: 91%;

o los tamaños que se adapten mejor lo que necesitas.

Ased · #6 (**permalink**) 13/01/2010, 16:50

Hola dacho, el tema de colocarlo es un tema estético, quiero que el mapa quede enmarcado, no que llegue a toda pantalla, pero quiero unos margenes especificos porque son los que uso en la web, viste el link de mi web que hay en el mensaje anterior? pues es eso mismo pero sin que me salga scroll en alto y se vea el margen inferior? la otra que se me acaba de pasar es aplicarle un pie en una de esas alturas liquidas que me comentas, a lo mejor funciona, voy a mirar si encuentro algo!

Ased · #7 (**permalink**) 13/01/2010, 17:13

Buenas de nuevo Dacho, al final he encontrado una solución que me vale, no es la mejor pero al menos consigo lo que quiero sin violar el tratado W3C ;) te cuento por si te sirve de algo...en definitiva lo que he hecho es meterle laterales, top y bottom por encima y un overflow al mapa, el css queda así

Código:

<style type="text/css">
<!--
* {padding:0px; margin:0px;}
html {
	height: 100%;
	width:100%;
}
body {
	height: 100%;
	width:100%;
}
.mapa{
	height:100%;
	width:100%;
	overflow:hidden;
}
#cabecera{
	position:absolute;
	background-color:#fff;
	height:32px;
	top:0;
	width:100%;
}
#pie{
	position:absolute;
	background-color:#fff;
	height:32px;
	bottom:0;
	width:100%;
}
#izquierda{
	position:absolute;
	background-color:#fff;
	width:32px;
	left:0;
	top:0;
	height:100%;	
}
#derecha{
	position:absolute;
	background-color:#fff;
	width:32px;
	right:0;
	top:0;
	height:100%;	
}
-->
</style>

Y después lo monto de la siguiente manera:

Código:

    <div class="mapa" id="map"></div>
    <div id="pie"></div>    
    <div id="cabecera"></div>
    <div id="derecha"></div>
    <div id="izquierda"></div>

Al final lo que queda es el mapa API de google (Que usa un id por lo que en CSS le he puesto las propiedades como clase) y después me dedico a ocultar por encima con pie, cabecera, etc. Como está al 100% sin margin no me sale ningún scroll, y a su vez se mantiene las proporciones de margenes indiferenctemente de la resolución.

Bueno, pues nada más, darte las gracias de nuevo y hasta la próxima por aquí