Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13

Thread: CSS Footer Help

  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts

    CSS Footer Help

    I have a website http://www.foodprotect.org/CFP.php that I'm trying to get a footer to work properly. Currently I have a graphic that "closes" the square around the middle body of text that has "C Conference for Food Protection" at the bottom. But as you can see on the website, after this bottom part closes the square, the side bars continue on after it.

    Can somebody help with this?

    Thanks!

  • #2
    New Coder
    Join Date
    Sep 2007
    Posts
    16
    Thanks
    0
    Thanked 1 Time in 1 Post
    not 100% sure but what if you delete this way at the bottom

    Code:
    <!--<div class="box3text"><span class="styleboxheader">Upcoming Events</span><br/>
      <br/>
    <span class="styleboxcontent">Details of Meetings, Conference Calls, Committee Report Due Dates, etc.<br/><br/>
    
    <a class="box1text" href="test.html">More</a> >></span>
    </div> -->
    
    <!--<div class="contentareabox1">The 2008 Conference for Food Protection Biennial Meeting will be held at The Omni San Antonio Colonnade,</div>
    <div class="contentareabox2">This is headline #2...</div>
    <div class="contentareabox3">This is headline #3...</div>-->
    at first i thought it was your menu on the right. but this one has "test.html" as the link for "more" while the correct "more" link has "upcoming events.html" which is located WAY up there in the html.

    and since these have comment tags, idk. could be worth just getting rid of. especially since they follow right after the problem area.

    try it out.

  • #3
    New Coder
    Join Date
    Sep 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I took that part out, but it didn't seem to help.

    The site looks really messy, code wise, because I originally put it all together, but then installed a web wysiwyg editor on it, and the person that has made updates using it, has totally messed up all of the code. The program is webedit. Does anybody use it, or have an alternative? It just makes the coding so crazy.

    But, back to my original issue, no idea why my footer won't close the square. On all of the other pages, it looks fine?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Hi,
    First of all add a proper DOCTYPE to you page, see Which Dtd (doctype) to use on page? to get more about this.
    After all validate your page using w3-validator.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Sep 2007
    Posts
    16
    Thanks
    0
    Thanked 1 Time in 1 Post
    adburaooft has a good point. think of the w3c as the poeple you go to to make sure your code is correct. i love that place.

    but i did some extra poking around again myself and found out you actually have two body tags! your only supposed to have 1 of those.

    also. at the bottom, you have the following

    <img src="/images/contentfooter.gif"/>



    </div>
    </div>







    </body><div id="footer">
    </div>

    </div></body>
    </html>
    the footer.gif is supposedly the one doing its job appearing at the bottom and that should be it. so when i saw that (aside from double bodys) you also have a new div starting with the name "footer" i checked out your css to see what it would have and it had this

    #footer{
    position:relative;
    width:550px;
    bottom:0;
    background: url(../images/contentfooter2.gif)

    height: 50px;
    z-index:1;


    }
    my guess is, the <div id="footer"> is the real problem because the name of the footer that is actually showing up on the page is just "contentfooter.gif" and NOT "contentfooter2.gif". so that div is basically not even working right.


    try removing that div.

    GL

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Are you trying to get a preview which looks like when you change your
    Code:
    <div style="top: 202px; height: 1251px; left: 175px; width: 552px;" class="contentbg">
    to
    Code:
    <div style="top: 202px; height: auto; left: 175px; width: 552px;" class="contentbg">
    ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    t-buck (09-30-2007)

  • #7
    New Coder
    Join Date
    Sep 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks for everybody's help! I changed one thing like abduraooft suggested height: 1251px to height: auto, and it looks perfect!

    One other issue, if anybody has time, is with this specific page:

    http://www.foodprotect.org/AACFPNew/...evelopment.htm

    Question #1: the table won't stay within the border.
    and Question #2: why is the text shoved to the left in the green table?

    I've redone this page over and over again, and it's driving me crazy. No clue why this is happening.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    #1) In the CSS for the first table change
    Code:
    element.style {
    height:28px;
    width:100%;
    }
    (Change the same for the second table where you have used a fixed pixel width)

    #2)
    stylemainbodytext
    color:black;
    font-family:Arial;
    font-size:14px;
    text-align:center;
    }

    I think you can replace those tables with div s, which will help you much in positioning and layout.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Sep 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts
    So I created a div for tablegreen, and a soon as I made the list a bulleted list, it moved everything over to the left again. Any ideas?

  • #10
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    check your (missing) Doctype...

  • #11
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I think this is what you are trying to get at...

    Code:
    div.tablegreen {
    background-color:#9FFA87;
    text-align: center;
    width:100%;
    list-style:disc;
    list-style-type:disc;
    }
    
    .tablegreen ul {
    width: 400px;
    }

  • #12
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Hey.
    I've checked your website with a validator and there are many errors there.
    It would be wise to try and fix them.
    You discard a few unexpected SCRIPT tags and you don't have any doctype.

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by BarrMan View Post
    Hey.
    I've checked your website with a validator and there are many errors there.
    It would be wise to try and fix them.
    You discard a few unexpected SCRIPT tags and you don't have any doctype.
    Apparently you have also mis-spelt the word 'align'; you have put 'algin' in your css.

    You really should put a Doctype and validate.

    Frank
    Last edited by effpeetee; 10-02-2007 at 10:28 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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