Foros del Web » Creando para Internet » CSS »

centrar capas dentro de una capa contenedora

Estas en el tema de centrar capas dentro de una capa contenedora en el foro de CSS en Foros del Web. tengo una capa y dentro de ella tengo otras 4 capas. lo que quiero es que estas 4 capas se me centren dentro de la ...
  #1 (permalink)  
Antiguo 12/07/2005, 05:37
 
Fecha de Ingreso: julio-2003
Mensajes: 437
Antigüedad: 14 años, 4 meses
Puntos: 0
centrar capas dentro de una capa contenedora

tengo una capa y dentro de ella tengo otras 4 capas.

lo que quiero es que estas 4 capas se me centren dentro de la primera capa contenedora y que entre estas 4 capas haya un margen de espacio igual entre ellas.

como lo logro?
  #2 (permalink)  
Antiguo 12/07/2005, 11:26
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
hola, yo recien empieo tambien un poco en esto de CSS y estuve tratando de hacer algo como tu querias y he hecho algo asi
css
Código:
body {
	text-align: center;
	}
#contenedor {
	position: absolute;
	top: 10%;
	left: 10%;
        width: 80%;
	height: 80%;
	border: 1px solid #ff0000;
	}
#caja-si {
	float: left;
	width: 47%;
	height: 45%;
	margin-top: 2%;
	margin-left: 2%;  
	border: 1px solid #ff0000;
	}
#caja-sd {
	float: right;
	width: 47%;
	height: 45%;
	margin-top: 2%;
	margin-right: 2%; 
	border: 1px solid #ff0000;
	}
#caja-ii {
	top: 50%;
	float:left;
	width: 47%;
	height: 45%;
	margin-top: 1%;
	margin-left: 2%; 
	border: 1px solid #ff0000;
	}
#caja-id {
	top: 50%;
	float:right;
	width: 47%;
	height: 45%;
	margin-top: 1%;
	margin-right: 2%;
	border: 1px solid #ff0000;
	}
y el html
Código:
<BODY>
<div id="contenedor">
	<div id="caja-si">
	esta es la caja superior izquierda	
	</div>
	<div id="caja-sd">
	esta es la caja superior derecha		
	</div>
	<div id="caja-ii">
	esta es la caja inferior izquierda		
	</div>
	<div id="caja-id">
	esta es la caja inferior derecha
	</div>
</div>
</BODY>
lo veo en FF, Opera, y netscape y se ve maravilloso, pero en IE se ve horrible, y no se bien como arreglarlo, es increible lo que se puede aprender en foros como este y sitios como Diseñorama, tierra de nomadas, ignside.net, etc

Última edición por RoQ; 12/07/2005 a las 16:49
  #3 (permalink)  
Antiguo 13/07/2005, 10:06
 
Fecha de Ingreso: julio-2003
Mensajes: 437
Antigüedad: 14 años, 4 meses
Puntos: 0
esto no es lo que busco yo, yo quiero que dentro de una capa contenedora se metan 3 capas que esten centradas y entre ellas haya el mismo espacio de separacion, algo que con tables es muy facil de hacer dando porcentajes a los td y poniendo celdas vacias entre las celdas que tienen contenido

he estado buscando en varios foros pero nadie encuentra la solucion
  #4 (permalink)  
Antiguo 13/07/2005, 10:26
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
O_o? dijiste 4 primero, en fin hay formas de hacerlo, revisa aqui revisa los ejemplos y varilos un poco
  #5 (permalink)  
Antiguo 13/07/2005, 14:39
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
la solucion esta en el codigo que te puedo RoQ deberias de checar y modificar y ver donde epuesde estar el posible error con un float se puede arreglar perfecto

saludos
  #6 (permalink)  
Antiguo 13/07/2005, 16:06
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
a ver asi (se ve perfecto en firefox & opera)

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
	<style type="text/css">
		#main	{
					width:628px;
					height:450px;
					margin:auto;
					border:2px solid #000000;
					padding:0px;
		}
		#div1	{
					width:150px;	/* 158 */
					height:440px;
					margin:4px 2px 4px 4px;
					float:left;
					border:1px solid #000000;
					padding:0px;
		}
		#div2	{
					width:150px;	/* 156 */
					height:440px;
					margin:4px 2px 4px 2px;
					float:left;
					border:1px solid #000000;
					padding:0px;
		}
		#div3	{
					width:150px;	/* 156 */
					height:440px;
					margin:4px 2px 4px 2px;
					float:right;
					border:1px solid #000000;
					padding:0px;
		}
		#div4	{
					width:150px;	/* 158 */
					height:440px;
					margin:4px 4px 4px 2px;
					float:right;
					border:1px solid #000000;
					padding:0px;
		}
	</style>
</head>

<body>
	<div id="main">
		<div id="div1">capa 1</div>
		<div id="div2">capa 2</div>
		<div id="div4">capa 4</div>
		<div id="div3">capa 3</div>
	</div>
</body>
</html> 

Última edición por SiR.CARAJ0DIDA; 13/07/2005 a las 16:12
  #7 (permalink)  
Antiguo 13/07/2005, 16:34
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
el dice que quiere 3 dentro de una y centradas con mismo espacio, yo he hecho esto, usando los bloques en linea de tierra de nomadas dentro de una capa, con hack incluido para IE
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>3 dentro de 1</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-10">
<style type="text/css">
<!--
body {
	text-align: center;
	}
#contenedor {
	margin: auto;
	width: 750px;
	height: 300px;
	border: 1px solid #0000ff;
	}

