Foros del Web » Creando para Internet » CSS »

?

Estas en el tema de ? en el foro de CSS en Foros del Web. Hola! Tengo un dos divs absolutos, uno con sus tamanos en pixeles, y otro en porcentaje de alto y ancho, el problema es que el ...
  #1 (permalink)  
Antiguo 29/09/2010, 21:07
 
Fecha de Ingreso: diciembre-2008
Mensajes: 67
Antigüedad: 9 años
Puntos: 1
Pregunta ?

Hola! Tengo un dos divs absolutos, uno con sus tamanos en pixeles, y otro en porcentaje de alto y ancho, el problema es que el div con medidas en porcentaje sobre pasa al otro div. Hay alguna manera de que no suceda esto?
  #2 (permalink)  
Antiguo 30/09/2010, 03:43
 
Fecha de Ingreso: septiembre-2010
Ubicación: http://nomenrecordo.blogspot.com/
Mensajes: 111
Antigüedad: 7 años, 2 meses
Puntos: 1
Respuesta: ?

Con el overflow
  #3 (permalink)  
Antiguo 30/09/2010, 06:33
 
Fecha de Ingreso: diciembre-2008
Mensajes: 67
Antigüedad: 9 años
Puntos: 1
Respuesta: ?

me puedes poner un ejemplo? gracias por la respuesta
  #4 (permalink)  
Antiguo 30/09/2010, 09:11
 
Fecha de Ingreso: septiembre-2010
Mensajes: 525
Antigüedad: 7 años, 2 meses
Puntos: 59
Respuesta: ?

Hola. Puedes poner al div con problemas:
Código CSS:
Ver original
  1. {overflow:auto;}
Espero que te sirva,
  #5 (permalink)  
Antiguo 30/09/2010, 13:55
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ?

Hola:

Sería interesante que indicaras la URL o en su defecto publicaras el código para poder ayudarte mejor.

Saludos.

  #6 (permalink)  
Antiguo 30/09/2010, 17:00
 
Fecha de Ingreso: diciembre-2008
Mensajes: 67
Antigüedad: 9 años
Puntos: 1
Respuesta: ?

tengo esto..

Código HTML:
Ver original
  1. <div id="window"></div>
  2. <div id="bar"></div>

Código CSS:
Ver original
  1. #window {position:absolute; top:0px; left:0px; width:100%; height:100%;}
  2. #bar {position:absolute; bottom:0px; left:0px; width:100%; height:30px;}

lo que quiero es que el #window ocupe todo sin sobrepasar el #bar, o sea 100% de height menos 30px
  #7 (permalink)  
Antiguo 30/09/2010, 17:20
Avatar de carmagedon  
Fecha de Ingreso: junio-2005
Ubicación: Argentina
Mensajes: 794
Antigüedad: 12 años, 6 meses
Puntos: 23
Respuesta: ?

Hola,

Probaste en poner ...

Código CSS:
Ver original
  1. position: relative;
  2. float: left;

En ambas clases? O bien, probá en jugar un rato con el height, poné en #window un alto estático, y andá fijandote como lo podés adaptar.
Sino vas a tener que utilizar javascript, para calcular el alto de la ventana, y luego a éste alto le restás el alto del #bar... de ésta forma tendrías tu valor dinámico con respecto a las dimensiones de la ventana sin importar que resolución tiene.

Saludos.
__________________
Freelance - Aplicaciones Web
  #8 (permalink)  
Antiguo 01/10/2010, 08:03
 
Fecha de Ingreso: diciembre-2008
Mensajes: 67
Antigüedad: 9 años
Puntos: 1
Respuesta: ?

Hola carmagedon, he probado lo que me dijiste y no funciona. He estado una hora o mas intentarlo areglarlo antes de consultarlo en el foro. En javascript tambien lo he intentado pero tengo poco conocimiento, tú sabrias como?
  #9 (permalink)  
Antiguo 01/10/2010, 08:13
Avatar de carmagedon  
Fecha de Ingreso: junio-2005
Ubicación: Argentina
Mensajes: 794
Antigüedad: 12 años, 6 meses
Puntos: 23
Respuesta: ?

Código CSS:
Ver original
  1. #window {
  2. position: relative;
  3. float: left;
  4. width:100&#37;;
  5. height: 200px;
  6. background-color: aqua;
  7. }
  8. #bar {
  9. position:relative;
  10. float: left;
  11. width:100%;
  12. height:30px;
  13. background-color: red;
  14. }

Probalo así por ahora, a ver si te funciona. En teoría tiene que aparecer un div debajo del otro.

Saludos.

EDIT: Fijate que no sé porque acá en el FORO el % me aparece width:100%... te aviso por las dudas, eso es width: 100 porcentaje.
__________________
Freelance - Aplicaciones Web
  #10 (permalink)  
