Jag vill ha en footer som alltid är längst ner på sidan, det är grundproblemet.
Har kommit fram till att jag kan få footern att lägga sig längst ner med:
position:absolute;
bottom:0;
men då vill jag ju att bakgrundsbilden (se bifogad fil) ska ligga bakom den också och inte sluta en bit ovanför.
Alternativet är att låta bakgrunden ha en fast höjd (och därmed inte fylla ut alla feta skärmupplösningar), men då lyckas jag ändå inte få footern längst ner inuti bakgrundsdiven, utan den lägger sig under innehållet i bakgrundsdiven istället. Innehållet kommer vara dynamiskt, dvs texten kommer inte alltid fylla ut hela sidan ner till nederkant. Och då vill jag ju inte att footern ska glida omkring i höjdled och se ful ut.
Presumtivt svar: Det du kanske borde göra är att skapa din bakgrund genom att ge body en bakgrundsbild som är en linje hög och skapar rätt mönster. Du kan sedan fixa till dess beteende med background-repeat, background-attachment samt background-position.
Detta blir dock problematiskt om contentdiven ska ha dynamisk bredd...
Kan du förklara närmare vad du menar med att bakgrundsbilden slutar en bit ovanför med exempel 1?
Okej, bifogar två bilder som beskriver mina försök att lösa problemet hittills. Antingen hamnar footern allra längst ner, men då vet jag inte hur jag får bakgrundsdiven (innehållande bakgrundsbild) att gå hela vägen ner, eller så lägger jag footern inne i bakgrundsdiven, men då vill den inte lägga sig längst ner.
Det måste ju finnas ett smart sätt med CSS att lösa detta på, som någon vet om.
Som sagt, bakgrundsbild på body. (Då spelar det ingen roll hur hög diven i sig är.) Alt. min-height: 100%.
Bra länk! Nu har jag lyckats få nånting att gå ända ner i botten, även om det än så länge inte är bakgrundsbilden. Löser det nog imorgon (och markerar då som löst), tack för hjälpen! :bire
Bra länk! Nu har jag lyckats få nånting att gå ända ner i botten, även om det än så länge inte är bakgrundsbilden. Löser det nog imorgon (och markerar då som löst), tack för hjälpen! :bire
Enklast tänkbara lösning är faktiskt att använda en tabell. Det funkar galant i alla webbläsare och validerar. Så rent tekniskt är det helt OK. Men det kräver ju att du struntar i att många w3c-talibaner tycker att det är "fel". :P
I exemplet nedan har jag klämt in lite grått bara för att du bättre ska se headern, footern och innehållet. Ta bort färgerna och lägg in din bakgrundsbild i tabellen istället.
Tack för alla svar! Puh, vilket slit för den där ******** footern. Floatade element är INTE roliga att mixtra med. Tog ett bra tag innan jag insåg att det var själva floatningen som gjorde att footern la sig ovanpå sidinnehållet.
Som tur var så upptäckte jag efter ett tag att voigtann1s rekommenderade lösning hade exakt samma sex div-element som jag hade på min egen sida, med floats och allt, så det enda jag behövde göra var att lägga footern utanför containern och sen peta in resp. CSS-snutt för resp. div. (y)
Har iofs inte testat i flera webbläsare än, men just nu vill jag inte grumla det lyckliga ögonblicket när saker äntligen funkar! :D
/*red: Projektet har deadline idag, så det var i grevens tid det blev löst! */
Vill påpeka att den koden är nog kopierad från ett Sticky Footer-exempel av Paul O'Brien.
Jag rekommenderar istället Paul O'Briens originalkod som inte behöver den inbäddade kommentar-koden för IE: Sticky Footer at Bottom.
Tack joser. Jag uppskattar när man får originalkällan till information, plus att det är nice att ge cred åt den som är upphovsman. Inte alltid lätt när det gäller programmeringskod.
