elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  problema al situar el footer
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: problema al situar el footer  (Leído 2,461 veces)
ars1993

Desconectado Desconectado

Mensajes: 60


640k deberian ser suficientes para todo el mundo..


Ver Perfil
problema al situar el footer
« en: 10 Febrero 2014, 18:04 pm »

Buenas, tengo estructurada una web de la siguiente manera:

HTML:
Código:
<body>
<div class = "fons">
<div class = "capcalera">
<div class = "name">
</div> <!--name-->

<div class = "login">
<?php include 'div_de_login.php'; ?>
</div> <!--login-->

<div class = "navigation">
<?php include 'menu_navegacio.php'; ?>
</div> <!--navigation-->
</div> <!---capcalera-->

<div class = "contingut">
<?php include 'l_orquestra.php'; ?>
</div> <!--contingut-->

<div class = "footer">
</div> <!--footer-->
</div> <!---fons-->
</body>

Todo lo que son las class "name", "login", etc etc estan ubicadas con "position:absolute" i el uso de margins. El motivo es porque no necesito que sea responsive y necesito tener sí o sí lo de "position:absolute". Partiendo de ésto, mi pregunta es: Como puedo ubicar (en CSS) el footer (div class ="footer") debajo de lo que haya en "contingut"? No puedo darle position absolute puesto que lo de dentro de contingut cambia dependiendo de la sección del menú donde el usuario se encuentra.

He probado dare ubicación (sin éxito) con:
Código:
.footer{
     position: relative;
     margin-bottom: 20px;
}

Alguen me podria dar alguna solución a ésto? muchas gracias :D


En línea

640k deberian ser suficientes para todo el mundo..
WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.606


Sin conocimiento no hay espíritu


Ver Perfil WWW
Re: problema al situar el footer
« Respuesta #1 en: 10 Febrero 2014, 19:27 pm »

fácil, primero debes hacer que .capcalera tenha un height definido ya que los controles tienen posición absoluta (mala práctica), por lo tanto si todos tus controles se ajustan digamos a unos 300px de alto entonces le das un style="height:300px;" a .capcalera, luego de esto el .footer debería tener una posición normal al igual que .contingut ya que no afecta en nada la posición a menos que estes usando margenes por todos lados y posiciones absolutas para todo.

Te recomiendo usar margin y padding para posicionar los controles en ves de position absolute, eso es una muy mala práctica que hace que las cosas no terminen encajando bién, solo se usan en casos muy determinados con position relative en su objeto pariente.

mira:
Código
  1. <div class = "fons">
  2. <div class = "capcalera" style="height:300px; overflow:hidden;margin:0;">
  3. <div class = "name">
  4. </div> <!--name-->
  5.  
  6. <div class = "login">
  7. <?php include 'div_de_login.php'; ?>
  8. </div> <!--login-->
  9.  
  10. <div class = "navigation">
  11. <?php include 'menu_navegacio.php'; ?>
  12. </div> <!--navigation-->
  13. </div> <!---capcalera-->
  14.  
  15. <div class = "contingut">
  16. <?php include 'l_orquestra.php'; ?>
  17. </div> <!--contingut-->
  18.  
  19. <div class = "footer">
  20. </div> <!--footer-->
  21. </div> <!---fons-->
  22. </body>

En teoría debería funcionar, la etiqueta style la reemplazas por una clase y pegas todo en tu hoja de estilo.

Podrias darnos un ejemplo del funcionamiento de tu código acá:
http://jsfiddle.net/

De esa manera podremos saber bien lo que está pasando ya que talves hay algunos margenes que no sabemos y que puedan estar influyendo en la posición del footer.


En línea

ars1993

Desconectado Desconectado

Mensajes: 60


640k deberian ser suficientes para todo el mundo..


Ver Perfil
Re: problema al situar el footer
« Respuesta #2 en: 10 Febrero 2014, 20:26 pm »

muchas gracias por la respuesta! Mira, he puesto el CSS relativo al trozo de html que he posteado en mi pregunta, y está aquí:

http://jsfiddle.net/7bCRU/

A ver si con esto veen mas como solucionar mi problema, porque uso muchos position absolute... haha de momente pero, prefiero dejarlo así y intentar solucionar lo del footer sin tocar lo de position.

Muchas gracias!
En línea

640k deberian ser suficientes para todo el mundo..
WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.606


Sin conocimiento no hay espíritu


Ver Perfil WWW
Re: problema al situar el footer
« Respuesta #3 en: 12 Febrero 2014, 13:55 pm »

ya lo vi, lo que quieres hacer es imposible con puro css, tendrias que usar javascript y calcular el alto y la posición del contignut y de ahi calcular la posición del footer.

Eso pasa porque estas abusando de la posición absoluta, eso no se hace, que pasa si la pantalla es de 1024x768? la página se mostrará con un trozo menos y la persona tendría que mover el scroll de abajo cada ves que quiera ver algo y todas las posiciones se van a la porquería.

Intenta hacer un layout mas normal, utiliza posiciones relativas, si usas posiciones absolutas no debes usar margenes, para eso existe la propiedad top y left.

Mira esto:
http://jsfiddle.net/7bCRU/3/
« Última modificación: 12 Febrero 2014, 13:57 pm por WHK » En línea

ars1993

Desconectado Desconectado

Mensajes: 60


640k deberian ser suficientes para todo el mundo..


Ver Perfil
Re: problema al situar el footer
« Respuesta #4 en: 14 Febrero 2014, 19:31 pm »

perfecto, pues intentaré cambiar los absolute aver si consigo mayor flexibilidad a la hora de situar las cosas. Gracias!
En línea

640k deberian ser suficientes para todo el mundo..
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Páginas afiliadas en el footer
Sugerencias y dudas sobre el Foro
z3nth10n 0 2,429 Último mensaje 7 Abril 2013, 20:47 pm
por z3nth10n
Quitar footer
Desarrollo Web
Immodium 3 2,759 Último mensaje 5 Mayo 2013, 10:16 am
por Immodium
Cargar Header y Footer
PHP
Davishh 2 3,056 Último mensaje 5 Julio 2013, 12:38 pm
por Davishh
[Resuelto] Problema con Chrome (movil). El footer no se ve en portrait mode.
Desarrollo Web
Son_of_Bush 7 3,829 Último mensaje 4 Abril 2015, 12:29 pm
por 3n31ch
La web se descoloca, en Firefox mobile, al llegar al footer
Desarrollo Web
igorsp 1 1,909 Último mensaje 22 Julio 2016, 12:56 pm
por Adrialmend
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines