Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de trabajar los div en porcentaje...se mueve todo???? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/07/2005, 19:33
Avatar de geograf_art  
Fecha de Ingreso: abril-2005
Mensajes: 55
Antigüedad: 12 años, 8 meses
Puntos: 0
Exclamación trabajar los div en porcentaje...se mueve todo????

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
  #2 (permalink)  
Antiguo 13/07/2005, 22:12
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
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.
  #3 (permalink)  
Antiguo 14/07/2005, 05:28
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
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 ;)
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #4 (permalink)  
Antiguo 14/07/2005, 10:28
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
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.
  #5 (permalink)  
Antiguo 14/07/2005, 12:26
Avatar de geograf_art  
Fecha de Ingreso: abril-2005
Mensajes: 55
Antigüedad: 12 años, 8 meses
Puntos: 0
la caja de la derecha y del centro sale abajo

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
  #6 (permalink)  
Antiguo 14/07/2005, 14:19
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
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
  #7 (permalink)  
Antiguo 14/07/2005, 16:23
Avatar de geograf_art  
Fecha de Ingreso: abril-2005
Mensajes: 55
Antigüedad: 12 años, 8 meses
Puntos: 0
gracias amigo me sirvio tu ayuda, se aprende mucho en este foro
  #8 (permalink)  
Antiguo 14/07/2005, 21:25
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
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.
__________________
_______
Jorge Rojas.

Última edición por iconogt; 15/07/2005 a las 09:18 Razón: Escribí algo malo :-D
  #9 (permalink)  
Antiguo 27/07/2005, 15:37
Avatar de ePorroa  
Fecha de Ingreso: enero-2003
Ubicación: Lima
Mensajes: 100
Antigüedad: 14 años, 11 meses
Puntos: 0
Consulta:

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

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

Saludos
  #10 (permalink)  
Antiguo 27/07/2005, 17:09
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
no es valido, es un hack para IE
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:54.