Centrando web con CSS, pero...

emal011 · #1 (**permalink**) 27/04/2009, 08:01

Estaba centrando mi web con frames el cual daba un buen resultado, pero por el tema de posicionamiento trate de utilizar CSS, el cual dio un buen resultado tambien, pero... mi jefe al utilizar la herramienta zoom(IE & Firefox) se dio cuenta de que con CSS la pagina al hacer zoom se va hacia una esquina. Con los frames no sucedia eso y todo quedaba centrado.

El resultado fue volver a utilizar frames, pero desde que vulevo a utlizar frames las visitas a mi web han bajado en un 70%.
Nose que le a picado a mi jefe, pero a el le gusta usar el zoom, creo q decirle que se ponga lentes es tener pie y medio en la calle.

Asi que, como puedo hacer, utilizando CSS, que la pagina este siempre centrada inclusive si utilizo Zoom.

pitufoweb · #2 (**permalink**) 27/04/2009, 09:00

Si nos muestras la web podríamos ver cual es el problema.

Bye.

Calizman · #3 (**permalink**) 27/04/2009, 09:41

Saludos!!

La forma de centrar una web y que se mantenga asi, es hacer un div que contenga todo el sitio, por ejemplo, un #wrap que esté luego de <body> y antes de </body>. A este #wrap tendrias que ponerle:

#wrap {
position: relative;
margin: 0px auto;
width: 800px;
}

Y con eso, tienes una web perfectamente centrada, y cuando tu jefe haga el zoom se quedara en el centro.

Hasta Luego!!

PD: Como un dato extra, esto funciona si, y solo si, tienes un DOCTYPE valido.

pitufoweb · #4 (**permalink**) 27/04/2009, 11:00

Hola CaLiZzZ. Para centrar no hace falta poner position: relative; O me estoy perdiendo de algo?

Bye.

Calizman · #5 (**permalink**) 27/04/2009, 11:24

Fijate que no es necesario... Pero con position: relative; (en el wrap) hace que se mantenga ahi donde queires el div, luego de pruebas, pruebas y mas pruebas... llegue a la conclusion que position: relative; hace que el div que contiene todo sea mas estable. Asi tambien te sirve para IE6 y demas...

Te invito a que hagas pruebas con otros tipos de posiciones, o que intentes dejarlo sin posicion, y veras que al final de cuentas... position: relative; ayuda bastante.

Una vez escuche algo asi como: "Si crees que algo puede salir mal, ten por seguro que saldra mal" Para mi, una frase que nos dice que mientras dejemos menos cosas "al aire", sera mejor.

He ahi mi explicacion.

pitufoweb · #6 (**permalink**) 27/04/2009, 11:34

Muchas gracias CaLiZzZ por tu respuesta. Pero hice algunas pruebas y no veo la diferencia.

Tienes algún ejemplo donde pueda ver alguna diferencia?

Saludos.

Mikmoro · #7 (**permalink**) 27/04/2009, 11:53

Creo que el asunto sería este:
- por un lado, no viene mal poner la posición relativa porque si quieres colocar dentro de él cualquier cosa con posición absoluta, ésta lo será con respecto a #wrap, y no al HTML completo, gracias a que tiene esa posición relativa.
- por otro lado, una de las mayores fuentes de problemas en IE6 es que las cajas no tiene posición por defecto, de manera que muy a menudo hay errores que se evitan simplemente dando posición relativa a un elemento conflictivo o su elemento padre, por lo que también nos convendría tenerlo puesto por defecto.

Finalmente no, realmente no es necesario para que se centre. Lo que pretende Caliz (creo) es que nunca molesta, no creo que nunca vaya a producir problemas y puede resultar muy beneficioso dejarlo ahí.

Calizman · #8 (**permalink**) 27/04/2009, 14:43

Cita:

