Foros del Web » Creando para Internet » HTML »

Mostrar elementos de acuerdo a la pantalla

Estas en el tema de Mostrar elementos de acuerdo a la pantalla en el foro de HTML en Foros del Web. Hola Amigos, Estoy haciendo una pagina en html, pero cuando hago mas grande mi pantalla, las imagenes las deja en la misma position, y me ...
  #1 (permalink)  
Antiguo 27/05/2010, 12:02
 
Fecha de Ingreso: febrero-2009
Mensajes: 142
Antigüedad: 8 años, 10 meses
Puntos: 0
Mostrar elementos de acuerdo a la pantalla

Hola Amigos,

Estoy haciendo una pagina en html, pero cuando hago mas grande mi pantalla, las imagenes las deja en la misma position, y me deja un gran espacio, lo que quiero hacer es que cuando haga mas grande la pantalla los elementos se adpten a ella
  #2 (permalink)  
Antiguo 27/05/2010, 20:53
 
Fecha de Ingreso: septiembre-2009
Mensajes: 29
Antigüedad: 8 años, 3 meses
Puntos: 1
Respuesta: Mostrar elementos de acuerdo a la pantalla

Tienes que hacer tu sitio compatible con diferentes resoluciones (me imagino que te refieres a que a mayor resolución, más hueco queda)

Por ejemplo, según supongo, por lo que dices, talvez tu sitio se ve bien a 800x600, pero queda con mucho hueco viéndola a 1024 x 768

Lo que te sirve es, por medio de javascript; usar una hoja CSS por cada resolución.

Esto significa que tienes que estilizar tu sitio al menos para unas tres resoluciones, en 3 diferentes archivos. Por medio de javascript haces una detección de resolución, y dependiendo de la misma lanzas el archivo css en cuestión. Así el contenido se organizará según la resolución y todo se verá mejor
  #3 (permalink)  
Antiguo 29/05/2010, 13:33
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Mostrar elementos de acuerdo a la pantalla

Hola LouisDan, también estoy intentando presentar hojas de estilos segun resolucion y prové con el ejemplo de las FAQ de javascript mas no logro que funcione, por las dudas ¿tendrias la amabilidad de compartir un link o tutorial con el cual hallas aprendido a hacerlo?

Desde ya muchas gracias.
Un saludo!
  #4 (permalink)  
Antiguo 29/05/2010, 20:04
 
Fecha de Ingreso: septiembre-2007
Ubicación: PyRoot
Mensajes: 1.515
Antigüedad: 10 años, 2 meses
Puntos: 188
Respuesta: Mostrar elementos de acuerdo a la pantalla

Hola amigos. verán pueden hacer algo como esto

Código Javascript:
Ver original
  1. <script type="text/javascript" language="javascript">
  2. function updateCss(a){
  3. document.write('<link rel="stylesheet" href="'+a+'" type="text/css" />');
  4. }
  5.  
  6. if( (screen.width >= 1370) ) { updateCss('maxRes.css'); }
  7. else if( (screen.width <= 1360 && screen.width > 1280) ) { updateCss('1360x1280.css'); }
  8. else if( (screen.width <= 1280 && screen.width > 1024) ) { updateCss('1280x1024.css'); }
  9. else if( (screen.width <= 1024 && screen.width > 768) ) { updateCss('1024x768.css'); }
  10. else if( (screen.width <= 800) ) { updateCss('minRes.css'); }
  11. </script>

Como pueden ver deben crear 5 diferentes hojas de estilo:

minRes.css
1024x768.css
1280x1024.css
1360x1280.css
maxRes.css

Cada una de estas hojas de estilo deben ser elaboradas según la resolución indicada en su nombre.

Es básicamente esto, asi de simple.

Saludos.
__________________
Si quieres agradecer el triangulo obscuro de la parte derecha debes presionar +.
  #5 (permalink)  
Antiguo 29/05/2010, 20:46
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Mostrar elementos de acuerdo a la pantalla

Muchas gracias New!!

Etiquetas: elementos, pantalla
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 13:42.