Centrar contenedores

[the_web_saint]

Estoy realizando el posicionamiento de unos contenedores (div) en las páginas, le coloco position:absolute, pero el top y left lo asigno en una función javascript llamandola en el onload de la página, es posible hacer la misma operación en css?, porque el problema esta en que mientras q carga la página se ven los contenedores desordenados y montados unos encima de otros. Ya luego de que termina de calcular el top y left se colocan bien, pero hay un pequeño tiempo que se ven mal.

Saludos

[willyfc]

los contenedores tienen que ser necesariamente absolutos?
si son los contenedores de cada sección de la web (cabecera,contenido,pie) no necesitan serlo y menos necesitaras javascript para darles ubicación, o contenedores de que son?

[iconogt]

Aja estoy de acuerdo con willyfc, para maquetar no es necesario hacerlo con javascript si para eso esta el css, mira la forma que yo lo hago es "si quiero que este centrado el contenedor" uso margenes automaticos y listo! no hay que complicarse tanto posteate algo mas claro de lo que deseas y talvés te damos una solucion mas comoda y entendible

suerte,

[the_web_saint]

Mira tengo un menu lateral. con este todo bien, lo hago con css.
Pero luego en la parte del centro de pagina, quiero que los contenedores que coloco, esten en la mitad de esta seccion, no de toda la pagina, pero en si, un contenedor me debe quedar un poco encima de otro.
Bueno mejor les dejo el link
www.kuenko.com

Saludos

[iconogt]

mira a ver si entiendo bien, lo que queres es centrar una capa dentro de otra? o queres usar posicionamiento absoluto dentro de otra capa? hmmm .. creo que ando un poco perdido Según tu diseño tenes que unir las distintas partes de los gráficos o como es que estas trabajando? mi hermano creo que vas a tener que ser mas claro con esto

[the_web_saint]

Bueno quiero posicionar el contenedor donde esta el texto en el centro de la capa de contenido(sacando el menú lateral), luego de esto, como se ve se debe posicionar la capa de la imagen un tanto encima de la otra. Como no se como posicionar en el centro del div central el div del texto con css, lo calcule con javascript usando el height y el width del cliente y la capa de la imagen también usando los valores anteriormente mencionados. Este calculo automático dependiendo de la pantalla del usuario, es posible hacerla con css?

Saludos, espero ahora si haberme explicado mejor.

[iconogt]

mira, tu post dice Centrar contenedores, así pues la respuesta a mi parecer y/o mi forma de trabajar con el css es usar capas con posicionamiento relativo y jugando un poco con los margenes podés conseguir algo bueno... ahora si no es eso exáctamente lo que deseas conseguir entonces si no puedo ayudarte, porque no te haces un pequeño grafico como ejemplo de como queres colocar los divs y vamos a ver que pasa...

[the_web_saint]

Bueno creo que mejor no me puedo explicar:
1. La página consta de dos div principales, el lateral que es el menu y el central.
2. Dentro del central, coloco un div con un fondo que quiero posicionar en el centro del div central, y en la parte baja (este posicionamiento lo hago con javascript, obteniendo la altura y ancho de pantalla del cliente).
3. Los otros contenedores, como la imagen que esta arriba del div mencionado en el punto anterior, tambien le coloco su top y left con javascript.

Cuando digo que lo posiciono con javascript, quiero decir que le pongo los atributos top y left, y estas capas que estan dentro del div centro tienen posicionamiento absoluto.
Ya lo de que se viera por segundos mal y luego se arreglará lo solucioné pero el problema esta en que quiero hacerlo con css porque he notado que se ve mal en safari y me inmagino que en otro más tambien.

el link lo coloque arriba por si desean revisar la pagina.

Saludos

[baccxus]

Hola, The_Web_Saint.

Te has fijado a cambiar el tamaño del navegador y ver que pasa con tu página?...

Deberías de usar solo CSS en el diseño de ésta, pues el uso de JS para lo que quieres mostrar está desaconsejado.

para centrar divisiones se usa:

