SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting an image to always sit on top of sticky footer

    I'm trying to get my character to always stand on top of the sticky footer. How do I achieve this?

    here is my website:
    Untitled Document

    (let me know if any other info is needed to solve this problem)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Place the cartoon in the footer and then absolutely place it above the footer. Preserve the 500px space with a min-height on an element in the main section.

    The basics with a working sticky footer.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Sticky Footer at Bottom</title>
    <style type="text/css">
    * {/* for demo only*/
        margin:0;
        padding:0
    }
    html, body {
        height:100%;/* needed to base 100% height on something known*/
        text-align:center;
    }
    #outer {
        background:#ffffcc;
        margin:auto;
        min-height:100%;
        margin-top:-202px;/*footer height - this drags the outer 202px up through the top of the monitor */
        text-align:left;
        clear:both;
    }
    * html #outer {
        height:100%
    }
    #header {
        border-top:202px solid #fff; /* soak up negative margin and allows header to start at top of page*/
    }
    #footer {/* footer now sits at bottom of window*/
        margin:auto;
        height:199px;/* must match negative margin of #outer */
        clear:both;/* for opera 11*/
        background: url(http://www.brysonprice.com/img/homefootgrad.png);
        border-top:3px solid #282828;
        position:relative;/* stacking context for cartoon */
    }
    /*Opera Fix*/
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
    h1, h2, p {
        padding:0 10px;
    }
    #outer:after {
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    .cartoon {
        text-align: center;
        width:100%;
        position:absolute;
        height:500px;
        top:-503px;
        background:blue;/* for testing */
        margin:auto;
    }
    #main {
        min-height:503px;/* preserve height of cartoon*/
    }
    * html #main {
        height:503px
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <!-- border top on header soaks up sticky footer so son;t remove header -->
        <div id="header">
            <h1>Sticky Footer</h1>
        </div>
        <!-- cartoon will sit over the space preserved by #main -->
        <div id="main"></div>
    </div>
    </div>
    <div id="footer">
        <p>Footer</p>
        <div class="cartoon">Cartoon</div>
    </div>
    </body>
    </html>
    If you are putting content in the middle as well then you'll have to protect the cartoon with bottom padding on #main instead.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Place the cartoon in the footer and then absolutely place it above the footer. Preserve the 500px space with a min-height on an element in the main section.
    Paul,

    The sticky footer has a border on the top. If I place the cartoon inside the sticky footer, the border will then be on top of the cartoon. Correct?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Did you not check out my working example above? The blue background in that example would be your cartoon and as you can see it sits on top of that border exactly as you wanted .

    The cartoon is taken out of the footer using absolute positioning and placed above it. That's the only way you can keep track with the footer

    Your sticky footer was broken which is why I gave you a working version to work with. Just dop your content into my set up and adjust to suit.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    1st off, I just want to say thank you for being very generous and sharing your knowledge with a newb like me. This was exactly what I was looking to do : )

    It did exactly what I wanted except in IE 6, and IE 7. I tested with IE tester (check the pic below)

    http://i187.photobucket.com/albums/x...at/IE6and7.jpg

    Here is the UPDATED LINK to my website: www.brysonprice.com/stickyfooter.html

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Try adding left:0 to .cartoon.

    Code:
    .cartoon {
        text-align: center;
        width:100%;
        position:absolute;
        height:500px;
        top:-503px;
        background:blue;/* for testing */
        margin:auto;
            left:0;
    }
    IE6 and 7 like co-ordinates rather than auto co-ordinates or it takes its 100% width from the central position because of the text-align:center;

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Try adding left:0 to .cartoon.
    Paul,

    Adding, left:0 to the .cartoon div worked

    There is one last problem though...the star images, the 'bryson price' image and the navigation images are a little off from the original. I tried adding margins/ padding, centering the text, vertical aligning the images and moving the div that the images were in, but none of these things made the images move : /

    What can I do to align these images as they were before?

    OLD webpage: Untitled Document
    Webpage with Paul's fix: Sticky Footer at Bottom

    Once again, I really appreciate you helping me out. I have been searching for a while on how to fix this problem. Thanks for sharing your expertise and time to help

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    H,

    Try this:

    Code:
    .centertopfoot img{
    vertical-align:middle
    }
    Hopefully that will align them vertically as they are inline elements.

    Don't use an empty p element just to make space. You could simply add some padding top to your centertopfoot element instead.

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    H,

    Don't use an empty p element just to make space. You could simply add some padding top to your centertopfoot element instead.
    This helped the star images and the 'bryson price' image, but I tried to apply this same concept to the 'bio, music, contact' and it did this:
    Sticky Footer at Bottom
    (the images never properly centered within the div and when I added padding, it only added it to the vertical lines)

    Does it have something to do with those images being .swf files? The 'bio, music and contact' images are .swf files, while the 2 vertical lines are .png files.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    HI,

    Which page am I looking at exactly. That link seems ot be the front page again which seems to look ok. Was I supposed to navigate to another page.

    If you are trying to center something other than an image then place a div around the element and give that div the width of the element (not 100%) then use margin:auto which will center the block element in the avialable space..

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    HI,

    Which page am I looking at exactly. That link seems ot be the front page again which seems to look ok. Was I supposed to navigate to another page.

    If you are trying to center something other than an image then place a div around the element and give that div the width of the element (not 100%) then use margin:auto which will center the block element in the avialable space..
    The page I wanted you to look at was the same page( Sticky Footer at Bottom).
    On my end, it looks like this (I circled the problem):
    http://i187.photobucket.com/albums/x.../problem-1.jpg

    I tried setting a width and putting a "margin:auto" with the div (the div on my page that goes around these elements is 'wrapmenu'), but things got messed up. Maybe it's because it's not just one element inside the div(it's 5 elements).

    I'm just trying to get the navigation menu to look like the one on my old page:
    Untitled Document

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Try something like this:

    Code:
    .wrapmenu object{
        display:inline;
        vertical-align:middle
    }
    .wrapmenu img{padding:5px 0 0}
    .wrapmenu{padding-top:20px}
    I think that's what you were after

  13. #13
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Try something like this:

    Code:
    .wrapmenu object{
        display:inline;
        vertical-align:middle
    }
    .wrapmenu img{padding:5px 0 0}
    .wrapmenu{padding-top:20px}
    I think that's what you were after
    Paul,

    Am I doing something wrong?

    I inserted this code, but the spacing was really off. And I messed around with the code a little and got it to look like this:
    http://www.brysonprice.com/stickyfooter

    I found that I had to insert
    "padding-top: 0px;" into the code so that the navigation menu would be out of place:

    HTML Code:
    .wrapmenu object{
        display:inline;
        vertical-align:middle
    	padding-top: 0px;
    }
    And also, I tried messing with this code:
    HTML Code:
    .wrapmenu img{padding:5px 0 0}
    .wrapmenu{padding-top:20px}
    Chaning the .wrapmenu img padding would only move the bars in between the words, but when changing the .wrapmenu padding, it would pad ALL the elements (including the bars).

    I looks pretty good now, but I would like it to be centered in between the bars like this (as it was on brysonprice.com):
    http://i187.photobucket.com/albums/x...t/centered.jpg. But if this is too much to ask, it's all good. You have helped me out tremendously already! Thanks Paul

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    We must be seeing different things

    Code:
    * html #main {
        height:503px
    }
    .centertopfoot img {
        vertical-align:middle;
        padding-top: 30px;
    }
    .wrapmenu object,.wrapmenu img {
        display:inline;
      vertical-align:middle;
    }
    .wrapmenu img {
        padding:5px 0 0
    }
    .wrapmenu{padding-top:20px}
    I get the result shown in my screenshot.

    Isn't that what you wanted or is there some more alignment needed?

    You might also want to add these minor adjustments for IE7 and 6.

    Code:
    * html .wrapmenu{padding:0}
    *+html .wrapmenu{padding:0}
    * html .centertopfoot img{padding-top:10px}
    *+html .centertopfoot img{padding-top:10px}
    Attached Images Attached Images

  15. #15
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I didn't know I was supposed to put .wrapmenu object &.wrapmenu img together on the same line and that's what messed up my results.

    Everything is working great now. THANK YOU so much for helping me out. This has been the best help I've ever had on a forum! Your awesome

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Glad to help

  17. #17
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Glad to help
    Paul,

    I'm sorry to ask another question, but when I was testing the homepage, for some reason, the BIOGRAPHY, MUSIC and CONTACT links don't link properly on all browsers. On Firefox and Safari, when you click the BIOGRAPHY, MUSIC and CONTACT objects, it takes you to the pages. But not in INTERNET EXPLORER or GOOGLE CHROME. Do you know why this is happening?

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bigbonthabeat View Post
    Paul,

    I'm sorry to ask another question, but when I was testing the homepage, for some reason, the BIOGRAPHY, MUSIC and CONTACT links don't link properly on all browsers. On Firefox and Safari, when you click the BIOGRAPHY, MUSIC and CONTACT objects, it takes you to the pages. But not in INTERNET EXPLORER or GOOGLE CHROME. Do you know why this is happening?
    Hi,

    I believe that you need to embed the link in the actual flash file when you make it. I don't get involved in flash so may be a question more suitable for the flash forum

    I tried all my normal tricks but IE doesn't want to play ball.

  19. #19
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    I believe that you need to embed the link in the actual flash file when you make it. I don't get involved in flash so may be a question more suitable for the flash forum

    I tried all my normal tricks but IE doesn't want to play ball.
    alright, thanks again Paul. You have been more than helpful


Bookmarks

Posting Permissions

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