Problemas con scroll y firefox

[jana2]

Hola a todos:

Estoy diseñando una web con capas, y despues de estar tres dias haciendo deshaiendo me ocurre lo siguiente:

En una de las paginas de la web, resulta que tiene más texto que el resto y cuando y cuando el navegador utiliza las barras de scroll verticales entonces a partir de ahi, se mueve un pelin la pagina, respecto al resto de las pàginas que integran la web. No se a que se debe.

Tengo una capa contenedora con un whith 780 px dentro de esta el contenido de las otras capas:

Capa cabezera
Capa lateral con submenu de listas, capa centro con el texto ( esta es donde al colocar el texto, hace salir las barras de desplazamiento en el navegador firefox porque claro para poer visualizar el resto pantalla abajo...)
Capa pie

He tenido en cuenta el padding-left, por ejemplo de las capas, si tengo una con un padding-left 10 y mide 680, le he dado 670+10 para que firefox coja bien la dimensión. En explorer no tengo ningun problema.

No lo entiendo, si alguien puede ayudarme, ya no se que hacer, lo he descubierto haciendo pruebas, claro esta... si quito el parrafo de mas, se be bien no sale el scroll en firefox perfecto, pero si pongo otra vez el parrafo ya estamos otra vez...

En fin, no se que mirar más, volver a maquetar ya la tengo como la quiero... no se, el texto lo coloco entre las etiquetas <p> </p> utilizo los <br/ > etc. no se que mas mirar.

Gracias por si alguien puede echarme una mano.

Saludos

[Trypat]

Todos los elementos llevan un padding por defecto. Prueba a poner a cero la de los elementos que uses o utiliza el reset.css de yui antes de ninguna otra carga de css, aunque a lo mejor te desbarata algo de la configuración.

[jana2]

Gracias Trypart, estuve mirando esto que me comentas de resetar css, y me cambia todo de sitio...

Luego probando y volviendo a probar, he visto el error, pero que continua siendo un problema.

Es la capa container, que contiene a todas las otras, esta no le pongo largo... porque asi automaticamente, acoge las diferentes longitudes de cada página, entonces he alargado yo de forma manual la capa contenedora hasta alcanzar la capa texto... y ya no se mueven la pagina al cambiar de enlace.

Pero el problema ahora lo tengo que tendre que crear otra capa container sin medidas para las otras paginas de la pagina? porque claro al darle medida y solucionar que no se mueva ya esa dichosa pàgina, las otras se ven más largas tiene la misma medida claro.

Como puedo solucionar eso? crear dos container diferentes este solo para este problema y el otro sin medida tal cual me funcionaba al resto de la web?

La capa contenedor la he tenido que poner asi:

#contenedor /* Capa contenedora de toda la web */
{
position:absolute;
top:0px;
left:485px;
margin-left:-390px;
margin-top:0px;
width:780px;
z-index:1;
background-color: #FFFFFF;
border:0px;
height: 642px;
}
es decir con height.... pero siempre la había puesto sin height, como lo hago para el resto otra capa contenedora? no lo veo lógico pero he de solucionar el problema

Gracias de nuevo

Jana

[Trypat]

Así no me hago una idea, pon todo el código o la url. ¿En las otras dos capas usas float? Igual deberias poner clear:both

[jana2]

Hola de nuevo_

Pego aqui las capas que tengo, de momento solo lo tengo todo en local

-----------------
#contenedor /* Capa contenedora de toda la web */
{
position:absolute;
top:0px;
left:485px;
margin-left:-390px;
margin-top:0px;
width:780px;
z-index:1;
background-color:#0000FF;
border:0px;
}
#logo/*Cabecera */
{
position:absolute;
width:780px;
height:52px;
z-index:2;
background-color: #003399;
}

#capaizquierda/* capa menu izquierdo*/
{
position:absolute;
width:143px;
height:115px;
z-index:2;
top: 186px;
left: 0px;
border-right:1px;
border-right-style:solid;
border-right-color:#859DCE;
background-color: #FFFFFF;
}
#capaderecha/* capa con texto*/
{
position:absolute;
z-index:6;
background-color: #FFFFFF;
top: 186px;
whith:629px;
height: 453px;
left: 145px;
width: 629px;
visibility: visible;

}
#pie
{
position:absolute;
width:780px;
height:40px;
z-index:6;
top:450px;
background-image: url(images/peu.gif);
background-repeat: no-repeat;
}

.address
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 65%;
font-style: normal;
color:#0033CC;
text-align: center;
letter-spacing:2px;
}
-----------------

El tema es que si tengo por ejemplo:

link1, lin2, lin3, lin4... que serian las 4 paginas distintas que tendria la web por poner un ejemplo vale?, pues en link 1 el whith es de 400 pixeles, mientras que en link 2 el whith de la pagina es de 690 pixels... entonces por eso no pongo whith a la capa container que agrupa todas... pero para solucionar el desplazamiento anterior, que comentaba la capa contenedora como puede estar a diferentes alturas de cada uno de los links que tengo... esa es la segunda duda a solucionar.