margin: 0 auto

Para centrar divisiones dentro de divisiones se usa lo mismo, pero a la división que es madre debes ponerle

position: relative

Pero el usar contenedores dentro de contenedores está mal, según mi experiencia abusas del uso de divisiones, por ejemplo:

<div id="lateral">
<div id="img"><img id="logo" src="http://www.forosdelweb.com/images/logo.gif" border="0px" title="Alquilo o vendo" alt="Logo de alquilo o vendo" /></div><!--//cierra img/-->
<div id="menu">
<ul>...
</ul>
</div><!--//cierra menu/-->
</div><!--//cierra lateral/-->

pudiendo ser:

<div id="lateral">
<img class="logo" src="http://www.forosdelweb.com/images/logo.gif" title="Alquilo o vendo" alt="Logo de alquilo o vendo"/>
<ul class="menu">...
</ul>
</div><!--//cierra lateral/-->

Los atributos de id=img puedes aplicarlos desde

#lateral img ó directamente desde #logo puesto que le pusiste un identificador

todo esto solo por ponerte un ejemplo. Trata de hacer tu layout lo más simple posible en cuanto a divisiones. Por citar algo: id= header, lateral, contenido, pie de página. Clases de ser necesario (class) pero si tienes algun atributo o marcación (p, table, strong, li, ul, entre otras) puedes aplicar diseño usando la division ó clase y luego el atributo:

#header h1 {...}

así te evitas crear divisiones innecesarias y generas un código más limpio y menos pesado que hará que la carga de la página sea más rápida.

Suerte y nos avisas que tal.

[willyfc]

mira modifique un poco tu código css, adaptalo haber si te sirve:

Código:

@charset "utf-8";
/* CSS Document */
html{height:100%; margin:0px;}
body{
	background-image:url(../images/fondo.png);
	background-repeat:repeat-x;
	color:#FFFFFF;
	height:100%;
	margin:0px;
}
#lateral{
	background-image:url(../images/lateral.png);
	background-repeat:repeat-y;
	border-right:solid 4px #FF9900;
/* este ancho decia 213px pero en realidad media 243px por eso en ie el borde se iba mas a la derecha  */	
	width:243px;
	height:100%;
	margin:0;
	float:left;
	position:relative;
}
#img{
	width:100%;;
	height:136px;
	text-align:center;
}
/*aqui no respeta el margin-top por que tiene que ir separado por coma*/
#img ,#logo{
	margin-top:25px;
}
#lateral div#menu{
	width:243px;
	height:70%;
}
#menu ul{
	list-style:none;
	text-align:right;
	bottom:0%; 
	right:0%; 
	margin:0 0 5px 0;
	width:243px;
	height:auto;
	position:absolute;
}
#menu ul a{
	font-family:"Freestyle Script", "Monotype Corsiva", "Script MT Bold";
	font-size:28px;
	color:#FFFFFF;
	text-decoration:none;
	margin-right:38px;
	color:#000000;
}
#lateral #menu ul a:hover{
	text-decoration:underline;
}
#menu ul li{
	width:100%;
}
#menu ul #on{
	background:url(../images/on.gif) right no-repeat;
}
.centro
{
	float:left;
	margin-top:50px;
	margin-left:60px;
	width:500px;
	height:auto;
	display:table;
}
.YellowText
{
	font-size:32px;
	font-family:Futura, Arial, Verdana;
	color:#FFCC00;
}
#imagen{
	position:absolute;
	top:35%;
	left:50%;
	width:392px;
	height:225px;
	z-index:1;
	border:1px solid #000000;
}
#contentTexto{
	width:470px;
	height:158px;
	background-image:url(../images/round.gif);
	background-repeat:no-repeat;
	color:#6A6A6A;
	font-family:Arial, Helvetica, sans-serif;
	border:1px solid #000000;
	position:absolute;
	top:65%;
	left:35%;
}
#contentTexto #subtitle{
	font-size:18px;
	font-weight:bold;
	margin:10px;
}
#contentTexto #GenText{
	font-size:13px;
	font-weight:500;
	margin-left:60px;
	margin-top:30px;
}
#contentTexto #GenTextF{
	font-size:13px;
	font-weight:500;
	margin-left:40px;
	margin-top:10px;
}
#GenTextF li
{
	line-height:15px;
}
#GenText span
{
	margin:5px;
	float:left;
}
#contentTexto #GenTextC{
	font-size:12px;
	font-weight:500;
	width:156px;
	float:left;
	margin:0px;
}
#GenTextC ul
{
	/*margin:0px;*/
	margin-top:3px;
}
#fotografias .foto
{
	margin:2px 20px;
}
#fotografiasDiv{
	position:absolute;
}
#fotografiasDiv .ampliar
{
	margin-right:20px;
	text-align:right;
}

