a.css

esbudellant estàndards


Qüestió II: Desplaçar una caixa posicionant-la en un altre punt (resposta)

31/12/04

La solució que havia aplicat jo era:


div#contenidor {
   width: 220px;
   background: #ccc;
   padding: 5px;
}
div#peu {
   position: relative;
   padding-bottom: 10px;
}
p.alfa {
   background: #999;
   padding: 5px;
}
p.beta {
   position: absolute;
   bottom: -80px;
}

La fòrmula és, simplement, posicionar el paràgraf beta de forma absoluta respecte el div id="peu".

Aquesta solució dóna problemes en Firefox la primera vegada que es carrega la pàgina si el CSS és extern i el contingut conté algún ítem extern, com per exemple una imatge. És un bug que espero que arreglin en breu.

Si el paràgraf beta estés declarat com a últim fill de peu es podria optar per una solució semblant però que sembla més estable en la casuïstica anterior:


p.beta {
   position: absolute;
   margin-top: 80px;
}

L'única diferència és que s'utilitza un marge superior per desplaçar la caixa del seu lloc original en comptes d'usar la propietat bottom.

Comentaris

  1. Comentat per uri el 21/01/05

    per fi he tingut temps per tornar-m'ho a mirar...

    ok ja ho entenc... no sabia que amb els absoluts, també es podia jugar amb el bottom.

    em preocupa el bug que comentes, ja que el problema es collonut per posar peus a continguts de longitud N.

    moltes thanks...

    m'encantaría un altre questió... tu mateix!!!

Afegir un comentari


© Arnau Siches. a.css està sota Llicència Creative Commons.