Foros del Web » Creando para Internet » CSS »

Problema con ajustes relativos

Estas en el tema de Problema con ajustes relativos en el foro de CSS en Foros del Web. Hola todos/todas: Estoy definiendo las propiedades de mi proyecto de manera que se ajuste proporcionalmente a la resolución/tamaño de pantalla de los hipotéticos visitantes. Por ...
  #1 (permalink)  
Antiguo 07/03/2011, 12:28
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 2 meses
Puntos: 4
Problema con ajustes relativos

Hola todos/todas:

Estoy definiendo las propiedades de mi proyecto de manera que se ajuste proporcionalmente a la resolución/tamaño de pantalla de los hipotéticos visitantes. Por el momento me va saliendo lo que yo quiero , sin embargo (...siempre hay un sin embargo) esta tabla de div's se resiste a seguir la alineación.
Me explico, cuando las celdas ocupan el 100% del ancho del contenedor se alinean bien, las dificultades vienen cuando trato de poner tres celdas en la misma línea, entonces no hay manera de ajustar con precisión para que queden alineadas con la de arriba. Llevo toda la tarde haciendo cálculos esotéricos (..incluso conjuros y maldiciones) y nada; se resiste a quedar alineada.
Os dejo el código para que me digáis el fallo (ya se que si fueran valores absolutos sería más fácil pero yso soy así, cabezón)
Código:
#caja_tabla {float:left;width:70%; z-index:5;margin-left:15%;}
#Caja1{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:100%;margin:0.25%;text-align: Center;font-size:auto;font-weight: bold;line-height: auto;}
#Caja2{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:100%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}
#Caja3{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:32.8362%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}
#Caja4{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:32.8365%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}
#Caja5{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:32.8362%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}
Gracias por vuestra ayuda,
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)
  #2 (permalink)  
Antiguo 07/03/2011, 15:57
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Problema con ajustes relativos

¿puedes poner también el HTML? Al menos el referente al css que has dejado. No hay manera de adivinar a qué elementos se corresponden tus reglas css.
  #3 (permalink)  
Antiguo 07/03/2011, 23:51
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 2 meses
Puntos: 4
Respuesta: Problema con ajustes relativos

Hola SanXuan:

Aquí tienes lo que pedías, están el CSS y el HTML juntos te lo he simplificado para que lo puedas ver sin el resto de código.

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " [url]http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url] ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>

   <title></title>

   

   <style>

#caja_tabla {float:left;width:50%; z-index:5;margin-left:25%;}
#Caja1{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:100%;margin:0.25%;text-align: Center;font-size:auto;font-weight: bold;line-height: auto;}
#Caja2{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:100%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}
#Caja3{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:32.8362%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}
#Caja4{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:32.8365%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}
#Caja5{background:#778899;float:left;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:32.8362%;margin:0.25%;text-align: Center;font-weight: bold;line-height: auto;}


</style>
  
</head >

<body>


		<div id="caja_tabla">

				<div id="Caja1">
				<p>Cuaderno</p></div >
				
				<div id="Caja2">
				<p>Resultados</p></div >
				
				<div id="Caja3">
				<p>Ventas"</p></div >
				
				<div id="Caja4">
				<p>Unidades</p></div >
				
				<div id="Caja5">
				<p>Margen</p></div >
				
			</div>
</Body>
</html> 
Gracias de nuevo,
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)
  #4 (permalink)  
Antiguo 08/03/2011, 06:12
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Problema con ajustes relativos

El problema es justo el contrario al que explicas. Son las celdas inferiores las que están bien definidas, sin embargo las dos superiores a las que has dado un ancho 100% ocupan más que su contenedor por tener definido un margen del 0.25%.
Puedes observarlo si añades un color de fondo a #caja_tabla y añades la propiedad overflow:hidden.
El espacio que ocupa un elemento es la suma de las dimensiones del contenido más los bordes, más el padding, más los márgenes. Por tanto para Caja1 y Caja2 el ancho es de 100.5% en lugar de 100%.
Basta con cambiar el ancho para las celdas superiores a 99.5% y se alinearán.
Para el cálculo de las celdas inferiores puedes seguir el mismo método width= (100% - 3*2*0.25%)/3.
Cada celda tiene un margen derecho y uno izquierdo, que son 2*0.25% multiplicado por tres celdas supone 1.5%. Si restamos esta cantidad de 100% tenemos 98.5% que dividido entre tres resulta ser 32.833%. Aproximadamente tus cálculos.
Por último, recordar que éste cálculo es válido para elementos flotantes. Los cálculos pueden ser otros para otra configuración.
Un saludo.
  #5 (permalink)  
Antiguo 08/03/2011, 11:17
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 2 meses
Puntos: 4
Respuesta: Problema con ajustes relativos

Muchas Gracias. Me ha sido muy útil tu comentario.
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)

Etiquetas: Ninguno
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 11:12.