copialo y pegalo en tu código css y el html dejalo como estaba

y no utilices javascript

[the_web_saint]

Hola, disculpen por la demora, es que estaba muy ocupado tratando de arreglar esto:
willyfc:
He probado tu css, y te agradezco mucho que te hayas tomado la molestia de adaptarlo, pero no me funciono, se descuadro todo.

baccxus:
Estoy siguiendo tu consejo, de reducir los div y bueno decidi, mejor colocarle un margen izquierdo de 100 y no centrarlo dependiendo del tamaño de la pantalla del cliente. Me ha estado funcionando bien hasta ahora, pero tengo un problema que me tiene loco ya.

Como veran, en la parte de fotografias, puse el link de ampliar imagen, esta imagen, se sale de la tabla, no se porque.



Esta marcado, la imagen de la lupa debería estar al lado del texto del link, pero no se porque se sale de la tabla.

Ojala puedan ayudarme.

[Mikmoro]

Pues está bonito así

Es broma. ¿Le has puesto float: right a la imagen de la lupa como para que se acomode junto al texto?

[the_web_saint]

Bueno, le he puesto lo que me dices, y al parecer entro en el td, pero, lo coloca debajo del texto, como a 20 px por debajo.

Este es el codigo que uso:

Código HTML:

<table>
            <tr>
                <td><img class="foto" src="images/small/sala1.gif" border="0" alt="Sal&oacute;n" title="Sal&oacute;n" /><br />
                	<p class="ampliar"><a href="fotos/sala1.jpg" rel="lightbox[fotos]" title="Sal&oacute;n">Ampliar imagen<img src="images/ampliar.png" border="0" alt="ampliar" title="Ampliar imagen" /></a></p></td>
                <td><img class="foto" src="images/small/sala2.gif" border="0" alt="Sal&oacute;n" title="Sal&oacute;n" /><br />
                	<p class="ampliar"><a href="fotos/sala2.jpg" rel="lightbox[fotos]" title="Sal&oacute;n">Ampliar imagen<img src="images/ampliar.png" border="0" alt="ampliar" title="Ampliar imagen" /></a></p></td>
                <td><img class="foto" src="images/small/sala3.gif" border="0" alt="Sal&oacute;n" title="Sal&oacute;n" /><br />
                	<p class="ampliar"><a href="fotos/sala3.jpg" rel="lightbox[fotos]" title="Sal&oacute;n">Ampliar imagen<img src="images/ampliar.png" border="0" alt="ampliar" title="Ampliar imagen" /></a></p></td>
            </tr>
..............

El CSS:

Código HTML:

.centro table td{
	width:175px;
}
.centro table .ampliar
{
	text-align:right;
	width:135px;
	margin:0 auto;
	height:15px;
	display:block;
}
.centro table .ampliar a
{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#330000;
	font-weight:bold;
	height:15px;
	width:100%;
	border:solid #006600 1px;
}
.centro table .ampliar img
{
	float:right;
}

Saludos

[willyfc]

y si en vez de utilizar solo en td y <p> utilizas <div>, mira:

Código HTML:

