Foros del Web » Creando para Internet » CSS »

Limitar ancho de un div

Estas en el tema de Limitar ancho de un div en el foro de CSS en Foros del Web. Hola, tengo dos divs, uno dentro de otro, tal que así: El elemento amarillo va variando su ancho. Empieza con un ancho de 0px y ...
  #1 (permalink)  
Antiguo 01/02/2011, 07:34
Avatar de AubeRoseau  
Fecha de Ingreso: diciembre-2010
Ubicación: Sevilla
Mensajes: 90
Antigüedad: 13 años, 4 meses
Puntos: 2
Limitar ancho de un div

Hola, tengo dos divs, uno dentro de otro, tal que así:



El elemento amarillo va variando su ancho. Empieza con un ancho de 0px y mediante javascript voy aumentándolo con el paso del tiempo. Lo que quiero es limitar el máximo del ancho al ancho del elemento que lo contiene, el cual es fijo. ¿Se puede hacer?
  #2 (permalink)  
Antiguo 01/02/2011, 07:38
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 13 años, 8 meses
Puntos: 64
Respuesta: Limitar ancho de un div

para limitar el div que contiene la barra amarilla simplemente le das una medida en pixel, width:100px;

no deberia haber problema ... pero eso mejor pega el codigo para ver como tenes
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 01/02/2011, 08:00
Avatar de AubeRoseau  
Fecha de Ingreso: diciembre-2010
Ubicación: Sevilla
Mensajes: 90
Antigüedad: 13 años, 4 meses
Puntos: 2
Respuesta: Limitar ancho de un div

Te dejo el código CSS:

Código CSS:
Ver original
  1. .container_progress {
  2.     width: 100px;
  3.     height: 10px;
  4.     border: 1px solid blue;
  5.     position: absolute;
  6.     margin-left: 705px;
  7.     margin-top: 14px;
  8.     margin-bottom: 0px;
  9.     }
  10.  
  11. .progress {
  12.     width: 0px;
  13.     height: 10px;
  14.     background-color: yellow;
  15.     }

El problema es que debido al código javascript, puede que se le de un ancho a .progress más ancho que su contenedor .container_progress y lo que quiero es que si el código javascript quiere darle una anchura mayor que el contenedor entonces se ponga el máximo que sería 100px (la anchura de contenedor).
No sé si me entiendes, pero explicándotelo he caído que lo voy a tener que controlar en el código de javascript, en lugar de modificar el archivo css ¿no?
  #4 (permalink)  
Antiguo 01/02/2011, 08:03
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 13 años, 8 meses
Puntos: 64
Respuesta: Limitar ancho de un div

Si deberas controlarlo desde javascript para lo que deseas hacer

Cita:
Iniciado por AubeRoseau Ver Mensaje
Te dejo el código CSS:

Código CSS:
Ver original
  1. .container_progress {
  2.     width: 100px;
  3.     height: 10px;
  4.     border: 1px solid blue;
  5.     position: absolute;
  6.     margin-left: 705px;
  7.     margin-top: 14px;
  8.     margin-bottom: 0px;
  9.     }
  10.  
  11. .progress {
  12.     width: 0px;
  13.     height: 10px;
  14.     background-color: yellow;
  15.     }

El problema es que debido al código javascript, puede que se le de un ancho a .progress más ancho que su contenedor .container_progress y lo que quiero es que si el código javascript quiere darle una anchura mayor que el contenedor entonces se ponga el máximo que sería 100px (la anchura de contenedor).
No sé si me entiendes, pero explicándotelo he caído que lo voy a tener que controlar en el código de javascript, en lugar de modificar el archivo css ¿no?
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #5 (permalink)  
Antiguo 01/02/2011, 08:27
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Limitar ancho de un div

todo pasa por js. con la propiedad clientWidth obtienes el ancho de container_progress, este valor lo usas en ciclo. usa un DOCTYPE para que no haya problemas

Etiquetas: ancho, limitar
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 06:41.