trabajar los div en porcentaje...se mueve todo????

geograf_art · #1 (**permalink**) 13/07/2005, 18:33

hola amigos, tengo un problema al trabajar con los div, esty haciendo un div madre q contiene a todos, de ahi un div central(encabezado), despues 3 div verticales uno para el menu, el centro(cuerpo), lateral(publicidad), lo quiero trabajar todo en porcentaje pero se me mueve todo, cuando lo tabajo en medidas absolutas no pasa nada , alguien q me podria ayudar le adjunto el codigo y el Css:

<html>
<head>
<link rel="stylesheet" type="text/css" href="estiloborrar.css">
</head>
<body>
<div id="Madre">
<div id="cabeza"><img src="gif/cabeza.gif"></div>
<div id="Izquierda">xxxxxxxxxxxxxxxxxx</div>
<div id="Central">xxxxxxxxxxxxxxxxxxx </div>
<div id="Derecha"> xxxxxxxxxxxxxxxxx </div>
</div>
</body>

CSS

body {
background : #C0D9D9 ;
background-image : url(images/f2.gif );
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 0px 0px 0px 0px;
text-align: center;
}
#Madre { text align:left;width:90%; margin:auto; height:100%;
}
#cabeza{top:0;left:0; width:100%; height:100%;
background-color:#FFFF00;}
#Izquierda {float:left; top:0; left:0; width:20%; height:100%;
background-color:#FF6633}
#Central { float:left; background-color:#0033FF;}
#Derecha { float:right; width:20%; height:100%;
background-color:#33FF00; }

De antemano gracias por la ayuda

ramm · #2 (**permalink**) 13/07/2005, 21:12

Bueno, tienes varios errores en el CSS
Te voy diciendo lo que vi:

Primero, debes intentar ser mas consistente con el codigo, eso de dejar un espacio aqui, despues no, a vees salto de linea a veces no...no es nada bueno, debes tener organizado tu codigo para poder revisarlo bien, ademas aseguras asi que la sintaxis es correcta.
1-en #madre, no pongs margin:auto; sino margin: 0 auto; para que sea auto a los aldos solamente y arriba y abajo de 0.
Ademas fijate que pusiste "text align:left;" te falto el guion text-align

2-#cabeza no puede tener 100% de altura, en tal caso 100px pero no 100%
3-top:0; y left:0; no es necesario para nada.
4-#izquierda lo mismo que #cabeza, todo no puede tener 100% de altura, 100% quiere decir toda la pantalla. igual aqui top y left no hacen nada.
5-#central, ponle un ancho de 60 % (20 + 20 + 60 =100% [aunque no es tan facil])
6-#derecha vuelve el height:100%; quita eso y agrega esta linea porque IE suele sacar mal su cuenta:

Código:

*w\idth:19%;

Con todo y asterisco, se supone que es un error, pero IE igual lo leera y le pondra esa medida. Esto lo hago porque para IE 20% + 20% + 60% no caben en 100%

y eso es todo, pruebalo asi.

Solo debes tener mas cuidado con la sintaxis y revisar para que es cada cosa, a ver si realmente la necesitas.

De todas maneras no se para que quieres todo por %, te va a ser muy dificil meter contenido ahi. Yo te recomiendo usar valores fijos.

Saludos.

kemie · #3 (**permalink**) 14/07/2005, 04:28

Cita:

IE 20% + 20% + 60% no caben en 100%

como?

creoq ue a lo que te refieres es que internet explorer tiene problemas al calcular los anchos cuando los elementos tienen bordes o padding, pero la aritmetica si le sale bien ;)

ramm · #4 (**permalink**) 14/07/2005, 09:28

Intentalo tu misma, copia eso y ponle los valores completos y veras como en IE el ultimo div se va hacia abajo, y ninguno tiene ni padding ni borde.

PD: no siempre la teoria es igual a la practica.

geograf_art · #5 (**permalink**) 14/07/2005, 11:26

hola gracias por la respuesta

, hice el truco q me dijistes pero igual ,la caja de la derecha me sale abajo y la caja del centro a la izquierda, esta bien poner a la caja del centro float:left??, bueeno a ver si me pueden ayudar, una pregunta adicional a todo esto,si no puedo poner el heigth 100% entonces como calculo el alto, me gustaria q las columnas verticales crescan a la misma proporcion siempre y q no se me descuadren cuando en una haya mas alto???
Te adjunto el codigo css y el html de nuevo , gracias por la paciencia

CSS

body {
background : #C0D9D9 ;
background-image : url(images/f2.gif );
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
text-align: center;
}
#Madre { text-align:left;width:90%; margin:0 auto;
}
#cabeza{top:0;left:0; width:100%;
background-color:#FFFF00;}
#Izquierda {float:left; *w\idth:19%; width:20%;
background-color:#FF6633}
#Central { float:left; width:60%; background-color:#0033FF;}
#Derecha { float:right; *w\idth:19%;width:20%;
background-color:#33FF00; }

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="estiloborrar.css">
<link href="estiloBorrar2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Madre">
<div id="cabeza"><img src="gif/cabeza.gif"></div>
<div id="Izquierda">xxxxxxxxxxxxxxxxxx</div>
<div id="Central">xxxxxxxxxxxxxxxxxxx </div>
<div id="Derecha"> xxxxxxxxxxxxxxxxx </div>
</div>
</body>
De antemano gracias por sus respuestas amigos

ramm · #6 (**permalink**) 14/07/2005, 13:19

No puedes hacer que las columnas crezcan igual, a menos que lo hagas con JS o algo asi.

No se porque no te funciono, yo lo probe en ambos navegadores antes de enviartelo y se veia perfecto.
Haz un cosa, dejalo en width:19%; sin trucos ni nada, y quitale el de 20% a ver si te sirve

geograf_art · #7 (**permalink**) 14/07/2005, 15:23

gracias amigo me sirvio tu ayuda, se aprende mucho en este foro

iconogt · #8 (**permalink**) 14/07/2005, 20:25

Al principio usaba porcentajes, pero no es buena idea cuando se trabaja con CAPAS, por la razón que si cambias el tamaño a la ventana (restaurar), la capa se adapta al tamaño que tiene la ventana, no sé si me dí a entender, pero igual luego lo explico mejor, ahora lo que uso es la medida por defecto px.

ePorroa · #9 (**permalink**) 27/07/2005, 14:37

Consulta:

#Derecha { float:right; *w\idth:19%;width:20%;

*w\idth:19%.
Es válido poner eso?...*w\...

Saludos

ramm · #10 (**permalink**) 27/07/2005, 16:09

no es valido, es un hack para IE