<table>
            <tr>
                <td valign="top">
				<div><img src="images/small/sala1.gif" alt="Sal&oacute;n" width="125" height="65" border="0" class="foto" title="Sal&oacute;n" /></div>
           	  <div class="ampliar"><a href="fotos/sala1.jpg" rel="lightbox[fotos]" title="Sal&oacute;n">Ampliar imagen<img src="images/ampliar.png" border="0" alt="ampliar" title="Ampliar imagen" /></a></div></td>
                <td valign="top"><div><img src="images/small/sala2.gif" alt="Sal&oacute;n" width="125" height="65" border="0" class="foto" title="Sal&oacute;n" /></div>
           	  <div class="ampliar"><a href="fotos/sala2.jpg" rel="lightbox[fotos]" title="Sal&oacute;n">Ampliar imagen<img src="images/ampliar.png" border="0" alt="ampliar" title="Ampliar imagen" /></a></div></td>
                <td valign="top"><div><img src="images/small/sala3.gif" alt="Sal&oacute;n" width="123" height="65" border="0" class="foto" title="Sal&oacute;n" /></div>
           	  <div class="ampliar"><a href="fotos/sala3.jpg" rel="lightbox[fotos]" title="Sal&oacute;n">Ampliar imagen<img src="images/ampliar.png" border="0" alt="ampliar" title="Ampliar imagen" /></a></div></td>
            </tr>
</table> 

las medidas a las imagenes se las di arbitrariamente dale medidas al td con margenes para una buena separación

así dentro de un td ninguno necesitaría flotar, otra cosa coloca medidas de ancho y alto al tag img si no me equivoco ese le ayuda a interpretar a los navegadores, pruebalo y avisas

[Mikmoro]

Pues no sé, pero yo copio tu código con el float: right y lo pego en un documento cambiando sólo las imágenes y me va bien: la imagen se pone seguida del texto.

[willyfc]

mmm, de la forma que me dices en ie6 se me baja, y de la forma que lo puse me sale bien, bueno esperemos al santo a ver como le va

[the_web_saint]

Lo habia aplicado ya con div, y me sale igual, en todos los navegadores lo veo mal, Opera, Safari, Mozilla y IE7.
No se que esta sucediendo pero no lo hace, no había tenido este problema antes.

[Mikmoro]

Refresca la cache de tu navegador: se ven perfectamente los gráficos de la lupa junto al texto, tanto en FF como IE6.

[the_web_saint]

Bueno en el enlace que coloque arriba si, lo que sucede es que estoy trabajando local otra copia, porque en ese que esta en la web, centreo con javascript, y en safari se distorsiona todo.
Lo estoy cambiando a css para no usar javascript.

Pero ya lo he solucionado.

Código HTML:

.centro table td{
	width:175px;
}
.centro table .ampliar
{
	text-align:right;
	width:135px;
	margin:0 auto;
	height:15px;
	display:block;
}
.centro table .ampliar a
{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#330000;
	font-weight:bold;
	height:15px;
	margin:0px;
}
.centro table .ampliar a img
{
	width:13px;
	height:13px;
	margin:0px;
}

Al parecer me ponia un margen delante de la imagen, como este sobrepasaba el ancho especificado, bajaba la imagen.

Una ultima consulta: Como puedo hacer para que la imagen de la casa me quede arriba de la otra, si ven debe estar un pedazito de la llave encima de la otra capa, pero en IE se pone debajo, como ya no trabajo con position:absolute al parecer no me responde al z-index.

Ya subi el sitio, ahora si es con el que estoy trabajando, pueden verlo en el enlace.
EDITADO: Solucionado, le he colocado position:relative y ya me ve el z-index.

Muchas Gracias por su ayuda compañeros

[baccxus]

Hola The_Web_Saint.

Como consejo, colócale un min-width al body para que no se descuadre en resoluciones menores a 1024 x 768, recuerda que hoy en día mucha gente usa netbooks y que su resolución es menor a 900px de ancho y también hay gente que sigue usando 800*600 como resolución.

Un saludo,

[the_web_saint]

uhmm un min-width con que valor me recomiendas? 800?

Saludos