Foros del Web » Creando para Internet » CSS »

Centrar contenedores

Estas en el tema de Centrar contenedores en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/12/2008, 12:59
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Centrar contenedores

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
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
  #2 (permalink)  
Antiguo 17/12/2008, 13:02
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrar contenedores

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?
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 17/12/2008, 13:10
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Respuesta: Centrar contenedores

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,
__________________
_______
Jorge Rojas.
  #4 (permalink)  
Antiguo 17/12/2008, 13:14
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Centrar contenedores

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
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
  #5 (permalink)  
Antiguo 17/12/2008, 13:39
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Respuesta: Centrar contenedores

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
__________________
_______
Jorge Rojas.
  #6 (permalink)  
Antiguo 17/12/2008, 13:49
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Centrar contenedores

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.
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
  #7 (permalink)  
Antiguo 17/12/2008, 14:08
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Respuesta: Centrar contenedores

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...
__________________
_______
Jorge Rojas.
  #8 (permalink)  
Antiguo 17/12/2008, 15:02
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Centrar contenedores

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
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
  #9 (permalink)  
Antiguo 17/12/2008, 15:03
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Centrar contenedores

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.
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 17/12/2008 a las 15:16
  #10 (permalink)  
Antiguo 17/12/2008, 15:46
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrar contenedores

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
__________________
WFC
codigo82
  #11 (permalink)  
Antiguo 18/12/2008, 10:19
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Centrar contenedores

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.
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
  #12 (permalink)  
Antiguo 18/12/2008, 11:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar contenedores

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?
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 18/12/2008, 11:58
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Centrar contenedores


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
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
  #14 (permalink)  
Antiguo 18/12/2008, 12:14
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrar contenedores

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
__________________
WFC
codigo82
  #15 (permalink)  
Antiguo 18/12/2008, 12:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar contenedores

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.
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 18/12/2008, 12:28
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrar contenedores

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
__________________
WFC
codigo82
  #17 (permalink)  
Antiguo 18/12/2008, 12:38
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Centrar contenedores

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.
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
  #18 (permalink)  
Antiguo 18/12/2008, 12:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar contenedores



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

__________________
Visita mi nueva web idplus.org
  #19 (permalink)  
Antiguo 18/12/2008, 13:09
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Centrar contenedores

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
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.

Última edición por the_web_saint; 18/12/2008 a las 13:38
  #20 (permalink)  
Antiguo 18/12/2008, 14:04
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Centrar contenedores

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,
__________________
Al final del día hablar es gratis, codificar no lo es
  #21 (permalink)  
Antiguo 18/12/2008, 14:55
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Centrar contenedores

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

Saludos
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
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 23:14.