Jag blir galen på den j---a footern! Någon som kan hjälpa?

Permalänk
Medlem

Jag blir galen på den j---a footern! Någon som kan hjälpa?

Efter ett det här krabbat skitlänge så har jag nu fått panik och bestämde mig för att bryta upp sidan i molekyler för att fastslå vad som är fel...
Såhär ser min sida ut just nu: http://www.triphys.com/test

Som ni ser så har footern fastnat... Allt fungerade fint när jag inte hade någon text i content-boxen, men så fort jag la till text i den så vägrade footern sitta fast i botten.

min index.php ser ut såhär:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="header">Header</div> <div id="container"> <div id="welcomesegment"> <div id="welcome">Welcome</div> </div> <div id="portfolio">Portfolio</div> <div id="contentcontainer"> <div id="content"><?php include("text.txt"); ?></div> </div> <div id="social">Social</div> </div> </div> <div id="push"></div> <div id="footer">Footer</div> </body> </html>

och min CSS ser ut som följande:

/*------------------------------------------------------------------------------------------*/ @charset "UTF-8"; /*------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------*/ body { margin:0px; padding:0px; background-image:url(bg.jpg); background-repeat:repeat; font-family:Arial, Helvetica, sans-serif; color:#4d4d4d; font-size:12px; line-height:19px; height:100%; } /*------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------*/ #wrapper { width: 1000px; min-height:100%; height: auto; height: 100%; position: relative; margin-left: auto; margin-right: auto; margin-bottom: 100px; } #container { width:1000px; margin:0 auto 0 auto; position:relative; } #header { background-color:#e84ebd; height:112px; display:block; font-size:10px; text-decoration:none; margin-left:auto; margin-right:auto; position:relative; } #welcomesegment { background-color:#2469e9; width: 1000px; position:relative; } #welcome{ background-color:#dcdee0; clear:both; margin:10px 140px 10px 140px; text-align:center; } #portfolio { background-color:#3eed63; height:150px; display:block; font-size:10px; text-decoration:none; margin-left:auto; margin-right:auto; position:relative; } #contentcontainer { background-color:#898b8a; width: 1000px; position:relative; } #content{ background-color:#d3d3d3; clear:both; margin:10px 140px 10px 140px; text-align:center; } #social { background-color:#f02735; height:60px; display:block; font-size:10px; text-decoration:none; margin-left:auto; margin-right:auto; position:relative; } #footer { background-color: #a69f92; position:absolute; bottom:0; width:100%; height:100px; } #push { height:100px; clear: both; }

Vore oerhört tacksam för hjälp!

Visa signatur
Permalänk
Medlem

Problemet är att du har position:absolute på footern, vilket tar den ur sitt naturliga flöde. Om du tar bort detta kommer den trilla på plats. Om du vill att den ska ligga där men följa med ner när du scrollar så använd position:fixed.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Ahhhhh! Jag älskar dig! Tack
haha, höll på att bli galen

Visa signatur
Permalänk
Medlem

Snabb fråga till, Som du kanske ser nu så ligger den röda "social" rutan en rätt bra bit ifrån footern (på höjden). Försökte korrigera det med margin-bottom men fick inte till det riktigt. Any ideas?

Visa signatur
Permalänk
Medlem

Det beror på din (helt meningslösa) push-div.
edit: ser att du ändrat position till relative på #footer nu. Om du inte har en särskild tanke med detta är det lika bra att slopa position helt och låta footern använda standardinställningarna.
edit: Sen verkar du ha en del element med clear:both vilket också är poänglöst utan flytande element

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Alright, läste någon guide där det stod att man skulle använda sig av den för att få ner footern, men det funkar ju fint utan
Fast jag fick fortfarande inte ner social-rutan trots att jag tog bort push, vad kan det bero på?

Nopes, det bara blev så he he. Vad är default på position?

Visa signatur
Permalänk
Medlem

Det beror på att du har marginal på #wrapper. Har du verkligen kollat själv?
Standard för position är 'static', vilket naturligtvis inte behöver skrivas ut eftersom det är standard.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Kör Firebug så ser du lättare vad som går snett.

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Permalänk
Medlem

Argh, förlåt! Jag känner mig helt förvirrad, har suttit med mitt WP tema hela dagen och ingenting ville fungera så jag tog sönder allt och började om på nytt så jag är aningen förvirrad
Okej, då klarnar saker och ting

tack så hemskt mycket för hjälpen!

Visa signatur