SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 36
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image a set distance from bottom

    Hi all,

    I'm been working on this layout for a quite a while now and I had it working fine when the content wasn't any bigger than the window, but when it was the footer moved away and the side graphics didn't go with it.

    Sorry, I realise that doesn't make much sense (I'll blame my lack of sleep!).

    Firstly, the website: http://www.f5web.co.uk/wpw/

    Unfortunately in my attempt to make the 2 side columns (#left, #right) stretch with the content column (#content) I've now broken the footer (#foot) always being at the bottom of the content.

    Basically what I need is for the green curves at the side to seperate at the point they meet the sides of the content column, when the content stretches further than 1 window's height, with the bottom parts sticking just above the footer image - creating a fluid layout.

    I originally had #left and #right outside the #content div, with the 3 of them just floated in a row. I then had the lower left curve as the background of #left and the lower right curve as the background of #right. This layout didn't extend the height of #left and #right with #content so the background images wouldn't move down.

    After reading some of the threads and FAQs regarding equal height columns, I rearranged things, and in doing so realised I could have the lower curves as one background image, as the content div is fixed width. My thinking was that if I set this background image for the #content, wrapped #left and #right within it and then floated #head and #maincontent between them, then #content would always be as long as the longest div within it. At first this didn't work as the divs within in it just stuck out.

    I then changed #content to position: absolute - to be honest I'm not really sure why but it sort of worked. The problem then was that the background image was under the footer (http://www.f5web.co.uk/wpw/index2.html).

    Upon extending the text I then discovered the problem with the footer, tried removing position:absolute; but found that didn't help.

    So now I'm tired, and to be honest have lost track of what I've done and am struggling!

    I think if I can get the footer problem sorted, then I just need to set the #content background image to be 94px from the bottom - if that's possible (Apologies for what I've just realised is an extremely long winded way to get to my original question!)

    Can anyone please help?

    Thanks in advance,
    Tino

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi Tinohead, welcome to SitePoint!

    To be honest, I can't follow all that. Could you post in image of the result you want?

  3. #3
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I had a feeling that might be the case!

    This is how is should look with a small amount of content:


    And this is how it should stretch with content:


    Does that help explain it?

  4. #4
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Edit: Sorry this is how it should look with a small amount of content:

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Tinohead View Post
    Does that help explain it?
    Yes, definitely. I'll take a look again and post back in a while.

  6. #6
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks, and thanks for the welcome to the site - I've been a long term visitor, first time poster

    I'm off to bed now but I'll have a look at your response in the morning.

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I just looked through code and I see that you are trying to do a sticky footer layout. The sample images you just posted confirm that too.

    Have a look through the FAQ for info on sticky footers.
    FAQ : How do you put a sticky footer at the bottom of the window?

    When you read through it you will see that the "min-height fast hack" method you are using is not recommended.

    Code:
    #container {
        width: 1024px;
        margin: 0 auto;
        position:relative; /* needed for footer positioning*/
        height:auto !important; /* real browsers */
        height:100%; /* IE6: treaded as min-height*/
        min-height:100%; /* real browsers */
    }
    Most importantly you need to get rid of the absolute positioning on the footer and it should sit outside of the #container div on it's own in the html.

    Have a look at this demo - (View Page Source)
    http://www.pmob.co.uk/temp/sticky-fo...w-no-table.htm

    If all the Opera and IE8 bug fixes are confusing to you it can also be done with a non-semantic dummy float to fix those two browsers.
    http://www.css-lab.com/demos/stickfoot/stickfoot-2.html

    Get that AP off your footer for starters though and clear the floats above.
    When you get it out of the container div you will need to set a width and auto margins just like the container div.
    Code:
    #foot {
        clear:both;
        width: 1024px;
        margin: 0 auto;
        height: 94px;
        background: url(uploads/images/foot.jpg) top left no-repeat #fff;
        /*position: absolute;
        bottom: 0;*/
    }

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Personally, I think I would use just two background images. I would have an outer wrapper and an inner wrapper. On the outer wrapper I would put the whole header as one image (well, the green outer part, as the logo and menu I'd do separately). On the inner wrapper I'd place the whole bottom green part as one whole image.

    Then I'd put a fair bit of padding on the inner wrapper to nest the text nicely inside the images.

    To stop the bottom image overlapping the top imag on very short pages, you could set a min-height.

    Does that make sense?

  9. #9
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi,
    I just looked through code and I see that you are trying to do a sticky footer layout. The sample images you just posted confirm that too.

    Have a look through the FAQ for info on sticky footers.
    FAQ : How do you put a sticky footer at the bottom of the window?

    When you read through it you will see that the "min-height fast hack" method you are using is not recommended.

    Code:
    #container {
        width: 1024px;
        margin: 0 auto;
        position:relative; /* needed for footer positioning*/
        height:auto !important; /* real browsers */
        height:100%; /* IE6: treaded as min-height*/
        min-height:100%; /* real browsers */
    }
    Most importantly you need to get rid of the absolute positioning on the footer and it should sit outside of the #container div on it's own in the html.

    Have a look at this demo - (View Page Source)
    http://www.pmob.co.uk/temp/sticky-fo...w-no-table.htm

    If all the Opera and IE8 bug fixes are confusing to you it can also be done with a non-semantic dummy float to fix those two browsers.
    http://www.css-lab.com/demos/stickfoot/stickfoot-2.html

    Get that AP off your footer for starters though and clear the floats above.
    When you get it out of the container div you will need to set a width and auto margins just like the container div.
    Code:
    #foot {
        clear:both;
        width: 1024px;
        margin: 0 auto;
        height: 94px;
        background: url(uploads/images/foot.jpg) top left no-repeat #fff;
        /*position: absolute;
        bottom: 0;*/
    }
    Ok, I've tried that but unfortunately everything is now all over the place - http://www.f5web.co.uk/wpw/index2.html.

    I've more than likely missed something obvious because it's so late so I'm definitely going to bed now and I'll have another look at it in the morning.

    Thanks for the responses so far

  10. #10
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Personally, I think I would use just two background images. I would have an outer wrapper and an inner wrapper. On the outer wrapper I would put the whole header as one image (well, the green outer part, as the logo and menu I'd do separately). On the inner wrapper I'd place the whole bottom green part as one whole image.

    Then I'd put a fair bit of padding on the inner wrapper to nest the text nicely inside the images.

    To stop the bottom image overlapping the top imag on very short pages, you could set a min-height.

    Does that make sense?
    Sorry Ralph but I can't get my head round what you mean - but that could be the afore mentioned lack of sleep so I'll leave it until the morning.

    Thanks,
    Tino

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Tinohead View Post
    Sorry Ralph but I can't get my head round what you mean
    My suggestion was not based around having a sticky footer, which I didn't think you were asking for. If you are, stick with Ray's suggestions. My way would be much simpler, but may not be what you are looking for.

    Perhaps read my comments again when you aren't so tired, as it's pretty simple. I would have some html like this:

    Code:
    <div id="wrapper-outer">
        <div id="wrapper">
        </div>
    </div>
    On the #wrapper-outer I would have all the green bits at the top as one background image.



    On the #wrapper I would have all the green bits at the bottom as one background image.


  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    My suggestion was not based around having a sticky footer, which I didn't think you were asking for. If you are, stick with Ray's suggestions. My way would be much simpler, but may not be what you are looking for.
    Hi Ralph,
    I agree with your approach and it would be much easier.
    I based my reply on what I saw in Tino's code with the min-height:100% on the container.

    I don't really think a sticky footer will be beneficial here. The reason being is that viewers with larger monitors will be seeing the page stretched apart on pages with minimal content. Viewers with smaller monitors will never even see a sticky footer effect.

    On a smaller monitor you will be getting a scrollbar before you even get it all pieced together.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    I always look for the easy way out, as it's all my little brain can handle. I leave the sticky footers et al. to the smart guys like you.

  14. #14
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, after a bit of sleep that makes a lot more sense, and I can see how it works. So I've started from scratch and put this together http://www.f5web.co.uk/wpw/index3.html

    The bottom half seems to work but the top half isn't showing.

    I've put a green border round #container (aka #wrapper) and a red border round #container-outer (aka #wrapper-outer) to show that the problem seems to be that the content isn't stretching #container-outer, it's just a flat div at the top. I also had this problem initially with #container but by adding 'position:absolute' I fixed it - to be honest the 'position' function is a weak point with me so I've no idea why that worked, or whether it was the right way to fix the problem.

    Any further help greatly appreciated.

    Many thanks,
    Tino

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

    You've set the inner container to have a white background so it rubs out the image in the parent.

    You need to remove the position:absolute and then clear your floats. It also looks like your widths are all out of sync with the images.

    The layout needs a minimum height because you have coloured the white portion as white and it would have been better as transparent so that it doesn't rub the image above out.

    Rolling all the above into an example should roughly look like this.

    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=utf-8" />
    <title>Untitled Document</title>
    <link href="style3.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /* CSS Document */
    
    html, body {
        font-family: "Arial Rounded MT Bold", Verdana, sans-serif;
        font-size: 12px;
        color: #666;
        margin: 0;
        padding: 0;
    }
    #container-outer {
        width: 927px;
        margin: 0 auto;
        background: url(http://www.f5web.co.uk/wpw/uploads/images/topback.jpg) 50&#37; 0 no-repeat #fff;
        /*border: 1px solid #f00;*/
        padding:95px 0 0;
    }
    #container {
        width: 750px;
        margin: 0 0 0 90px;
        background:url(http://www.f5web.co.uk/wpw/uploads/images/bottomback.jpg) bottom center no-repeat;
        /*position: absolute;*/
        padding:0 72px 107px 40px;
        overflow:hidden;/* clear floats*/
        min-height:750px;
    }
    * html #container {
        height:750px;
    }
    #content {
        width: 100%;
        text-align: left;
    }
    #head {
        width: 703px;
        background: url(http://www.f5web.co.uk/wpw/uploads/images/logotrim.jpg) top right no-repeat #fff;
        float: left;
        padding: 0 0 0 47px
    }
    #menu {
        height: 20px;
        margin: 15px 0 0 0;
        padding: 20px 0;
        font-size: 16px;
        color: #009244;
    }
    #maincontent {
        background: url(http://www.f5web.co.uk/wpw/uploads/images/dog.jpg) bottom right no-repeat #fff;
        float: left;
        padding: 15px 0 5px 47px;
        width: 699px;
    }
    #maincontent p {
        width: 400px;
        line-height: 1.4em;
    }
    h1 {
        font-size: 30px;
        font-weight: normal;
        margin: 10px auto 0 auto;
        color: #D7DF20;
    }
    .green {
        color: #0B9344;
    }
    </style>
    </head>
    <body>
    <div id="container-outer">
        <div id="container">
            <div id="content">
                <div id="head"> <img src="http://www.f5web.co.uk/wpw/uploads/images/weblogo.jpg" width="350" height="124" alt="" />
                    <div id="menu"> <img src="http://www.f5web.co.uk/wpw/uploads/images/pawicon.jpg" width="25" height="18" alt="" />home<img src="http://www.f5web.co.uk/wpw/uploads/images/pawicon.jpg" width="25" height="18" alt="" />services<img src="http://www.f5web.co.uk/wpw/uploads/images/pawicon.jpg" width="25" height="18" alt="" />gallery<img src="http://www.f5web.co.uk/wpw/uploads/images/pawicon.jpg" width="25" height="18" alt="" />contact </div>
                    <!--menu-->
                </div>
                <!--head-->
                <div id="maincontent">
                    <h1>Happy trails for waggy tails</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                    <img src="http://www.f5web.co.uk/wpw/uploads/images/piechart.jpg" width="150" height="133" alt="" />
                    <h1 class="green">We can help you get the balance right</h1>
                </div>
                <!--maincontent-->
            </div>
            <!--content-->
        </div>
        <!--container-->
    </div>
    <!--container-outer-->
    </body>
    </html>

  16. #16
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks you Paul - I'm just about there I think!

    I've redone the background images as .png files with the white areas transparent and removed the min-height (am I reading right that the only reason that was included is because the lack of transparency?)

    The only problem now is the gap between the bottom edge of the upper green section, and the top of the drawing of the woman and the dogs. I need to redo the topback.png image with her head and the right hand dog added on, but there shouldn't be any gap there?

    Regards,
    Tino

  17. #17
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Scratch that, problem solved, I noticed you'd added padding to the top of #container-out so I reduced that and made the corner of the logotrim image transparent so as not to cover the rounded edge

    www.f5web.co.uk/wpw/index3.html

  18. #18
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For future reference Paul and so I understand what the problem was (I always prefer that to just being told the solution ), what was causing #container-outer to be flat at the top? Was it overflow:hidden that fixed it? And if so, why?

    Many thanks for your help.

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Tinohead View Post
    removed the min-height (am I reading right that the only reason that was included is because the lack of transparency?)
    No, that's to stop the lower and upper green backgrounds overlapping if there is not enough content to push them apart naturally, so you should keep it there.

  20. #20
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah ok! I've reinstated that, thanks.

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    For the lady/dogs image, I would add position:relative to #head, and then place that image within the head div. I would also use the full image, without the lady's head being cut off. Give the image position:absolute, and place the image in the top right of the #head div, giving it a negative top and right margin. E.g.

    HTML

    Code:
    <div id="head">
        <img class="lady" src="uploads/images/lady.png">
    
    </div>
    CSS

    Code:
    #head {
        position: relative;
    }
    
    img.lady {
        position: absolute;
        top: -20px;
        right: -20px;
    }
    PS Those negative left and right settings of -20px are just guesses. You can play with them till you've got the right position.
    Last edited by ralph.m; Apr 23, 2010 at 04:08. Reason: annoying typos

  22. #22
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've tried that Raplh, it seems to work fine for the dog on the right, but the girl's head is just disappearing behind the green section?

    http://www.f5web.co.uk/wpw/index3.html

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

    The girls is being cut off because of the overflow:hidden I added to clear the floats. When you need visible overflow you will need to use another clearing method so try this.

    Code:
    #container {
        width: 750px;
        margin: 0 0 0 90px;
        background:url(http://www.f5web.co.uk/wpw/uploads/images/bottomback.png) bottom center no-repeat;
        padding:0 72px 107px 40px;
        /* overflow:hidden;remove*/
        min-height:570px;
    }
    * html #container {height:570px;}
    #container:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    #container {display:inline-block;}
    /* mac hide \*/
    * html #container {height: 1&#37;;}
    #container {display: block;}
    /* End hide */

  24. #24
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, that works now - although I don't really understand why?

    I've never seen :after used before, nor the content:"." - can you explain what they are doing, or point me in the direction of somewhere I could read up on it?

    Many thanks for the continued help

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Tinohead View Post
    Thanks Paul, that works now - although I don't really understand why?

    I've never seen :after used before, nor the content:"." - can you explain what they are doing, or point me in the direction of somewhere I could read up on it?
    That code Paul posted—

    Code:
    #container:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    #container {display:inline-block;}
    /* mac hide \*/
    * html #container {height: 1%;}
    #container {display: block;}
    /* End hide */
    is a variation of what is commonly know as the "clearfix" method of getting containers to wrap around floated contents.


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
  •