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?
12/07/2005, 04:37
| |||
| |||
| 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? |
|
12/07/2005, 10:26
| ||||
| ||||
| 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:
y el htmlbody {
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;
}
Código:
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 <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> Última edición por RoQ; 12/07/2005 a las 15:49 |
|
13/07/2005, 09:06
| |||
| |||
| 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 |
|
13/07/2005, 13:39
| ||||
| ||||
| 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 |
|
13/07/2005, 15:06
| ||||
| ||||
| 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 15:12 |
|
13/07/2005, 15:34
| ||||
| ||||
| 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 15:51 |
|
13/07/2005, 15:50
| ||||
| ||||
| 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 |
|
14/07/2005, 01:55
| |||
| |||
| 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 |
|
14/07/2005, 09:33
| ||||
| ||||
| 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. |
|
15/07/2005, 02:32
| |||
| |||
| 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 |
|
15/07/2005, 09:39
| ||||
| ||||
| 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:
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.<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>
Pero ponerlo por porcentajes es muy complicado, quizas es mejor que lo uses con valores fijos. |
|
19/07/2005, 07:44
| ||||
| ||||
| 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 |
|
20/07/2005, 07:18
| ||||
| ||||
| 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 |
