Problema de centrado de mi web

juandiseno · #1 (**permalink**) 23/03/2011, 06:31

Hola buenas soy nuevo en el foro asi que perdonad si ya se ha preguntado esto muchas veces.

El problema es el siguiente. Estoy haciendo una web en html y css. Resulta que en la pagina de entrada la pagina tiene una medida de 850 de ancho x 650 de alto y esta posicionada en el centro del navegador, pero la siguiente pagina tiene la misma medidad 850 de ancho por 1200 de alto, por lo que sale la barra de desplazamiento vertical, entonces es cuando sale mi problema, y es que la pagina 2 se desplaza unos pixeles hacia la izquierda. EL problema se que es la barra de desplazamineto pero como lo soluciono.

Como posiciono el Div contenedor?? dentro de este hay tablas con la estructura de mi web... Soy nuevo en esto de html y css asi que explicar claramente por favor.

Imagino que lo que debo posicionar es el div contenedor de los otros elementos no?

Gracias

perryjr · #2 (**permalink**) 23/03/2011, 11:49

Solo resaltar una cosa, te has dado cuenta de que hay tantas pantallas distintas, con tamaños distintos, paletas de colores distintos, etc. como personas en el mundo?? No puedes hacer que se vea igual en todas ellas.

Segundo, evidentemente si la barra aparece, la página se tendrá que desplazar ese espacio hacia la izquierda para dejarle algun sitio en la pantalla, repito LA PAGINA, la pagina entera, no solo tu div. Sigo sin ver el problema! :(

juandiseno · #3 (**permalink**) 23/03/2011, 12:05

Pues el problema creo que esta claro, y es que en el index si pinchas en el menu por ejemplo en el apartado nosotros ves como toda la pagina se desplaza con relacion a la primera pagina y eso es porque las otras paginas no tiene el scroll vertical no les hace falta porque son paginas que entran en una pantalla pero al salir el scroll esta pagina se desplaza, y queda fatal estar viendo una pagina y al cambiar ver como todo el contenido se desplaza aunque solo sea 5 pixeles.

Espeo que ahora entiendas mi pregunta.

El contenido debe estar centrado en el monitor, imagina qe estamos hablando de un monitor de 1024 y mi web es 850 de ancho...

Creo que mi problema esta bastante claro no???

gVenom · #4 (**permalink**) 23/03/2011, 12:20

no creo que el problema sea centrar la página, ya que esta siempre esta en el centro, pero, debes tomar en cuenta que al aparecer las barras de scroll, el diseño aumenta esos pixeles de grosor del scroll y de ahi se genera una nueva medida para que la página siga centrada.

Se me ocurre solamente que a esa página y solo a esa, le apliques un padding a la izquierda para que compense el del scroll. Si tu sitio entero esta contenido por un div, ese padding correrá el contenido pero el div permanece igual, por lo que deberia verse el incremento de tamaño pero a la derecha. El movimiento ocular de que la pagina es mas ancha no creo que lo puedas quitar tan facil

kseso? · #5 (**permalink**) 23/03/2011, 12:29

Cita:

Iniciado por juandiseno

Pues el problema creo que esta claro, y es que...

Creo que mi problema esta bastante claro no???

Ya siento disentir, pero no hay ningún problema por ningún lado.
Hay navegadores que muestran siempre el espacio de las barras de desplazamiento (aunque no haya scroll) y otros que sólo aparecen de ser necesarias.

Otra cuestión, totalmente lícita, es que haya quien como usted no quiera que se observen ese pequeño efecto al pasar de una página con a otra sin scroll. O al revés.

Tan sencillo de evitar como:

Código CSS:

Ver originalbody {overflow: scroll;}

juandiseno · #6 (**permalink**) 23/03/2011, 12:52

Vale voy a poner los ejemplos para que lo veais mas claro:

Esta es la pagina 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#contenido{
margin-top: -400px;
margin-left: -425px;
position: absolute;
top: 50%;
left: 50%;
width: 850px;
height: 600px;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<div id="contenido">

</div>
</body>
</html>

Y esta otra la pagina 2

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>
<style type="text/css">
#contenido{
margin-top: -400px;
margin-left: -425px;
position: absolute;
top: 50%;
left: 50%;
width: 850px;
height: 1100px;
background-color: #CCCCCC;
}
</style>
</head><body>
<div id="contenido">

</div>
</body></html>

Abrirla las dos paginas en el explorador y vereis como se desplaza una con relacion a la otra...

Lo que quiero es que esas dos paginas van a compartir la cabecera y un menu y no quiero que al pinchar en un boton se abra la pagina y se vea como se mueve...

un millon de euros el que de un respuesta... jaja

juandiseno · #7 (**permalink**) 23/03/2011, 12:53

En cuanto a lo que dice kseso? si quito el Scroll como vere la parte inferior de la pagina si no puedo desplazarla??

Gracias chicos... venga a darle al coco

gVenom · #8 (**permalink**) 23/03/2011, 12:59

no se sabe cual es tu sitio, pero pregunto, porque no centras la pagina con

Código CSS:

Ver original<style type="text/css">
position: relative;
margin: 0 auto;
width: 850px; 
height: 1100px; 
background-color: #CCCCCC;
}
</style>

kseso? · #9 (**permalink**) 23/03/2011, 14:25

Cita:

Iniciado por juandiseno

un millon de euros el que de un respuesta... jaja

Cita:

Iniciado por juandiseno

En cuanto a lo que dice kseso? si quito el Scroll como vere la parte inferior de la pagina si no puedo desplazarla??

Gracias chicos... venga a darle al coco

Pocas cosas hay tan molestas como el desechar una respuesta sin dignarse probarla.
¿Desde cuándo el código propuesto en #5 impide acceder al contenido de la parte inferior del documento que exceda del tamaño de la ventana?

Y sobre su oferta y sugerencia de que seamos nosotros quien le demos al coco vamos a hacer como si no lo hubiese escrito.

Y ya que estamos en faena, lo que ha hecho en #6 lo debería haber hecho en #0, así seguro que alguien le habría advertido del peligro de usar cosas como lo resaltado:

Cita:

#contenido{
margin-top: -400px;
margin-left: -425px;
position: absolute;
top: 50%;
left: 50%;
width: 850px;
height: 1100px;
background-color: #CCCCCC;
}

pruebe a ir reduciendo la ventana del navegador.