Página centrada y con contenido líquido

elnola · #1 (**permalink**) 08/07/2007, 08:11

Saludos a todos, es la primera vez que escribo y agradezco de antemano la ayuda que podais prestarme.

Vereis: soy ilustrador, no webmaster. Estoy haciendo mi página para promoción. La verdad, me he comido la cabeza pero no lo he sabido hacer mejor, dados mi nulos conocimientos en la materia.

Bueno, mi página está diseñada en Photoshop, recortada en Imageready y montada en Dreamweaver. Allí he convertido las tablas en capas,....

Mi problema es que no puedo hacer que el contenido quede centrado y que se adapte al tamaño del navegador, si éste se cambia.
He probado con algunos ejemplos pero nada.

Alguien puede ayudarme?

Snd234 · #2 (**permalink**) 08/07/2007, 12:28

Podrias poner un ejemplo de lo que llevas.
Si quieres centrar la pagina, podrias probar con margin: 0px auto;
Y para que se adapte el tamaño del navegador, deberias usar porcentajes para las medidas.

elnola · #3 (**permalink**) 09/07/2007, 01:11

Esto es lo que tengo por ahora:

<html>
<head>
<title>gal2cast</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">

</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="Layer1" style="position: absolute; left: 147px; top: 0px; width: 44px; height: 571px; z-index: 1; vertical-align: middle"></div>
<div id="Layer2" style="position: absolute; left: 191px; top: 0px; width: 718px; height: 32px; z-index: 2"></div>
<div id="Layer3" style="position: absolute; left: 909px; top: 0px; width: 23px; height: 571px; z-index: 3; vertical-align: middle"></div>
<div id="Layer4" style="position: absolute; left: 191px; top: 32px; width: 699px; height: 19px; z-index: 4"><img src="Images/sc4ci.jpg" alt="" width="699" height="19" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="625,0,697,13" href="idiomas.html">
</map></div>
<div id="Layer5" style="position: absolute; left: 890px; top.....etc,etc,etc.

Todo este jaleo es por la conversión automática de tablas a capas. Estoy viendo por ahí que es aconsejable poner todos loa atributos en una hoja de estilos vinculada pero...ufff

En que lugar debería poner el margin 0px auto? Dónde le puedo dar los %'s?
Puede ser que todo esto tenga que estar dentro de un contenedor con esas dimensones a %? Creo que he oído algo de eso...

Raulmmmm · #4 (**permalink**) 09/07/2007, 09:43

Prueba con esto:
<div id="Layer1" style="position: absolute; margin-left: 5%; top: 0px; height: 571px; z-index: 1; vertical-align: middle; margin-right: 5%"></div>

elnola · #5 (**permalink**) 09/07/2007, 12:48

Gracias Raulmmmm, pero no ha salido bien. La cosa sigue como antes.

Tecnogal · #6 (**permalink**) 09/07/2007, 13:12

mejor no majenes posiones absolutas, si es mejor hacerlo desde una capa vinculada, yo manejo una pagina asi, diseño liquido pero de tamaño cambiante es caballerosdeltablero.com checa el como esta maquetda y bajate la hoja de estilos, cambia lo que necesites, es mejor manejar elemntos flotantes creo yo, para obetner este tipo de diseño,

Raulmmmm · #7 (**permalink**) 09/07/2007, 14:42

Perdona, era position: relative:
<div id="Layer1" style="position: relative; margin-left: 5%; top: 0px; height: 571px; margin-right: 5%; z-index: 1; vertical-align: middle;">fafafasf</div>
Ahora lo he comprobado

.

elnola · #8 (**permalink**) 14/07/2007, 05:48

Gracias, ya lo he solucionado.
He hecho un div contenedor en el que he metido las demás capas.

#contenedor {
width: 785px;
height: 575px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: center;
position: relative;
}

Esto me centra el contenido y lo adapta a la ventana del navegador, si cambia.

Creo que igual me confundí con el título del post al decir centrado líquido. Solo era que el contenido de la página se desplazara en bloque fijo, manteniendose el centrado si se redimensionaba la ventana del navegador.

Saludos!