Finalmente no, realmente no es necesario para que se centre. Lo que pretende Caliz (creo) es que nunca molesta, no creo que nunca vaya a producir problemas y puede resultar muy beneficioso dejarlo ahí.

Exacto, Gracias por la ayuda Mikel!

pitufoweb · #9 (**permalink**) 28/04/2009, 10:03

Gracias a los dos por la información. Investigare un poco mas sobre eso.

Saludos.

emal011 · #10 (**permalink**) 29/04/2009, 05:22

Mmmm seria cuestion de probar.

La web en q trabajo es http://www.zip.de si se dan cuenta, al apretar Ctrl + "+ ó -" el zoom hace q la pagina siempre se mantenga al centro (hasta cierto punto claro).

Pero al utilizar CSS el zoom trabaja asi: http://www.hf-consult.com ven como la web se vas hacia una esquina?

Mikmoro · #11 (**permalink**) 29/04/2009, 08:16

En realidad no se te va hacia la izquierda, sino que lo que hace aparecer el scroll horizontal es el texto al crecer, que al tener palabritas como "Montageanleitungen" que no se pueden dividir, se salen de su contenedor y eso te da la sensación de que todo se queda a la izquierda.

He de decirte que eso no tiene fácil solución.

emal011 · #12 (**permalink**) 29/04/2009, 08:22

una idea de lo que quiero hacer, en vez de utilizar frames, es hacerlo con CSS pero que me de un resultado igual.

La cosa es que quiero que se vea asi, centrado.
Como ven en la imagen, el marco de color verde seria la pantalla del usuario, ahi va los sublinks izquierdos, los links generales en la parte superior, y desde luego la descripcion del producto en la parte inferior central.
Todo eso lo encierro en un wrap? cada div que va a contener cada seccion, lo debo configurar en un css o en el mismo html?

Como lo abran notado, en zip.de, al ingresar van a un menu, eso ni hablar, queda asi!!, pero si le dan click a algun enlace este abre igual como en la imagen que les publico, pero lo malo es que utiliza frames, y eso no me funciona bien con los buscadores, ya que, tomando como ejemplo la imagen, google me detecta en vez de 1 pagina me detecta 7, pues aparte de esas secciones, hay tambien arriba.htm, abajo.htm, izq.htm, drc.htm(en el modo frames) y si escribo indesign en el buscador, se enlaza a mi web pero solo el html indesign y no la web completa con enlaces y todo...

la pregunta es, como maquetearia la web?, con que orden?, siempre y cuando quede centrada.

Mikmoro · #13 (**permalink**) 29/04/2009, 08:29

Pues eso que muestras no tiene mucho que ver con lo que había en el enlace, pero sí, vamos, que para centrar eso basta con los consejos que te habían dado hasta ahora: mete todo en un contenedor principal, dale un ancho (width) y ponle los márgenes laterales en auto (margin: 0 auto).
Con eso debería quedar centrado. Yo añadiría la posición relativa para, como te comenté, si pones dentro alguna caja en posición absoluta (poco recomendabble en general), ésta calcule su posición con respecto al contenedor, no a la página completa, y por tanto, siempre salga dentro de la caja centrada (contenedor).

emal011 · #14 (**permalink**) 29/04/2009, 08:49

Aja!! gracias por la pronta respuesta, entonces empezare por eso y vere como va quedando.

Ahora, una consulta extra, si en el caso de que el contenido sea mas grande que el DIV, este se va agrandando concuerdo al tamano del texto. Pero, hay alguna manera de que si el texto es mas grande que el espacio(DIV) en vez que este se estire es posible que aparezca una barra lateral para que solo se deslize el texto mas no toda la web?

Algo asi: http://www.zip.de/deu/malaga/index.php?id=3

willyfc · #15 (**permalink**) 29/04/2009, 08:58

solo coloca al div que tiene el contenido un alto fijo y le das overflow:auto, cuando el texto alcance el alto máximo del div y lo sobrepase aparecerá la barra lateral.