www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 20

Thread: [RESOLVED] CSS help please

  1. #1
    Join Date
    Feb 2007
    Posts
    133

    resolved [RESOLVED] CSS help please

    Hi there

    I am pretty knowledgable with CSS but I cant seem to figure out the best way to do this. See file attached.

    This is the template i have designed. I know how to create the top part to repeat (x) etc and make it work (with the purple fade in part).. but the bottom part where the purple block fades in and goes all the way to edges of page - i dont know how to do that. Can anyone assist? I want both top and bottom to extend to edge of person's browser window. the middle part must be able to be extended height-ways depending on amount of text. i.e. i dont want the middle part to be fixed height.

    Cheers, Leigh
    Attached Images Attached Images

  2. #2
    Join Date
    Mar 2011
    Posts
    1,148
    My approach would be to center the background gradient image and set the background color to match the edge color of the background image. Whether the background is for the <body> or for header and footer <div>s depends on your overall design, and doesn't matter very much as long as they extend to the width of the browser. Good luck!

  3. #3
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    273
    My approach would be to center the background gradient image and set the background color to match the edge color of the background image.
    I agree with that. The rest could look as follows:

    HTML 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>
        <title>Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body { 
        margin: 0;
        padding: 0;
        background: #999 url(path-to-image.gif) repeat-y center top; 
        text-align: center;
        font: normal 1em Arial;
        }
    p, h1 { 
        margin-top: 0; /* prevents browser differences */
        }
    #headerContainer { 
        height: 200px;
        }
    #contentContainer { 
        position: absolute; 
        left: 0;
        right: 0;
        top: 200px;
        bottom: 50px;
        background: #fff; /* overrides earlier backgrounds */
        }
    #contentDiv { 
        width: 970px;
        border-bottom: 1px solid black; /* to show its contours */
        margin: 0 auto;
        overflow: auto;
        }    
    #footerContainer { 
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50px;
        }     
    </style>
    </head>
    <body>
        <div id="headerContainer">
            <h1>Dr. Milton Raff</h1>
            <p>Pain Management Clinic</p>
        </div>
        <div id="contentContainer">
            <div id="contentDiv">
                <p>Content text goes here</p>
            </div>
        </div>
        <div id="footerContainer">
            <p>Footer text</p>
        </div>
    </body>
    </html>
    It is based on the principle that absolutely positioned elements are relative to the parent element if that has position, and to the body if there is no such element with position. One can fill out the vertical space this way and still have a header and footer with fixed heights. Do note that IE6 doesn't know absolute positioning this way. So include a javascript alert that warns IE6 users that they should use a modern browser.
    Last edited by Frank62; 08-13-2011 at 11:50 AM.

  4. #4
    Join Date
    Feb 2007
    Posts
    133
    Thank you very much! that was very helpful and it worked!

  5. #5
    Join Date
    Feb 2007
    Posts
    133
    http://www.leighdesignstudio.com/milton/

    Question - I have implented it here, but on the home page for eg - the bottom part (the gradient doesnt display. I would like the bottom part to display on all pages - at least a minimun height. how can I do this?

  6. #6
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    273
    I have implented it here
    You have implemented it where? I surfed over your site, but don't see it anywhere?

  7. #7
    Join Date
    Feb 2007
    Posts
    133

  8. #8
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    273
    That page has a headerContainer and contentContainer, but no footerContainer. See here: http://prntscr.com/2nd53. Also, the contentContainer keeps going, whereas mine stopped at 50px above the bottom of the browser window. (I should have added overflow: scroll to accommodate for the too long content.) That 50px is later filled up by the fixed footerContainer in my code.
    Last edited by Frank62; 08-15-2011 at 06:47 AM.

  9. #9
    Join Date
    Feb 2007
    Posts
    133
    Thank you... that has worked... but there is another way i would prefer it to work - as now - if you go to my contact page - that method doesnt work. The gradient at the bottom - should fit as high up as when the content area ends - now there is a gap.

    another way - if possible? is that it works like before - but when you scroll to the bottom - there is always some gradient displaying? hope im making sense. I am open to suggestions.

  10. #10
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    273
    The gradient at the bottom - should fit as high up as when the content area ends - now there is a gap.
    Just give the contentDiv a height that makes it extend down far enough. And you should add overflow-y:hidden to the body, to make the default scrollbar disappear in IE.

  11. #11
    Join Date
    Feb 2007
    Posts
    133
    Yes, but that would not work for everyone's screen? then it might show scrollbar when it doenst have to.

  12. #12
    Join Date
    Feb 2007
    Posts
    133
    also when i added a height to contentDiv - the other pages went all funny.

  13. #13
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    273
    Yes, but that would not work for everyone's screen? then it might show scrollbar when it doenst have to.
    You will have to accept that, because that cannot be changed with the gradient background of the contentDiv. And visitors won't mind.

    also when i added a height to contentDiv - the other pages went all funny.
    I forgot about the other pages. Just change height to min-height.

  14. #14
    Join Date
    Feb 2007
    Posts
    133
    Thanks ;-)

  15. #15
    Join Date
    Feb 2007
    Posts
    133
    Hi again, this method is giving me some problems with links.

    http://specialistpainclinic.co.za/staging/index.php

    If you look at the home page - that read more button doesn't work. Also on the treatments page, the last back to top link (at the bottom) doesn't work either... any ideas why?
    Leigh

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles