¿ Como hacéis para auto-ajustar páginas web ?

kraneok

Una de las cosas con las que aún me peleo al maquetar web, es que me cuesta muchísimo conseguir que esta se auto-ajuste a las dimensiones de screen del explorador.

¿ Como lo hacéis vosotros ?, ¿ sugerencias fáciles de implementar o no tan fáciles ?
Espero que podáis ayudarme aunque sea un poquitito.

Un saludo!

HaxeR

Define "auto-ajustar". Para que el contenido se ajuste al tamaño de la ventana, solo tienes que usar porcentajes al definir los anchos:

#contenedor{
    width:  100%; /*xxx%*/
}

Pon algun codigo de alguna web que no puedas "auto-ajustar" asi podremos ayudarte y entender la pregunta mejor :)

1 respuesta
kraneok

#2
Bueno quizás me he explicado mal, a lo que me refería es a que se centre el contenido bien, y no que por ejemplo en una pantalla de 20" me salga centrado el contenido total y en una de 15" me salga en la izquierda XDD

2 respuestas
HaxeR

#3 Ahmm , si te refieres a centrar los contenidos, lo normal es centrar el div que contiene "toda" la web, normalente a este div se le pone un:

#contenedor{
    width: 980px;
    margin: 0 auto;
}

De esta manera siempre se verá centrado en resoluciones mayores de 980px, si la resolucion o el tamaño del navegador es menor, te saldran scrolls. Para evitar esto, podrías usar (deberias!) responsive design y adaptar la web a los diferentes dispositivos y resoluciones, pero esto ya creo que es otra cuestion.

Has pensado en usar algun framework css? Te vas a ahorrar muchos dolores de cabeza:

960 Grid System
Yaml 4 CSS Framework
Bootstrap
...

1 1 respuesta
DarkSoldier

junta lo de #4 mas responsive design

1 respuesta
eXtreM3

#5 qué obsesión con el responsive, aquí no es necesario xD

Te haces tu contenedor y lo centras. Después todos los elementos los pones con % y las fuentes en em.

1 1 respuesta
DarkSoldier

#6 si!! mira #3 xDD con eso entiendo que quiere que se vea bien en varias resoluciones xD

1 respuesta
eXtreM3

#7 y qué? para que se vea bien en todas las resoluciones no hace falta responsive. El responsive es para cambiar el diseño y contenido según resolución, no para mostrar lo mismo.

Para ver bien lo mismo -> % y em.

1 respuesta
shako
/* Funciona, pero ya no se utiliza, al validar en el w3c lo considera una error */

#contenedor{
    float:center;

}

DarkSoldier

#8 puede k tengas razon xDDD u win this time xD

kraneok

Gracias a todos, pondré en práctica todo lo que recomendado.
Debo decir que siempre uso wrappers.

P

Los temas responsives o flexibles te ha de permitir que tu página web se visualicen en moviles con mayor optimización..

tOWERR

El ancho definido por porcentaje y el margen del contenedor auto, asi se ajusta al centro y funciona correctamente para cualquier tipo de resolución.

CODIGO

Usuarios habituales