Antiguo 01/10/2010, 13:42
 
Fecha de Ingreso: diciembre-2008
Mensajes: 67
Antigüedad: 9 años
Puntos: 1
Respuesta: ?

funciona pero con 100% de height de #window no funciona :/
  #11 (permalink)  
Antiguo 01/10/2010, 20:17
Avatar de carmagedon  
Fecha de Ingreso: junio-2005
Ubicación: Argentina
Mensajes: 794
Antigüedad: 12 años, 6 meses
Puntos: 23
Respuesta: ?

Fijate ahí a ver que pasa..

Código HTML:
Ver original
  1.     <head>
  2.         <title> test </title>
  3.         <style type="text/css">
  4.             .window {
  5.                 position: relative;
  6.                 float: left;
  7.                 width: 100%;
  8.                 background-color: aqua;
  9.             }
  10.             .bar {
  11.                 position:relative;
  12.                 float: left;
  13.                 width: 100%;
  14.                 background-color: red;
  15.             }
  16.         </style>
  17.     </head>
  18.     <body>
  19.         <div class="window" id="idwindow"></div>
  20.         <div class="bar" id="idbar"></div>
  21.     </body>
  22.     <script type="text/javascript">
  23.         var contentHeightBar = 30;
  24.         var contentHeightWindow = 0;
  25.         var totalHeightWindows = window.innerHeight;
  26.         contentHeightWindow = (totalHeightWindows - contentHeightBar);
  27.         document.getElementById("idwindow").style.height = contentHeightWindow + "px";
  28.         document.getElementById("idbar").style.height = contentHeightBar + "px";
  29.     </script>
  30. </html>

Cualquier cosa avisás.
Suerte.
__________________
Freelance - Aplicaciones Web
  #12 (permalink)  
Antiguo 02/10/2010, 01:20
Avatar de mortiprogramador
Colaborador
 
Fecha de Ingreso: septiembre-2009
Ubicación: mortuoria
Mensajes: 3.701
Antigüedad: 8 años, 3 meses
Puntos: 195
Respuesta: ?

Hola
bastante explicativo el titulo del tema.... a la próxima pon solo un punto...
intenta con overflow:scroll;
saludos
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, si nadie puede detenerte, te conviertes en algo muy diferente."
Visita piggypon.com
  #13 (permalink)  
Antiguo 02/10/2010, 02:22
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ?

Hola:

Prueba este ejemplo

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>
  6.             ?
  7.         </title>
  8.         <style type="text/css">
  9.             #window {
  10.                 position:relative;
  11.                 width:100%;
  12.                 height:100px;
  13.                 background-color:#f00;
  14.                 float:left;
  15.             }
  16.            
  17.             #bar {
  18.                 position:relative;
  19.                 width:30px;
  20.                 height:100px;
  21.                 background-color:#00f;
  22.                 float:right;
  23.             }
  24.         </style>
  25.     </head
  26.     <body>
  27.         <div id="window">
  28.             <div id="bar"></div>
  29.         </div>
  30.     </body>
  31. </html>

Saludos.

  #14 (permalink)  
Antiguo 03/10/2010, 13:00
 
Fecha de Ingreso: diciembre-2008
Mensajes: 67
Antigüedad: 9 años
Puntos: 1
Respuesta: ?

muchas gracias carmagedon, es lo que necesitaba!

mortiprogramador, llamo mas la curiosidad con este titulo.. ^^
  #15 (permalink)  
Antiguo 03/10/2010, 14:25
Avatar de Colorea  
Fecha de Ingreso: octubre-2010
Ubicación: En www.coloreahtml.zzl.org
Mensajes: 8
Antigüedad: 7 años, 2 meses
Puntos: 1
Respuesta: ?

El titulo esta genial ^^
  #16 (permalink)  
Antiguo 04/10/2010, 12:43
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: ?

Cita:
Iniciado por Colorea Ver Mensaje
El titulo esta genial ^^
Sobre todo, cuando pase al tiempo y alguien necesite localizar este tema para ver como se solucionó.

Hay que leer cada cosa...
__________________
Revisa las FAQ's antes de disparar.
  #17 (permalink)  
Antiguo 04/10/2010, 14:19
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ?

Hola:

Cita:
Iniciado por Impostor Ver Mensaje
Hay que leer cada cosa...
Sii, por ejemplo:

Cita:
Iniciado por Folter Ver Mensaje
mortiprogramador, llamo mas la curiosidad con este titulo.. ^^
Y yo que no me di cuenta del título, la próxima vez que vea otro título parecido de Folter, ni le contesto.

Saludos.


Etiquetas: 100, javascript, overflow, porcentaje, scroll
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 14:51.