Problema con position:fixed;

BanNsS1 · #1 (**permalink**) 30/11/2011, 08:46

Buenas, el caso es que estoy programando una página y he hecho una barra horizontal en el top de la página con el atributo position:fixed; para que se mantenga fija.
La anchura de esta barra es de 1120px centrada (y un fondo width:100% con los mismos atributos.) y al poseer el atributo position:fixed; en caso de abrir la página a una resolución menor de 1120px resulta imposible acceder al resto de la barra, que es la parte mas importante, donde se encuentra el registro y el login.

Mi pregunta es:

¿Existe alguna forma de evitar la fijación horizontal? En caso de que no, ¿qué me recomendáis hacer?

Gracias, un saludo.

Raziel_Ravenheart · #2 (**permalink**) 30/11/2011, 09:20

Pues he tenido el mismo problema, y además te comento que llevo como 3 meses estudiando javascript y css, aunque le he dedicado más tiempo a javascript, por ahí también alguno de mis momentos a css. En algunas ocasiones es necesario aplicar un estilo fluido o líquido, a todo lo que hagas, es decir usando porcentajes y em, pero a veces esto no ayuda, ya que he probado un sitio que estoy haciendo, y me toca reducir el zoom de la página, para que se acomode.

En estos dias estuve pensando, cual sería la mejor solución y para alguien como yo que ya se da su mañas con javascript, anoche deduje que una buena solución era aplicar estilos desde javascript, despues de detectar la resolución de la pantalla, pero supongo que esto no es algo muy fácil para quienes no saben de javascript.

Algunos utilizan el atributo zoom de css, y la verdad no entiendo como hacerlo funcionar para este tipo de problemas, aunque supongo que si todos los navegadores, incluso antiguos la soportaran, se podría modificar el tamaño de todo el documento aplicándoselo diréctamente al body desde javascript.

Por otro lado, acabo de leer que se detecta la resolución con javascript, y dependiendo de la resolución aplicas un css u otro, obviamente, de dos o tres ficheros css que ya tengas preparados.

La verdad, no conozco un método puro desde javascript, y trataré de solucionar pronto, pero dudo mucho que encuentre una solución rápida a menos que un experto nos colabore. Mira lo que encontré en cristalab.

cambiar propiedades web segun resolucion pantalla con css

emprear · #3 (**permalink**) 30/11/2011, 09:21

con esto en resoluciones menores se te va a generar scroll horizontal para poder acceder a toda esa capa que tiene fixed, pero en particular no me parece muy atractivo, creo que sería mejor usar porcentajes. Probalo

Código HTML:

Ver original<!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>
<title>fixed con scroll</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
html, body, div {
padding: 0;
border: none;
margin: 0;
}
 
#contenedor {
position: relative;
width: 1120px;
height: auto;
margin: 0 auto;
}
 
#tope {
height: 50px;
position: fixed;
width: 1120px;
background-color: #151515;
color: #FFF;
}
 
/*]]>*/
</style>
</head>
<body>
<div id="contenedor">
<div id="tope">
sssss
</div>
xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />xxxxx
<br />
</div>
</body>
</html>

Raziel_Ravenheart · #4 (**permalink**) 30/11/2011, 09:27

Cita:

Por otro lado, acabo de leer que se detecta la resolución con javascript, y dependiendo de la resolución aplicas un css u otro, obviamente, de dos o tres ficheros css que ya tengas preparados.

A diferencia de mi solución, no hay que aplicar css desde javascript, si no que considero esto una mejor forma, ya que se aplica el css desde un archivo externo ya preparado

Cita:

La verdad, no conozco un método puro desde javascript, y trataré de solucionar pronto, pero dudo mucho que encuentre una solución rápida a menos que un experto nos colabore. Mira lo que encontré en cristalab.

Corrijo, en realidad quise decir que no conozco un método puro desde CSS, obvio desde javascript puedes aplicar todo el css, pero no es una forma recomendable, a menos que obligatoriamente tengas que hacerlo.

BanNsS1 · #5 (**permalink**) 30/11/2011, 09:31

Sería práctico utilizar porcentajes pero en mi caso me resulta imposible ya que el login lo hice en jQuery y el resultado, ya sea erroneo o no se muestra sin recargar la página y por lo tanto no todos los resultados de la introducción de datos tienen el mismo resultado, y si se cambia de idioma también varia.

Voy a mirar ese link que habéis dejado.
Gracias.

Edito: En cuanto al link que dejaste si no viese otra solución utilizaría esto: en caso de que la ventana sea menos ancha de 1120 en vez de position fixed, absolute y mejor eso que nada.

Cita:

//Creo que era
var ancho= Screen.width;
var alto= Screen.height;
//y entonces
if(ancho<1024){
//Mwahaha, document write111!!11
document.wirte("<link type='text/css' rel='stylesheet' href='css4loosers.css' />");
}

Raziel_Ravenheart · #6 (**permalink**) 30/11/2011, 09:45

Pues realmente en ese enlace dicen lo mismo, pero ya que mencionas jQuery, creeme, siempre debe haber una forma para arreglar estos problemas y más utilizando una librería tan poderosa como jQuery.

