Wed, 2013-07-24 21:27
Hello,
I did some research on the internet and found a couple sollutions for letting the footer stick to the bottom of your webpage. I applied those, but when I put my website in windowed mode my footer isnt at the bottom anymore.
My code:
<div id="wrapper"> <header id="header"> <div class="wrap"> <h1>Mark Vogelaar Portfolio</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="work.html">My Work</a></li> <li><a href="about.html">About Me</a></li> <li><a href="contact.html">Contact me</a></li> </ul> </nav> </div> </header> </header><!-- #header--> <div id="content" > <div id="contentheader"> <section id="circles" class="wrap"> </section> </section> <section id="circle-discription" class="wrap"> </section> </div> <div id="contentcontent"></div> </div><!-- #content--> <footer id="footer"> <h1>Mark Vogelaar & Toros Locos Copyright ©</h1> </footer><!-- #footer --> </div><!-- #wrapper -->
CSS:
#footer { position:absolute; bottom:0; width:100%; height:50px; /* Height of the footer */ background-color: #2e3743; }
Can somebody help me or knows what I am doing wrong?
Thanks,
~Mark
Wed, 2013-07-24 23:13
#1
Hi MarkVog, For that to work,
Hi MarkVog,
For that to work, you need to make sure the footers parents have a height and are positioned.
Can you link to the site?
Fri, 2013-07-26 12:43
#2
RE:
The website isnt online. But here is the entire code of one of my pages:
<div id="content" > <div id="contentheader"> <section id="circles" class="wrap"> <h1>My Goals</h1> <section id="circle1-section"> <div id="circle1"></div> <h2>Mobile Design</h2> <p> Hier komt een beschrijving van wat er onder webdesign hoort te staan. Namelijk dat ik daar mee bezig ben en wat ik er van wil leren.Hier komt een beschrijving van wat er onder webdesign hoort te staan. Namelijk dat ik daar mee bezig ben en wat ik er van wil leren.</p> </section> <section id="circle2-section"> <div id="circle2"></div> <h2>Webdesign</h2> <p> Hier komt een beschrijving van wat er onder webdesign hoort te staan. Namelijk dat ik daar mee bezig ben en wat ik er van wil leren.Hier komt een beschrijving van wat er onder webdesign hoort te staan. Namelijk dat ik daar mee bezig ben en wat ik er van wil leren.</p> </section> <section id="circle3-section"> <div id="circle3"></div> <h2>UX Design</h2> <p> Hier komt een beschrijving van wat er onder webdesign hoort te staan. Namelijk dat ik daar mee bezig ben en wat ik er van wil leren.Hier komt een beschrijving van wat er onder webdesign hoort te staan. Namelijk dat ik daar mee bezig ben en wat ik er van wil leren.</p> <h3>See my Work!</h3> </section> </section> <section id="circle-discription" class="wrap"> </section> </div> <div id="contentcontent"></div> </div><!-- #content--> <footer id="footer"> <h1>Mark Vogelaar & Toros Locos Copyright ©</h1> </footer><!-- #footer -->
The parent element here is div#content, so does that one needs to have a height in order to work?
Fri, 2013-07-26 13:02
#3
RE:
Work for 3/4 pages except one, the problem is, the height of that page is different in on any screen. It depends on the width of your screen. Its kinda responsive.
If i set it to 2000px height its enough on almost every browser, bot on large once its far too much.
How do i solve this?
Fri, 2013-07-26 21:19
#4
Try this
Footer at the bottom of the viewport
I am not a fan of the idea, as it is not appropriate to the web, but I wrote the article back in 2005, and it's still applicable.
cheers,
gary