problema al situar el footer

ars1993 · 10 Febrero 2014, 18:04 PM

Buenas, tengo estructurada una web de la siguiente manera:

HTML:


<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 [Seleccionar]


.footer{
     position: relative;
     margin-bottom: 20px;
}

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

WHK · 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 (html4strict) [Seleccionar]

<body>
  <div class = "fons">
   <div class = "capcalera" style="height:300px; overflow:hidden;margin:0;">
    <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>

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.

ars1993 · 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!

WHK · 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/

ars1993 · 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!

Test Foro de elhacker.net SMF 2.1

problema al situar el footer

ars1993

WHK

ars1993

WHK

ars1993