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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post

    Need help with footer alignment

    Hey all,

    First time coding a site, trying to figure all this out.
    Having problems trying to figure out how to make the footer expand all the way across the bottom rather then being the size of my content.

    Here is my css code for the footer part.

    #footer {
    margin: 0px;
    padding: 5px; padding-top:5px; padding-bottom: 5px;
    clear: both;
    background-image: url(images/footerbg.jpg);
    float: left;
    width: 100%;
    }

    #footer li a {
    decoration: underline;
    font-family: verdana;
    color: #999999;
    font-size: 11px;
    float: left;
    }

    .foot {
    color: #999999;
    font-family: verdana;
    padding-left: 40px;
    float: right;
    padding-bottom: 100px;
    }

    Here is my HTML Footer code.

    <div id="footer">
    <div id="footerimg">
    <img src="footerbg.jpg" />
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    <div class="foot">

    Tried to make an id of footerimg but that didn't work in the css. I'm confused, remember it's my first website lol

  • #2
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post
    Also, trying to figure out how to align text and images next to each other.
    So something like this:

    Social Connection (so much padding in between) Contact (padding) News & Updates

    With images and text below? How would I make them appear next to each other? Here's a pic of what I am trying to accomplish and here's a pic of what I got so far.

    Any help would be appreciated.
    Thanks,
    Jon



    and here is what I am trying to get.


  • #3
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,818
    Thanks
    42
    Thanked 199 Times in 198 Posts
    i would try removing float: left; from the footer section... also you open 3 <div> elements and never close them... what does rest of code look like? for the three areas- i see them as columns... try three div block elements... that would be my approach

  • #4
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post
    Thanks for that, I removed the float: left but it's still not correct.
    I'll be happy to past my code in this message, but it takes up a huge area. Is there an easy way to post my code without it take up a full page in this thread?

    Thanks,
    Jon

    Quote Originally Posted by alykins View Post
    i would try removing float: left; from the footer section... also you open 3 <div> elements and never close them... what does rest of code look like? for the three areas- i see them as columns... try three div block elements... that would be my approach

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    The # button wraps your code in code tags. Better would be a link to your live test page.
    Teed

  • #6
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post
    Quote Originally Posted by teedoff View Post
    The # button wraps your code in code tags. Better would be a link to your live test page.
    Don't have it on my site, give me a sec and i'll put it up.
    Thanks for the help!

    Edit: Alright added it to my site, visit pvdemos.com

    Thanks!
    Last edited by dazd; 04-28-2011 at 02:54 AM.

  • #7
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post
    Anyone??

  • #8
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,818
    Thanks
    42
    Thanked 199 Times in 198 Posts
    I looked at your code (html and css)
    I think your on the right path... I am currently working through learning alignment/placement of div elements myself (waiting on my text refrence to come in the mail)...

    I might try doing the following (but I don't know what the consequences would be...)

    for col 12&3...
    try placeing them within a container or wrapper div... get this div to sit where you want it... then you only have to worry about manipulating the divs col123 within that element... so you could do something like
    <div id= "contain"><col1></><col2></><col3></></div> ( i shorthanded these, obviously would need to write out actual code)

    then in your css could set widths based on % and they would be within the containing element...

    Like I said, I am still working out learning positioning elements myself... unfortunately all the web resources I've found are kind of vague in their description of how these interact... but this is the avenue I would venture down.

  • #9
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post
    You lost me, lol.
    Confused on how you think I should change the html for col1,2&3

    Not quite familiar with all of the codes and terms.

    Quote Originally Posted by alykins View Post
    I looked at your code (html and css)
    I think your on the right path... I am currently working through learning alignment/placement of div elements myself (waiting on my text refrence to come in the mail)...

    I might try doing the following (but I don't know what the consequences would be...)

    for col 12&3...
    try placeing them within a container or wrapper div... get this div to sit where you want it... then you only have to worry about manipulating the divs col123 within that element... so you could do something like
    <div id= "contain"><col1></><col2></><col3></></div> ( i shorthanded these, obviously would need to write out actual code)

    then in your css could set widths based on % and they would be within the containing element...

    Like I said, I am still working out learning positioning elements myself... unfortunately all the web resources I've found are kind of vague in their description of how these interact... but this is the avenue I would venture down.

  • #10
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,818
    Thanks
    42
    Thanked 199 Times in 198 Posts
    well right now you have something like this...

    <div id= "col1>
    the stuff you have inside that div (text and pics)
    ................................................
    ..........................
    ...............
    </div>

    <div id= "col2">
    the stuff in there......
    and then it closes and you have a third.... I would try doing something like:

    <div id= "contain_col">
    <div id= "col1">
    your text and pics and links
    </div>

    <div id= "col2">
    stuff...
    </div>

    <div col3 and then close it />
    </div

    then in your css, remove float parameters from col1 col2 col3 and set them up with a % base width... I think this will work... you may have to fidget with them some, but if you had something like:
    #col1{ margin-top: 0%; margin-right: 67%; margin-bottom: 0%; margin-left: 0%;}
    #col2{ margin-top: 0%; margin-right: 34%; margin-bottom: 0%; margin-left: 34%;}
    #col3{ margin-top: 0%; margin-right: 0%; margin-bottom: 0%; margin-left: 67%;}

    I think that will set up your div elements within your "container" element... then instead of trying to get 3 elements to behave properly on the page you only have one- you still need to make them behave within that one, but i think itll be easier... I would wait and see if someone of senior coder status agrees or has some insight (like i said, I'm trying to get a firm grasp on this as well- that would just be my approach )

  • #11
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post
    Well it looks like you know a lot more then I do lol..

    Thanks for that, i'll give it a try. Still trying to figure out the Footer lol!

    Thanks again
    Jon

    Quote Originally Posted by alykins View Post
    well right now you have something like this...

    <div id= "col1>
    the stuff you have inside that div (text and pics)
    ................................................
    ..........................
    ...............
    </div>

    <div id= "col2">
    the stuff in there......
    and then it closes and you have a third.... I would try doing something like:

    <div id= "contain_col">
    <div id= "col1">
    your text and pics and links
    </div>

    <div id= "col2">
    stuff...
    </div>

    <div col3 and then close it />
    </div

    then in your css, remove float parameters from col1 col2 col3 and set them up with a % base width... I think this will work... you may have to fidget with them some, but if you had something like:
    #col1{ margin-top: 0%; margin-right: 67%; margin-bottom: 0%; margin-left: 0%;}
    #col2{ margin-top: 0%; margin-right: 34%; margin-bottom: 0%; margin-left: 34%;}
    #col3{ margin-top: 0%; margin-right: 0%; margin-bottom: 0%; margin-left: 67%;}

    I think that will set up your div elements within your "container" element... then instead of trying to get 3 elements to behave properly on the page you only have one- you still need to make them behave within that one, but i think itll be easier... I would wait and see if someone of senior coder status agrees or has some insight (like i said, I'm trying to get a firm grasp on this as well- that would just be my approach )

  • #12
    New Coder
    Join Date
    Apr 2011
    Location
    New Delhi, India
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    u r looking for sticky footer solutionas far as footer part is concerned..
    code for that is below

    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">
    <head>
    <link rel="stylesheet" href="layout.css" ... />
    <style>
    * {
     margin: 0;
    }
    html, body {
     height: 100%;
    }
    .wrapper {
     min-height: 100%;
     height: auto !important;
     height: 100%;
     margin: 0 auto -4em;
    }
    .footer, .push {
     height: 4em;
    }
    .footer div {
                   position: absolute;
                   bottom: 0px;
    }
    </style>
    </head>
    <body>
      <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
      </div>
      <div class="footer">
        <div>
          <p>Copyright (c) 2008</p>
        </div>
      </div>
    </body>
    </html>
    use the above code just to check for footer part and than try u use in ur code... it's called sticky footer

    source url http://ryanfait.com/sticky-footer/

    for references


  •  

    Posting Permissions

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