Comunidad de diseño web y desarrollo en internet online

¿Como AUTOAJUSTAR mi sitio web a diferentes tamaño de monitor con CSS?

Citar            
MensajeEscrito el 24 Jul 2012 01:36 am
Quiero hacer que mi sitio web se autoajuste a los diferentes tamaños de monitor (resoluciones) ya que cuando entro a mi sitio desde una netbook se ve muy tosco y demasiado grande, en cambio en monitores de 15pulgadas para arriba mi sitio se ve tal y como debería de verse, Ya intente poniendo porcentajes a mis DIVS pero aun así sigue variando en tamaño (y mucho) en diferentes resoluciones.

quiero hacer algo como esto:

http://www.amasb.com.mx/

obvio se que esa pagina esta en flash pero quiero imitar el autoajustado de las paginas flash.. sin importar que resolución o tamaño de monitor tenga la pagina siempre se ajusta y aunque aumente o disminuya el zoom siempre se queda igual, exactamente eso es lo que quiero hacer pero con CSS o incluso con Javascript.. alguien sabe como hacer eso? de antemano muchas gracias.

Por chavamuoz

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 24 Jul 2012 02:53 am
Hola, espero que te pueda ayudar, no se si ya probaste haciendo una div que contenga toda la pagina y esa div la puedes hacer del tamaño que quieras, si no quieres que tu div abarque el 100% de tu pagina por ejemplo de unos 1000px para que se te centre y jamas se desborde tu contenido le pones margin, la pagina no la pude ver solo me aparece un letrero que dice hola, espero ayudarte. :)

Por Erickito

7 de clabLevel



 

chrome
Citar            
MensajeEscrito el 24 Jul 2012 08:42 pm
idem arriba
creas un div que contenga TODA la web
lo centras y le pones un ancho especifico por ej 1000px

luego en css le pones margin:0 auto 0 auto;
para que este centrada
posicion relativa
o posicion absoluta

Por skaterseba

Claber

170 de clabLevel



 

firefox
Citar            
MensajeEscrito el 25 Jul 2012 03:15 am
Usa los @media queries y ajustas tu sitio dependiendo de un (o varios) ancho máximo.

También búscalo como "responsive design"

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 25 Jul 2012 04:32 pm
Hola,

Erickito.
La pag que puse arriba tiene un intro en flas solo tienes que darle click a la pantalla y se lo salta.. http://www.amasb.com.mx/

skaterseba.
Ya intente poniendo un div contenedor pero aun así algunas cosas se siguen viendo mal.. y mas si se trata de IE ya que no me acepta divs vacíos con porcentaje tengo que poner un hack para IE y poner los anchos con pixeles.

este es mi div contenedor:

#wrap{
position: relative;
margin: 0 auto 0 auto;
padding: 0px;
width: 80%;
height: 100%;
}

nasho.
y los CSS responsivos no los eh utilizado pero lo intentare con eso.. no es exactamente lo que busco pero al parecer es una opción viable.

GRACIAS por sus respuestas =D

Por chavamuoz

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 25 Jul 2012 07:48 pm
no compañero nada de porcentajes
no tiene logica q uses porcentajes :P
sino obvio q no va a surtir efecto.
xq cada navegador tiene otro tamaño para mostrar las paginas
te conviene hacerlo en una medida exacta y usar esa medida sin importar la resolucion
por ende cambiar el porcentaje por pixeles, y la altur no es necesaria, puesto que es un contenedor, en cuanto le metes algo adentro se autoajusta. saludos.

Por skaterseba

Claber

170 de clabLevel



 

opera
Citar            
MensajeEscrito el 26 Jul 2012 04:37 pm
Tiene razón skaterseba, nada de "porcentajes" en el caso de tu página, si la tienes 100% en flash busca en el foro, hace tiempo en el foro de flash yo encontré algo respecto a las páginas echas en flash para que se ajustarán a las pantallas

Por Erickito

7 de clabLevel



 

chrome
Citar            
MensajeEscrito el 26 Jul 2012 04:39 pm
Con mediaqueris :D

Por Eclypse

Claber

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 28 Ago 2012 07:16 pm
Gracias a todos por sus respuestas me sirvieron de mucho XD aunque al final opte por usar medidas en pixeles xD jeje

P.D. tengo que cerrar la pregunta o marcarla como resuelta? y si es así alguien sabe como se hace eso? es que no encuentro esa opción o.O

Por chavamuoz

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 28 Ago 2012 10:01 pm
Yo te recomiendo que uses media querys, y te puedo dar unos cuantos consejos sobre responsive design con un artículo que cree hace un tiempo:
http://xitrus.es/blog/2/Responsive_Design

Y si quieres ver como usar las @media querys te recomiendo este:
http://xitrus.es/utilidades/Media_en_CSS

Por pedro-vk

Claber

423 de clabLevel

5 tutoriales

Genero:Masculino  

Diseñador y Desarrollador Web

chrome
Citar            
MensajeEscrito el 09 Ago 2013 06:40 pm
Solo para actualizar este tema, después de un tiempo volví a rediseñar mi sitio con diseño responsivo y ya esta al 100 jeje gracias a todos por sus consejos y respuestas. saludos. xD

y pedro-vk Gracias, estaré dándome una vuelta por tu sitio para algunas dudas xD saludos.

Por chavamuoz

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 17 Dic 2018 10:29 pm
Hola! Como estan? Disculpen que reviva un tema tan viejo pero necesito su ayuda. He encontrado este post por Google y es justo el problema que estoy teniendo en mi sitio web. Por eso me he registrado en esta fantástica comunidad de la que espero me den la bienvenida, para poder preguntar sobre este tema. Como se utilizan las Media Querys? O sea hay que colocarlas dentro del CSS no? Yo utilizo un wordpress pero no sé bien como se manejan los estilos desde ahí, no sé programar desde cero, me podrían ayudar? Mi idea es que mi sitio web (es este) se vea bien desde tablets, porque me han comentado que se ve bien desde celulares y PC pero no desde tablet (se desfasa un poco el contenido hacia la derecha) muchas graicas desde ya por su ayuda

Por SofyGonzalez

0 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.