También como te dije, llevo más tiempo dedicado al javascript, lo que te quiero decir, es que al saber que usas jQuery, se me hace extraño que no hayas podido resolver esto, y te lo digo por que yo no esttoy de acuerdo con el uso de librerias o frameworks mientras no conozcas bn como se comportan todos los elementos, pero te puedo asegurar, que la solución está por ahí, ya que yo estoy estudiando el código de jQuery, por que me ha interesado.

Te aclaro, que no recomiende el uso de jQuery mientras aprendes javascript, no significa que lo uses es solo una opinión personal, en cuanto a tu problema, no necesariamente debes estresarte tanto, ya que si estás trabajando jQuery, de nuevo te digo, debería ser más sencillo que si lo hicieras con javascript puro, te dejo otro enlace:

Detectar resolución de pantalla y aplicar estilo con jQuery

El procedimiento sería el siguiente:
1. con window.onload, inicias una función de jQuery que detecte la resolución
2. aplicas el estilo css, desde jQuery, que según he visto, es solo llamar el elemento con $('body').algunaFuncionParaAplicarEstilos(), y listo

3. Si el usuario cambia de idioma, recargas la página, yo lo haría con un window.location desde javascript puto, pero antes pasaría por la url el idioma es decir algo como:
http://www.mipagina.com/lang=en
, y de nuevo lo detectaría con el window.onload, y después haría el resto.

Obvio, desde el inicio window.onload, va a detectar que tipo de idioma se está utilizando, pero cuando se accede a esta página inicialmente, esta validación no se ejecutaría por que no hay ningun valor de lenguaje en la url.

Si lo aplicas de otro modo, espero que esto le ayude a alguien más, por que de nuevo repito, yo que solo uso javascript puro, ya se como hacerlo, cualquier que utilice jQuery la tendría muchísimo más fácil.

Saludos
3.

BanNsS1 · #7 (**permalink**) 30/11/2011, 09:55

Gracias por tu ayuda pero preferiría antes de darme por vencido encontrar algo sin tener que trabajar con resoluciones:

Encontré esto:
http://www.rickyh.co.uk/css-position-x-and-position-y/

Demo:
http://demo.rickyh.co.uk/css-position-x-and-position-y/

Ahora os cuento qué tal.

Raziel_Ravenheart · #8 (**permalink**) 30/11/2011, 10:21

Cita:

Iniciado por BanNsS1

Gracias por tu ayuda pero preferiría antes de darme por vencido encontrar algo sin tener que trabajar con resoluciones:

Encontré esto:
http://www.rickyh.co.uk/css-position-x-and-position-y/

Demo:
http://demo.rickyh.co.uk/css-position-x-and-position-y/

Ahora os cuento qué tal.

AAAAAAHHHHHH ya te entendíiiiii, jejej, si quieres que todo te quede como lo programaste, bn bn...

Ps impleméntalo y si puedes darnos un enlace a la página, para ver como te quedó sería excelente... de todos modos yo no se mucho de diseño y me toca estudiar y aprender de gente que sepa...

muy bueno por cierto

emprear · #9 (**permalink**) 30/11/2011, 10:34

Cita:

Iniciado por BanNsS1

Gracias por tu ayuda pero preferiría antes de darme por vencido encontrar algo sin tener que trabajar con resoluciones:

Encontré esto:
http://www.rickyh.co.uk/css-position-x-and-position-y/

Demo:
http://demo.rickyh.co.uk/css-position-x-and-position-y/

Ahora os cuento qué tal.

Se te ocurrió probar el código que te puse de ejemplo?
ahi tu capa fixed sigue funcionando como tal, y en resoluciones menores, 1024x768 por ejemplo, se te genera el scroll necesario para acceder al contenido que queda oculto, en resoluciones mayores ves los 1120px completos.

no sé porque tantas vueltas

BanNsS1 · #10 (**permalink**) 30/11/2011, 10:36

Os dejo aquí la web. Por ahora está todo junto pero lo dividiré en cuanto termine las funciones básicas.

PD: Todavía no lo he implementado.

www.gather.rconect.net

Cita:

Iniciado por emprear

Se te ocurrió probar el código que te puse de ejemplo?
ahi tu capa fixed sigue funcionando como tal, y en resoluciones menores, 1024x768 por ejemplo, se te genera el scroll necesario para acceder al contenido que queda oculto, en resoluciones mayores ves los 1120px completos.

no sé porque tantas vueltas

No se me ocurrió probarlo porque no hace lo que yo quiero. Como mucho se podría crear un scroll y no me interesa.
Gracias de todas formas.

Raziel_Ravenheart · #11 (**permalink**) 30/11/2011, 11:03

Aunque también me queda la duda.. esperaré para ver el resultado y así poderte decir una mejor manera de hacerlo o si la solución de emprear se puede implementar mejor, para que no te sigas complicando.

Te lo digo por experiencia, por que cosas que he hecho antes, buscando una solución, se pudo haber hecho de otro modo, más sencillo, o por lo menos mejor estructurado.

Como dije, esperaré para ver la solución que le diste, por que no solo sucede cuando se tienen una resolución menor, si no cuando se redimensiona la ventana.

Saludos