Foros del Web » Creando para Internet » CSS »

Centrando web con CSS, pero...

Estas en el tema de Centrando web con CSS, pero... en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/04/2009, 09:01
Avatar de emal011  
Fecha de Ingreso: julio-2004
Ubicación: Munich
Mensajes: 211
Antigüedad: 13 años, 5 meses
Puntos: 2
Centrando web con CSS, pero...

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.
__________________
El graduado en Ciencias pregunta "¿Por qué funciona?"
El graduado en Ingenieria pregunta "¿Cómo funciona?"
El graduado en Artes Liberales pregunta "¿Quiere papas fritas con eso?"
  #2 (permalink)  
Antiguo 27/04/2009, 10:00
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Centrando web con CSS, pero...

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




Bye.
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #3 (permalink)  
Antiguo 27/04/2009, 10:41
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Centrando web con CSS, pero...

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.
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #4 (permalink)  
Antiguo 27/04/2009, 12:00
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Centrando web con CSS, pero...

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







Bye.
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #5 (permalink)  
Antiguo 27/04/2009, 12:24
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Centrando web con CSS, pero...

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.
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #6 (permalink)  
Antiguo 27/04/2009, 12:34
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Centrando web con CSS, pero...

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.
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #7 (permalink)  
Antiguo 27/04/2009, 12:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrando web con CSS, pero...

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í.
  #8 (permalink)  
Antiguo 27/04/2009, 15:43
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Centrando web con CSS, pero...

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!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #9 (permalink)  
Antiguo 28/04/2009, 11:03
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Centrando web con CSS, pero...

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



Saludos.
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #10 (permalink)  
Antiguo 29/04/2009, 06:22
Avatar de emal011  
Fecha de Ingreso: julio-2004
Ubicación: Munich
Mensajes: 211
Antigüedad: 13 años, 5 meses
Puntos: 2
Respuesta: Centrando web con CSS, pero...

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?
__________________
El graduado en Ciencias pregunta "¿Por qué funciona?"
El graduado en Ingenieria pregunta "¿Cómo funciona?"
El graduado en Artes Liberales pregunta "¿Quiere papas fritas con eso?"
  #11 (permalink)  
Antiguo 29/04/2009, 09:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrando web con CSS, pero...

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.
  #12 (permalink)  
Antiguo 29/04/2009, 09:22
Avatar de emal011  
Fecha de Ingreso: julio-2004
Ubicación: Munich
Mensajes: 211
Antigüedad: 13 años, 5 meses
Puntos: 2
Respuesta: Centrando web con CSS, pero...

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.
__________________
El graduado en Ciencias pregunta "¿Por qué funciona?"
El graduado en Ingenieria pregunta "¿Cómo funciona?"
El graduado en Artes Liberales pregunta "¿Quiere papas fritas con eso?"
  #13 (permalink)  
Antiguo 29/04/2009, 09:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrando web con CSS, pero...

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).
  #14 (permalink)  
Antiguo 29/04/2009, 09:49
Avatar de emal011  
Fecha de Ingreso: julio-2004
Ubicación: Munich
Mensajes: 211
Antigüedad: 13 años, 5 meses
Puntos: 2
Respuesta: Centrando web con CSS, pero...

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

__________________
El graduado en Ciencias pregunta "¿Por qué funciona?"
El graduado en Ingenieria pregunta "¿Cómo funciona?"
El graduado en Artes Liberales pregunta "¿Quiere papas fritas con eso?"
  #15 (permalink)  
Antiguo 29/04/2009, 09:58
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrando web con CSS, pero...

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.
__________________
WFC
codigo82
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 19:34.