/*ie de mierda */
* html .cajas {   
	float:left;
	width:223px;
	w\idth:223px;
	height:280px;
	margin:10px;
	border: 1px solid #ff0000;
	}
/* ie de mierda */

.cajas {
	float:left;
	width:228px;
	height:280px;
	margin:10px;
	border: 1px solid #ff0000;
	}
	//-->
</style>
</HEAD>
<BODY>
<div id="contenedor">
	<div class="cajas">
	esta es la primera caja
	</div>
	<div class="cajas">
	esta es la segunda caja
	</div>
	<div class="cajas">
	esta es la tercera caja
	</div>
</div>
</BODY>
</HTML>

Última edición por RoQ; 13/07/2005 a las 16:51
  #8 (permalink)  
Antiguo 13/07/2005, 16:46
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
no es valido que 3 elementos tengan el mismo id, debes usar clases en su lugar.

me gustaria saber en que consiste el "hack" para ie
  #9 (permalink)  
Antiguo 13/07/2005, 16:50
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
tienes razon acerca del "id", lo del hack es simple, lo lei en otra web, IE toma el width como la suma del padding+border+margin o algo asi, asi ke para Ie lo que hago es disminuir el tamaño, pero para que solo IE lo lea uso el "* html" eso solo lo lee ie y no los demas
  #10 (permalink)  
Antiguo 14/07/2005, 02:55
 
Fecha de Ingreso: julio-2003
Mensajes: 437
Antigüedad: 14 años, 4 meses
Puntos: 0
pero estos codigos que habeis enviado no es lo que busco, yo lo que quiero que con independencia del ancho de la capa contenedora,las capas de dentro se centren y tengan un espacio entre si.

si a la capa contenedora le pones mas ancho las capas de dentro no se centran, se van a la izquierda, cosa que no ocurre en una tabla, si en ésta tienes 3 celdas con porcentajes y reduces el ancho de la tabla, las celdas seguiran estando centradas.

no sé si me explico bien,lo que busco es algo que valga para 3,4,5 ... capas dentro de una contenedora, y que estas capas queden centradas, por lo que usando el float siempre se iran a un lado u otro
  #11 (permalink)  
Antiguo 14/07/2005, 10:33
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
Lo que necesitas es ponerle a cada div de los que pones dentro lo siguiente:

margin-top:10px; /*o loque quieras que se separen entre si*/
margin-left:auto;
margin-right:auto;
margin-bottom:10px;

El margen auto a los lados hace que se centren los divs, siempre y cuando estos tengan un ancho definido, ademas de eso, puedes agregarle text-align:center; al contenedor para navegadores mas viejos.
  #12 (permalink)  
Antiguo 15/07/2005, 03:32
 
Fecha de Ingreso: julio-2003
Mensajes: 437
Antigüedad: 14 años, 4 meses
Puntos: 0
lo he probado y no sale bien, las capas de dentro se centran pero aparecen una debajo de otra, no aparecen horizontalmente.

lo que busco yo es como si fuera un tr de una tabla, es decir, un tr con varios tds, los cuales aparecen distribuidos horizontalmente y uniformemente si se les aplica un porcentaje de espacio por igual a cada uno.

espero haberme explicado esta vez bien
  #13 (permalink)  
Antiguo 15/07/2005, 10:39
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
Ahhh, es que pense que era justamente asi, una debajo de la otra, :P
Pues en ese caso, lo que necesitas es otro div, algo asi:

Código:
<div id="principal">
  <div id="contenedor">
    <div class="item">Cualquier cosa aqui</div>
    <div class="item">Cualquier cosa aqui</div>
    <div class="item">Cualquier cosa aqui</div>
    <div class="item">Cualquier cosa aqui</div>
  </div>
</div>
Asi puedes centrar primero el contenedor y luego poner los dems dentro, estaran separados, entre si, y centrados con respecto al principal, agrupados con contenedor.
Pero ponerlo por porcentajes es muy complicado, quizas es mejor que lo uses con valores fijos.
  #14 (permalink)  
Antiguo 15/07/2005, 14:14
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
teoricamente se podria usar display:inline pero eso nunca me funcionó correctamente...
  #15 (permalink)  
Antiguo 19/07/2005, 04:52
 
Fecha de Ingreso: julio-2003
Mensajes: 437
Antigüedad: 14 años, 4 meses
Puntos: 0
he probado con el codigo de RAMM de añadir una capa "contenedor" pero no sé exactamente cómo hacer el css, no consigo centrar las capas
  #16 (permalink)  
Antiguo 19/07/2005, 08:44
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
chekea esto de repente es lo ke kieres
http://ofdnews.com/comentarios.php?id=590_0_1_0_C
lo unico ke te faltaria es meter esto dentro de una contenedor centrado
  #17 (permalink)  
Antiguo 20/07/2005, 06:15
 
Fecha de Ingreso: julio-2003
Mensajes: 437
Antigüedad: 14 años, 4 meses
Puntos: 0
puf, en esa pagina usan porcentajes y lefts, algo que nadie recomienda, y ademas no da los resultados que yo busco.

parece ser que no hay solucion a este problema
  #18 (permalink)  
Antiguo 20/07/2005, 08:18
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
no vep que tiene de malo usar porcentajes, de ese modo se mantendran centradas teniendo el tamaño ke tengan, yo lo he usado y si me da buenos resultados, solo es cuestion de jugar con los porcentajes
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 04:30.