Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2012
    Thanked 0 Times in 0 Posts

    what's wrong with my #footer?

    Dear all,

    I want my footer to appear in the very bottom of the page but it doesn't (see, e.g. http://www.lixiao-art.com/broken.html). What's wrong with my #footer?

    In my external css, I put:
    body { font-family: Verdana;
    color: white;
    margin: 0px;
    background-color: black;

    #header { font-family: courier new;
    padding-left: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: none;
    background-color: white;
    margin-bottom: 0px; }

    #content {float: left;
    padding: 30px 20px 20px 100px;
    width: 650px;
    margin: 0px;
    border: none;
    font: white;
    font-family: Arial;
    background-color: black; }

    #content a {text-decoration:underline}

    h2 {height: 2em;}

    #nav {float: left;
    text-align: right;
    font-size: small;
    width: 180px;
    margin-top: 30px;
    font-weight: bold;
    padding: 10px;
    border: none;

    #footer { font-family: arial;
    padding-bottom: 5px;
    width: 100%
    border: none;
    background-color: black;
    color: white;
    margin-bottom: 0px;

    a{text-decoration: none;
    color: white;}
    a:hover {color: red;}

    * {margin: 0;}
    html, body {height: 100%;}

    .wrapper {min-height: 100%;
    width: 1500px;
    height: auto !important;
    height: 100%;
    margin: 0 auto -1.5em;}

    .footer, .push { height: 1.5em; }
    .ImgBorder img { border:1px solid transparent;
    .ImgBorder:hover img{ border-color: red}

    .ImgBorder {display: block;
    float: left;
    margin: 30px 20px; }

    img { border: none; }


    In the body html, I put:
    <div class="push"></div>
    <div class="footer">
    <h6 style="color: white; text-align: center;">CONTENT</h6>

    Please help! Thanks so much!!

  • #2
    New Coder
    Join Date
    Feb 2012
    Thanked 9 Times in 9 Posts
    Here is your HTML code, I added two things marked underlined.

    </div> is there to close the content div so your footer isnt inside of it

    <div style="clear: both;"></div> is there to clear the floats that you got going with your images so they don't affect the footer.

    you should do class named clearer and give it style "clear: both;" in CSS and use it instead so you can use the same class in other sites with same CSS file

    example: <div class="clearer"></div>

    <!DOCTYPE html
         PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <title>Li Xiao, artist | 李枭 艺术家</title>
      <meta http-equiv="content-type" 
        content="text/html;charset=gb2312" />
            <meta name="keywords" lang="en" 
             content="Li Xiao, Li Xiao art, Chinese art, Sichuan Academy of Fine Arts, Sichuan artist, Hong Kong art, artist Li Xiao, terracotta warriors"/>
             <meta name="keywords" lang="cn" 
             content="李枭" />
    <link rel="stylesheet" type="text/css" href="css/global.css" />
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/lightbox.js"></script>
    <link href="css/lightbox.css" rel="stylesheet" />
    <div class="wrapper"> 
    <div id="header">
    <img src="/images/lixiao_name2.png" />
      <div id="nav">
       <p><a href="concept.html">Concept</a></p>
        <p><br/><a href="broken.html">"Broken"</a></p>
      <p><br/><a href="gaze.html">"Gaze"</a></p>
    <p><br/><a href="past.html">Past</a></p>
    <p><br/><a href="views.html">Views</a></p>
    <p><br/><a href="exhibit.html">Exhibitions</a></p>
    <p><br/><a href="me.html">About me</a></p>
    <p><br><a href="contact.html">Contact</a></p>
    <div id="content">
        <br/><small>(click on images to enlarge)</small>
        <a href="http://www.lixiao-art.com/work/latest/bliss/1.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/1_t.jpg" /></a> 
        <a href="http://www.lixiao-art.com/work/latest/bliss/2.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/2_t.jpg" /></a> 
        <a href="http://www.lixiao-art.com/work/latest/bliss/3.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/3_t.jpg" /></a> 
        <a href="http://www.lixiao-art.com/work/latest/bliss/4.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/4_t.jpg" /></a> 
        <a href="http://www.lixiao-art.com/work/latest/bliss/5.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/5_t.jpg" /></a> 
        <a href="http://www.lixiao-art.com/work/latest/bliss/6.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/6_t.jpg" /></a> 
        <a href="http://www.lixiao-art.com/work/latest/bliss/7.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/7_t.jpg" /></a> 
        <a href="http://www.lixiao-art.com/work/latest/bliss/8.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/8_t.jpg" /></a>   
        <a href="http://www.lixiao-art.com/work/latest/bliss/9.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/9_t.jpg" /></a> 
        <a href="http://www.lixiao-art.com/work/latest/bliss/10.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/10_t.jpg" /></a> 
        <a href="http://www.lixiao-art.com/work/latest/bliss/11.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/11_t.jpg" /></a>   
        <a href="http://www.lixiao-art.com/work/latest/bliss/12.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/12_t.jpg" /></a> 
        <a href="http://www.lixiao-art.com/work/latest/bliss/13.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/13_t.jpg" /></a> 
        <a href="http://www.lixiao-art.com/work/latest/bliss/14.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/14_t.jpg" /></a>   
        <a href="http://www.lixiao-art.com/work/latest/bliss/15.jpg" rel="lightbox[gaze]" class="ImgBorder"><img src="work/latest/bliss/15_t.jpg" /></a>
        <br />   
      <div class="push"></div>
    <div style="clear: both;"></div>
    <div class="footer">    
      <h6 style="color: white; text-align: center;">Li Xiao's Studio 李枭工作室 &copy; 2012 </h6>  

  • Users who have thanked Riku for this post:

    lixiao (08-03-2012)

  • #3
    New Coder
    Join Date
    Jul 2012
    Thanked 0 Times in 0 Posts
    Thank you so much!

    How can I make the footer appear in the centre, relative to the text (rather than center of the whole screen)?

    PS. The reason why i put width in the wrapper is because I don't want my #nav to be squeezed up when the browser size is too small.
    Last edited by lixiao; 08-04-2012 at 05:34 AM.


    Posting Permissions

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