Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: More CSS Footer Issues

  1. #1
    fbmagik
    fbmagik is offline
    Member fbmagik's Avatar
    Join Date
    Mar 2010
    Posts
    136

    Default More CSS Footer Issues 4 Jan 2011 @ 23.56

    Hi,

    Everytime I design a new website from scratch for my own practise, everything usually goes smoothly until I come to the footer, then it all goes wrong. I can never seem to get it right.

    If someone could help that would be great.

    Usually I go about creating footers by starting with a small rectangular image the exact height I want the footer to be. I then place it in the HTML and use CSS to repeat the image along the bottom of the page.

    I then usually follow the instructions on this website:

    A CSS Sticky Footer

    My aim is to keep the footer at the bottom of the page at all times, even when the window is re-sized (unless there is content on the page, I don't want it to overlap). When there is content on the page, I would like that to push the footer down so the footer is always (for example) at least 40px away from the bottom of the content.

    This always seems to be an issue, so how does everyone else get around this? Is the way I create the footer wrong? With the websites I have done up until now, there hasn't been much content. Some pages have more content than others, so I couldn't have a set length to the website. How do other people get around this?

    With the website I am currently working on, I can get the footer to follow the re-sizing window, but for some reason there is a 30px gap between the bottom of the window and the footer. The footer also currently overlaps the content. Here is my current code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <title>Creative Portfolio</title>

    <link href="stylec.css" rel="stylesheet" type="text/css" media="screen"/>

    <!--[if IE]>
            <link rel="stylesheet" type="text/css" href="ie.css"/>
    <![endif]-->

</head>

<body>
        
    
    <div id="container">
        

        <div class="header">

            <img class="logo"><a href="index.html"><img src="images/logo.png" alt="Creative Portfolio"></a></img>
            
            
            <div class="menu">
                        
                <ul>
                    <li class="selected"><a href="index.html">Home</a></li>
                    <li><a href="about.html">About Me</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="cv.html">CV</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>

            </div>


            <div class="photo">

                <img src="images/photo.jpg"></img>
        
            </div>

        
        </div>    

    
        
        <div class="content">
            

            <div class="text">

                <h1>blah blah blah blah blah blah blah blah blah</h1><br>
                <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p><br>
                <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p><br>
                <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah:</p><br>
                <ul>
                <li>blah blah blah</li>
                <li>blah blah blah blah blah blah</li>
                <li>blah blah blah</li>
                <li>blah blah blah</li>
                </ul>

            </div>

            <div class="divide">
            
                <img src="images/divide.png"></img>

            </div>


        </div>

        <div class="push"></div>    
    
    </div>

        <div class="footer">

            <div class="ftr">

                <div class="footertext">

                <p>&copy 2011 Creative Portfolio</p>

                </div>

                <a class="ftc" href="contact.html">Contact</a>

                <div class="social">

                <a href="http://uk.linkedin.com/><img src="images/linkedin.png"/></a> 
                <a href=""><img src="images/rss.png"/></a> 

                </div>

            </div>
    
        </div>


</body>

</html>
    CSS:

    Code:
    body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
    margin: 0; padding: 0; border: 0;
}

html {

    height: 100%;
}

body {
   
    background: url(images/bg.jpg) center top repeat;margin:0;
       height:100%;
    min-height: 100%;
    width: 100%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

h1 {

    font-size: 24px;
    color: #4bb0fd;
}

#container {
   
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 978px;
    margin: 0 auto -60px;
}

.header {
    
    margin-top: 30px;
    position: absolute;
}

.header .logo {
    
    position: relative;
    margin-left: -40px;
    z-index: 2;
}

.header .photo {

    position: relative;    
    margin-left: 0 auto;
    margin-right: 0 auto;
    margin-top: -104px;
    z-index: 1;
}

.header .menu {

    float: right; 
    margin-left: -20px;
    margin-top: -7px;
}

.header .menu li {

    display: inline; 
}

.header .menu a {

    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 35px;
    font-weight: bold;
    color: #4bb0fd;
    margin-left: 28px;
}

.header .menu a:hover {

    color: #ff7070;
}

.header .menu a:active {

    color: #d1ebff;
}

.header .selected a {

    color: #ff7070;
}

.content {

    width: 978px;
    position: absolute;
}

.divide, .text {

    position: relative;
    padding-top: 40px;
}

.divide {
    
    right: 0;
    width: 10px;
    margin-right: 450px;
}

.text {

    left: 0;
    text-align: left;
    width: 500px;
}

.text li {

    margin-left: 35px;
}

.footer {
    
    background-image: url(images/footer.jpg);
    background-repeat: repeat-x;
    width: 100%;
    height: 60px;
}

.push {

    height: 60px;
}

.footer .ftr {
        
    position: absolute;
    width: 978px;
    left: 50%;
    margin-left: -489px;
}

.footer .ftc {
        
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    color: #4bb0fd;
    float: right;
    margin-top: 21px;
    text-decoration: none;
}

.footer .footertext p {
    
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    float: left;
    margin-top: 21px;
}

.footer .social {
    
    float: right;
    margin-right: 20px;
    margin-top: 5px;
}
    Hope it all makes sense.

    Thanks
      Reply With Quote
  2. #2
    fbmagik
    fbmagik is offline
    Member fbmagik's Avatar
    Join Date
    Mar 2010
    Posts
    136

    Default 6 Jan 2011 @ 18.23

    Okay. Can anyone just point me to a good tutorial?

    Possibly one which deals with small to medium sized websites and can offer good advice on how best to deal with lengths of pages and footer positioning.
      Reply With Quote
  3. #3
    Karti
    Karti is offline
    New Registered User Karti's Avatar
    Join Date
    Jan 2011
    Posts
    41

    Default 6 Jan 2011 @ 18.48

    Hi,

    Frinkky gave me this link earlier - here Same idea but the instructions look well laid out.

    Wonder if that could help?

    K
      Reply With Quote
  4. #4
    fbmagik
    fbmagik is offline
    Member fbmagik's Avatar
    Join Date
    Mar 2010
    Posts
    136

    Default 6 Jan 2011 @ 19.09

    I will give it a go. Thanks!
      Reply With Quote
  5. #5
    WelshStew
    WelshStew is offline
    Administrator WelshStew's Avatar
    Join Date
    Dec 2008
    Posts
    2,976
    Blog Entries
    3

    Default 7 Jan 2011 @ 07.39

    The issue I have found with sticky footers, is that as soon as the layout becomes complicated it doesn't work.

    If you find a good solution, please let us know.
    WelshStew
    follow me | WelshStew - Web Design & Web Development | Motorhome hire wales
      Reply With Quote
  6. #6
    Frinkky
    Frinkky is offline
    Administrator Frinkky's Avatar
    Join Date
    Dec 2008
    Posts
    1,817
    Blog Entries
    1

    Default 7 Jan 2011 @ 08.33

    Could throw caution to the wind and use a js solution (make sure the non-js does nothing but tag along to the end of your content though).
    Jon Warner
    Web Pro Cafe :: The PixelForge :: Follow my Twits (or something) :: LinkedIn
      Reply With Quote
  7. #7
    fbmagik
    fbmagik is offline
    Member fbmagik's Avatar
    Join Date
    Mar 2010
    Posts
    136

    Default 7 Jan 2011 @ 19.55

    quote
    The issue I have found with sticky footers, is that as soon as the layout becomes complicated it doesn't work.

    If you find a good solution, please let us know.
    Originally Posted by WelshStew View Post
    What would be a standard way to design a website with a footer, without using any type of sticky footer?

    Would you just plan the website out so it's a fixed length for each page depending on how much space the content takes up?

    I find lengths of websites really hard to figure out. Say you had a page and wanted to add more content to it (below the rest of the content), how would you design for that? The footer would have to move down surely?

    Also, when it comes to pages with greater content and your background is a gradient, how do you stretch out the gradient to accompany the extra background needed?
      Reply With Quote
  8. #8
    Mike Hopley
    Mike Hopley is offline
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    676

    Default 8 Jan 2011 @ 09.31

    The most common design is to fix the width, but let the page contents determine the height. If you add content, the page gets longer.

    The footer will move down by default, when you add content. You actually have to do something quite clever to stop this from happening.

    Fixing the page height is usually a bad idea, because it makes your design extremely inflexible. If you change the amount of content, the design breaks.
      Reply With Quote
  9. #9
    fbmagik
    fbmagik is offline
    Member fbmagik's Avatar
    Join Date
    Mar 2010
    Posts
    136

    Default 9 Jan 2011 @ 20.55

    quote
    The most common design is to fix the width, but let the page contents determine the height. If you add content, the page gets longer.

    The footer will move down by default, when you add content. You actually have to do something quite clever to stop this from happening.

    Fixing the page height is usually a bad idea, because it makes your design extremely inflexible. If you change the amount of content, the design breaks.
    Originally Posted by Mike Hopley View Post
    Would this work still if you fixed the width of the different onpage elements so they wouldn't overflow the set width of the page anyway?

    What is a good width to go for? And how would you do this?
      Reply With Quote
  10. #10
    fbmagik
    fbmagik is offline
    Member fbmagik's Avatar
    Join Date
    Mar 2010
    Posts
    136

    Default 10 Jan 2011 @ 00.31

    Right, as usual, I try different websites and suddenly it works, but I don't know why.

    I used this one:

    New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer

    I will post my current working code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>

<head>
    
    <title>Creative Portfolio</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <link href="style.css" rel="stylesheet" type="text/css" media="screen"/>

    <!--[if IE]>
            <link rel="stylesheet" type="text/css" href="ie.css"/>
    <![endif]-->

    <!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
    <![endif]-->

</head>

<body>
        
    <div id="container">
        
        <div id="header">

            <div class="menu">
                        
                <ul>
                    <li class="selected"><a href="index.html">Home</a></li>
                    <li><a href="about.html">About Me</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="cv.html">CV</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>

            </div>

            <img class="logo"><a href="index.html"><img src="images/logo.png" alt="Creative Portfolio"></a></img>

            <div class="photo">

                <img src="images/photo.jpg"></img>
        
            </div>

        
        </div>    

    
        
        <div id="content">
            

            <div class="text">

                <h1>Welcome to my site</h1><br>
                <p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p><br>
                <p>Blah Blah Blah Blah Blah Blah Blah Blah:</p><br>
                <ul>
                <li>Blah Blah Blah Blah</li>
                <li>Blah Blah</li>
                <li>Blah Blah Blah Blah</li>
                <li>Blah Blah</li>
                </ul>

            </div>

            <div class="divide">
            
                <img src="images/divide.png"></img>

            </div>

        </div>
    
    </div>

        <div id="footer">

            <div class="ftr">

                <div class="footertext">

                <p>&copy 2011 Creative Portfolio</p>

                </div>

                <a class="ftc" href="contact.html">Contact</a>

                <div class="social">

                <a href="http://uk.linkedin.com"><img src="images/linkedin.png"/></a> 
                <a href=""><img src="images/rss.png"/></a> 

                </div>

            </div>
    
        </div>


</body>

</html>
    CSS:

    Code:
    body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
    margin: 0; padding: 0; border: 0;
}

html {

    height: 100%;
}

body {
   
    height:100%;
    background: url(images/bg.jpg) center top repeat;margin:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

h1 {

    font-size: 24px;
    color: #4bb0fd;
}

#container {
   
    overflow: auto;
    padding-bottom: 60px;
    margin-bottom: 60px;
    width: 978px;
    margin-left: auto;
    margin-right: auto;
}

#header {
    
    padding-top: 25px;
    width: 978px;
    height: 400px;
}

#header .logo {
    
    margin-left: 20px;
    z-index: 2;
}

#header .photo {

    margin: 0;
    z-index: 1;
    margin-top: -86px;
}

#header .menu {

    float: right; 
    margin-left: -20px;
    margin-top: -7px;
}

#header .menu li {

    display: inline; 
}

#header .menu a {

    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 35px;
    font-weight: bold;
    color: #4bb0fd;
    margin-left: 28px;
}

#header .menu a:hover {

    color: #ff7070;
}

#header .menu a:active {

    color: #d1ebff;
}

#header .selected a {

    color: #ff7070;
}

#content {

    padding-top: 35px;
    font-family: Arial, Helvetica, sans-serif;
    width: 978px;
}

.text {

    position: absolute;
    width: 625px;
}

.text li {

    margin-left: 35px;
}

.divide {
    
    float: right;
    margin-right: 300px;
    width: 10px;
    position: relative;
    margin-top: 5px;
    display: inline;
}

#footer {
    
    position: relative;
    margin-top: -60px;
    height: 60px;
    background-image: url(images/footer.jpg);
    background-repeat: repeat-x;
    width: 100%;
}

#footer .ftr {
        
    position: absolute;
    width: 978px;
    left: 50%;
    margin-left: -489px;
}

#footer .ftc {
        
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    color: #4bb0fd;
    float: right;
    margin-top: 21px;
    text-decoration: none;
}

#footer .footertext p {
    
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    float: left;
    margin-top: 21px;
}

#footer .social {
    
    float: right;
    margin-right: 20px;
    margin-top: 5px;
}
    Not sure what has fixed the issue there.

    There is one more issue since the fix. I seem to be getting a Horizontal scroll bar located at the bottom of the content only in Firefox.

    Anyone know a fix?
      Reply With Quote
Page 1 of 2 12 LastLast
« why am i getting this extra left styling which i have not added?? | too much margin? phantom white space »

Similar Threads

  1. CCS problem with footer
    By trixiemay in forum HTML & CSS
    Replies: 2
    Last Post: 29 Mar 2011, @ 08.46
  2. How to get rid of Footer Links?
    By Schwarz in forum PHP, ASP & Java
    Replies: 7
    Last Post: 7 Mar 2011, @ 20.00
  3. Footer problems
    By Rob_C in forum Just Starting Out - Help Me!
    Replies: 2
    Last Post: 6 Feb 2011, @ 13.52
  4. Footer Issue
    By fbmagik in forum HTML & CSS
    Replies: 5
    Last Post: 1 Dec 2010, @ 07.23
  5. CSS Footer
    By fbmagik in forum HTML & CSS
    Replies: 9
    Last Post: 19 Oct 2010, @ 10.45

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules

Web Design and Web Development Forums - Web Design Forums | Web Design Help (Web Design Forums)
  • WebProCafe @ Twitter
  • WebProCafe @ TwiDAQ