He estado mirando lo que me comentas sobre clear: both, que hace exactamente ? no lo he utilizado nunca todabía..., ?

La segunda duda es con el pie, de la pàgina, si tengo sólo dos columnas una inzquierda y otra el resto de pagina... como hago para que este el pie de pagina siempre por debajo? o si solo tengo una capa central para que el pie este por debajo? hasta ahora, tengo poca pràctica en eso, utilize varias medidas para adaptar el pie de pagina... a lo que necesitaba pero me gustaria mejorar la forma de implementarlo.

Muchas gracias Trypart por tu atención

Saludos

Jana

[Trypat]

Hola Jana.

Sobre el código que me has puesto, sobran cosillas: z-index y visibility no hace falta que lo utilices.

Te recomiendo que veas http://blog.html.it/layoutgala El layout 7, se adapta bien a lo que quieres hacer (aunque a mi no me gusta como está escrito lo veo un poco enrevesado) y te solucionaría todos los problemas.

Lo del pie se soluciona también con lo de antes, en el código que has puesto usas mucho la position:absolute si dejas que el texto "fluya" en la página al final se te colocaría el footer.

Creo que me he explicado bien, pero con la resaca a lo mejor no me entiendo ni yo mismo. Si eso preguntas...

[jana2]

Gracias, te has explicado muy bien.

He visitado la página que me comentas y ya entiendo y veo lo del pie, para que se quede abajo con both, va bien no, no fluye ni a un extremo y a otro, sino para abajo.

Bueno, pero el problema que he visto que tengo es el del principio... igual no me explique bien, y despues de hacer deshacer he observado lo siguiente:

Ya puedo poner la capa containe, en relative, absolute, automa, etc... siempre consigo que la pagina se presente en el centro de la pantalla hasta ahi bien.

Pero el problema me surge cuando la página sobrepasa la medida de la pantalla de largo, entonces me salen las barras de ovweflow pero no en la capa en la propia pantalla, entonces ahi se me mueve toda la pagina, si la pagina no sobrepasa el largo de la pantalla que no necesita barras de desplazamiento hacia abajo, entonces todo bien.

Pero en firefox me molesta que se vea todas las paginas bien menos dos o tres que sobrepasan el largo de la pantalla que al clicar visualizarlas se desplazan un poco respecto de las otras, no se como arreglarlo.

Para arreglarlo si lo consigo poniendo una medida left de 510 px..., en la capa contenedor, y asi no se mueve las paginas que sobrepasan el largo de la pantalla me explico:

#contenedor /* Capa contenedora de toda la web */
{
position:absolute;
top:0px;
left:510px;
margin-left:-390px;
margin-top:0px;
width:780px
background-color:#FFFFFF;
border:0px;
height: 420px;
}

Tambien he probado en position: relative, margin-left y right, auto; y me hace lo mismo.

Si pongo un left 510 px, el problema es que si existe otra resolucion por jemplo de 800x600 la pagina quedara descentrada.

No se que hacer ni mirar mas...

Es normal que ocurra eso en firefox o cuando salen las barras de desplazamiento de la pantalla vertical? no de la capa ojo... de la pantalla? en explorer se ve todo bien.

Perdonad por no contestar antes al mensaje de respuesta, Trypart

Gracias

Jana

[jana2]

Hola:

Por fin he solucionado lo que tantos dias me llevaba de cabeza.

El tema es el espacio de la barra scroll vertical que deja por defecto explorer, y firefox no, por eso en firefox, al presentar paginas que precisan utilizar el croll, se me desplazaba la pagina de unas a otras, y me tenia atormentada.

La solución es la siguiente para que firefox deje también ese espacio por defecto como lo hace IE.

html{overflow-y:scroll}

Espero que si alguien le ocurre lo mismo, pueda ayudarle

Saludos a todos, y doy las gracias por mantener este foro, ya que se ayuda y aprende muchísimo, gracias.

Jana

[Alvar0]

hola Jana,

puedes explicarme a mi como hacer el firefox deje ese espacio por defecto para que no bailen las paginas?

No se mucho de estos

Esta en la web: http://www.spanishteachers.co.uk/web/

Te estaria superagredecido

[MandrakeXP]

jana2 secillamente genia!!! me pasaba el mismo error, yo sabía el motivo (la aparición dell scroll) pero no sabía encontrar solución.

gracias por poner la solución.

saludos

[ilen]

Gracias jana2!! casarme contigo es poco, me solucionastes 1 problema q llevava mas de 24 horas sin resultados... muuuuuuuuua ;)

[germarmor]

jana2 una estatua tamaño natural en oro es poco para lo que te mereces... GRACIAS!