Footer fuera de lugar

Started by FirstName LastName, April 02, 2016, 03:37:24 PM

Previous topic - Next topic

FirstName LastName

Buenas.

No sé si a alguien le haya pasado algo similar. En fin, voy al grano. En algunas secciones de SMF los contenidos son más breves que en otras, una de ellas es el buscador. En éstas, el footer se ve elevado, cuando en realidad debería estar normalmente más abajo, como indico en la imagen. Sin embargo, en las secciones donde hay más contenido, como el index, estando dentro de un foro, en los temas, mensajes, se ve normal, como es.
Lo mismo sucede como con toda la página, se va hacia la derecha un par de pixeles.



¿Desde dónde podría corregir este problema?

Saludos.

-Rock Lee-

Puede ser algún valor este tomando de esa forma... depende de cada theme o forma le das esos valores una forma rápida de localizar y arreglar estos pequeños detalles es usando "inspeccionar elemento" (chrome que es con el 2do click) o firebug (firefox es una extensión)  sobre la zona quieres arreglar... Esto te permite probar valores hasta lo dejes como quieras para luego aplicarlo al css o donde sea necesario!


Saludos!
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

FirstName LastName

Quote from: Rock Lee [BC] on April 02, 2016, 05:43:41 PM
Puede ser algún valor este tomando de esa forma... depende de cada theme o forma le das esos valores una forma rápida de localizar y arreglar estos pequeños detalles es usando "inspeccionar elemento" (chrome que es con el 2do click) o firebug (firefox es una extensión)  sobre la zona quieres arreglar... Esto te permite probar valores hasta lo dejes como quieras para luego aplicarlo al css o donde sea necesario!


Saludos!

Haciendo lo que decís está la opción de aumentar el #bodyarea { padding-bottom: 50px;, lo puse en 115px y se ve bien en mi resolución (1360 x 768), para resoluciones más chicas no habría problema, el drama sería para las que son más amplias que la mencionada anteriormente (la mía, 1360 x 768), ya que se ve igualmente lo que menciono, y no puedo seguir subiendo el padding-bottom porque le da demasiado espacio y ya queda mal visualmente.

El espacio de arriba del footer sería lo que se genera al aumentar el padding-bottom, y el de abajo donde debería ir el footer en realidad.


-Rock Lee-

Bueno eso generalmente pasa cuando se trabaja con px es un valor fijo en base a algo, para poder adaptarlo mejor a la mas amplia gama de resoluciones seria probar con % que toma como variable la resolución de la pantalla y un punto de partida ¿se entiende? ... te dejo una tabla que cuando empece hacer diseños me sirvió mucho como guía...




Saludos!
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

FirstName LastName

Quote from: Rock Lee [BC] on April 02, 2016, 06:48:23 PM
Bueno eso generalmente pasa cuando se trabaja con px es un valor fijo en base a algo, para poder adaptarlo mejor a la mas amplia gama de resoluciones seria probar con % que toma como variable la resolución de la pantalla y un punto de partida ¿se entiende? ... te dejo una tabla que cuando empece hacer diseños me sirvió mucho como guía...




Saludos!

Gracias por la tabla y el consejo, he intentado usar el porcentaje pero me está dando el mismo problema. Esperaré alguna otra respuesta.

Un saludo.

-Rock Lee-

Quote from: KevinLeyes on April 02, 2016, 08:19:22 PM
Gracias por la tabla y el consejo, he intentado usar el porcentaje pero me está dando el mismo problema. Esperaré alguna otra respuesta.

Un saludo.


Hay que ver que valor esta tomando como referencia ya que smf trabaja con imágenes es complejo hacerlo adaptable a varias resoluciones ¿Alguna url para ver?


Saludos!
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

FirstName LastName

Quote from: Rock Lee [BC] on April 02, 2016, 08:25:55 PM
Quote from: KevinLeyes on April 02, 2016, 08:19:22 PM
Gracias por la tabla y el consejo, he intentado usar el porcentaje pero me está dando el mismo problema. Esperaré alguna otra respuesta.

Un saludo.


Hay que ver que valor esta tomando como referencia ya que smf trabaja con imágenes es complejo hacerlo adaptable a varias resoluciones ¿Alguna url para ver?



Saludos!

Estoy trabajando el proyecto en localhost, la única manera sería a través de Hamachi y no sé si sería una molestia para vos.

-Rock Lee-

Quote from: KevinLeyes on April 02, 2016, 08:27:55 PM
Estoy trabajando el proyecto en localhost, la única manera sería a través de Hamachi y no sé si sería una molestia para vos.

Hay que ver si online cambia me ah pasado que cuando lo he montado en web fue diferente pero básicamente hay que ver que margen esta tomando si un valor interno o algo externo pero no bastara con solo alterar ese pedazo creo hay ver todo en general para adaptarlo ya que si movemos algo afectara otro lugar.... ademas justo mi pc la tengo desarmada por que debo hacer un update mañana la tendré recién...


Saludos!
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

Gluz

Como dices, al ser una página con poco contenido, el footer se eleva porque generalmente está justo después del contenido del foro.

Una forma de que siempre esté en el fondo de la pantalla aunque haya poco contenido, y que al haber mucho contenido se quede como normalmente se ve es hacer lo siguiente en CSS:

.content (poner el nombre correcto de la clase del contenido anterior al footer)
{
    padding-bottom: XXX;
}
.footer (poner el nombre correcto de la clase del footer)
{
    position: absolute;
    bottom: 0px;
    height: XXX;
    width: YYY;
}


XXX debe ser el mismo valor en las dos partes, así se verá como si estuviera seguido, cuando en realidad está uno sobre el otro, pero al tener el padding abajo el contenido le hace espacio al footer para que se vea bien.

Esto tiene como contra el que si el footer no es consisitente en tamaño, osea que en veces es mas grande o pequeño en altura, pues se va a ver un poco mal si no concuerda con el padding que tiene el contenido, pero es una solución a través de CSS, hay alguna otra forma de hacerlo, pero es mas complicado, y también está el hacerlo con JavaScript, pero en ese tema no soy de mucha ayuda.

-Rock Lee-

Creo una forma retorcida es jugando con absolute y relative pero no se hasta que punto quedaría estético.... Generalmente muchos diseños míos me apoyo en css partiendo de una idea algo loca aveces sin embargo, si tienes tiempo y ganas de experimentar se podría lograr ... ahora si funcionara no se si como lo pienso se plasme a como se necesita.


Saludos!
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

Advertisement: