Foros del Web » Creando para Internet » CSS »

Diseño flexible :: Porcentajes diferentes a div principal

Estas en el tema de Diseño flexible :: Porcentajes diferentes a div principal en el foro de CSS en Foros del Web. Hola a todos. Tengo una div prinical centrada, con 90% de ancho. Mi interrogante es, si se puede que, de alguna manera, al superar ciertos ...
  #1 (permalink)  
Antiguo 17/08/2011, 22:59
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 10 años
Puntos: 8
Diseño flexible :: Porcentajes diferentes a div principal

Hola a todos.

Tengo una div prinical centrada, con 90% de ancho.

Mi interrogante es, si se puede que, de alguna manera, al superar ciertos px del espacio disponible, vaya reduciéndose ese porcentaje hasta un mínimo de por ejemplo, 75% ?

Esto para que, al ser resoluciones pequeñas, no se desperdicie espacio. Y al ser resoluciones mayores, ir dejándo mayor espacio a los costados para que no se vea tan expandida?

Muchísimas gracias.
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #2 (permalink)  
Antiguo 18/08/2011, 10:07
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 5 meses
Puntos: 269
Respuesta: Diseño flexible :: Porcentajes diferentes a div principal

Para esto ya deberías usar javascript. Si usas jquery debes usar rezise();

Te comparto un ejemplo. Luego lo adaptas a tu necesidad:


Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <title>Documento sin título</title>
  5.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  6.     <script type="text/javascript">
  7.         $(document).ready(function(){
  8.             var windowWidth = $(window).width(); //retrieve current window width
  9.             var windowHeight = $(window).height(); //retrieve current window height
  10.             var documentWidth = $(document).width(); //retrieve current document width
  11.             var documentHeight = $(document).height(); //retrieve current document height
  12.             var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
  13.             var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position
  14.            
  15.             $('#window').html("<b>ancho inicial</b>: "+windowWidth+"px, <b>alto inicial</b>: "+windowHeight+"px");
  16.            
  17.             $(window).resize(function() {
  18.             $('#wx').val($(window).width()+"px");
  19.             $('#wy').val($(window).height()+"px");
  20.             });
  21.         });
  22.     </script>
  23. </head>
  24.     <div id="window"></div>
  25.     <b>ancho actual</b>:
  26.     <input type="text" id="wx"/>
  27.     <b>alto actual</b>:
  28.     <input type="text" id="wy"/>
  29. </body>
  30. </html>

Saludos.
  #3 (permalink)  
Antiguo 18/08/2011, 18:45
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 5 meses
Puntos: 269
Respuesta: Diseño flexible :: Porcentajes diferentes a div principal

mira, casualmente me encontré con esto http://css-tricks.com/6206-resolutio...c-stylesheets/
  #4 (permalink)  
Antiguo 18/08/2011, 20:35
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 10 años
Puntos: 8
Respuesta: Diseño flexible :: Porcentajes diferentes a div principal

Vaya, muchísimas gracias por el ejemplo, voy a analizarlo.

Aunque particularmente, el enlace que haz puesto me parece una solucion mucho más limpia y es exactamente lo que buscaba.

Muchísimas gracias, Cristian ;)
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #5 (permalink)  
Antiguo 18/08/2011, 22:40
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 5 meses
Puntos: 269
Respuesta: Diseño flexible :: Porcentajes diferentes a div principal

Cita:
Iniciado por hey_alan Ver Mensaje
el enlace que haz puesto me parece una solucion mucho más limpia
Aunque lo mejor es que ya está hecho no? XD. Yo también pienso usarlo jeje. Me alegra que te sirviera.
  #6 (permalink)  
Antiguo 18/08/2011, 23:21
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 10 años
Puntos: 8
Respuesta: Diseño flexible :: Porcentajes diferentes a div principal

Discrepo conmigo mismo con lo de "más limpia". Acabo de darme cuenta que la solución "estandar" sólo funciona con navegadores recientes.... lo que es un oxymoron pues regularmente la gente con resoluciones pequeñas tiene navegadores viejos. Proponen un método que involucra JQuery para esos casos, lo cuál viene siendo casi lo mismo puesto que de cualquier manera la gente con browsers recientes lo tiene activado.

Pero da igual, lo que importa es que funciona xD.

Lo que voy a hacer es implicar por default el tamaño para las resoluciones chicas en el css, y ya modificarla con JS para las nuevas.

De nuevo, muchas gracias :P
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #7 (permalink)  
Antiguo 19/08/2011, 10:45
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 5 meses
Puntos: 269
Respuesta: Diseño flexible :: Porcentajes diferentes a div principal

Cita:
Iniciado por hey_alan Ver Mensaje
Lo que voy a hacer es implicar por default el tamaño para las resoluciones chicas en el css, y ya modificarla con JS para las nuevas.
Hey, eso es genial.

Etiquetas: ancho, diferentes, diseño, porcentajes, principal
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 02:40.