SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Repeating image problem

    I have done a css based site for the following domain using a template I found:
    http://www.jonathanfawcett.com/

    This has a repeating image on both the left and the right. However if the page is short - see http://www.jonathanfawcett.com/contact.html

    The left hand image doesn't repeat to the end of the page. Here is the css:

    Code:
    */
    
    /* Has the background image for the diagonal stripes on the right. */
    
    html {
    background-image: url(images/right_side.gif);
    background-repeat: repeat-y;
    background-position: top right;
    }
    
    /* Has the background image for the diagonal stripes on the left. */
    
    body {
    margin: 0;
    font-family: verdana, arial, helvetica, sans-serif;
    background-image: url(images/left_side.gif);
    background-repeat: repeat-y;
    color: #000000;
    }
    
    /* Banner across top of page that says the name of the whole site */
    
    #main-title {
    margin-bottom: 0;
    margin-left: 110px;
    margin-right: 110px;
    font-size: .7em;
    letter-spacing: 5px;
    text-align: right;
    margin-top: 0;
    padding-bottom: 8px;
    font-weight: bold;
    padding-top: 8px;
    padding-right: 50px;
    background-color: #265057;
    color: #ffffff;
    border-top: 1px #000000 solid;
    border-bottom: 1px #000000 solid;
    }
    
    /* To create the main image near the top of the page. */
    
    #header-image {
    background-color: #336a74;
    background-image: url(images/header_image.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    height: 177px;
    border-top: 2px #ff4700 solid;
    border-bottom: 2px #ff4700 solid;
    margin-left: 110px;
    margin-right: 110px;
    }
    
    /* For the main navigation bar for the site. */
    
    #navbar {
    margin-bottom: 0;
    margin-left: 110px;
    margin-right: 110px;
    font-size: .65em;
    text-align: center;
    margin-top: 0;
    padding-bottom: 8px;
    font-weight: bold;
    padding-top: 8px;
    background-color: #265057;
    color: #ffffff;
    word-spacing: 8px;
    border-bottom: 2px #ff4700 solid;
    }
    
    #navbar a:link, #navbar a:visited {
    color: #ffffff;
    word-spacing: none;
    }
    
    #navbar a.current {
    color: #ff4700;
    }
    
    #navbar a:hover {
    color: #ff4700;
    text-decoration: underline;
    }
    
    /* For the pullquote or other text directly under the navigation bar. */
    
    #headline {
    font-size: .65em;
    padding-top: 30px;
    text-align: justify;
    background-color: #e1ecee;
    padding-left: 100px;
    padding-right: 100px;
    margin-left: 110px;
    margin-right: 110px;
    margin-bottom: 0;
    line-height: 1.5em;}
    
    /* For the byline on the pullquote. */
    
    p.byline {
    text-align: right;
    margin-bottom: 0;
    }
    
    h1 {
    margin-left: 110px;
    margin-right: 110px;
    font-size: .8em;
    padding-bottom: 3px;
    padding-top: 23px;
    padding-left: 50px;
    padding-right: 0;
    color: #000000;
    border-bottom: 1px #ff4700 solid;
    letter-spacing: 5px;
    font-weight: normal;
    background-color: #e1ecee;
    margin-top: 0;
    margin-bottom: 0;
    }
    
    /* Contains all the main body of text on the page, including the h2 elements. */
    
    #main-text {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 110px;
    margin-right: 110px;
    font-size: .7em;
    line-height: 1.8em;
    background-color: #e1ecee;
    }
    
    #main-text p {
    text-align: justify;
    margin-left: 50px;
    margin-right: 50px;
    }
    
    h2 {
    padding-bottom: 3px;
    padding-right: 0;
    color: #000000;
    border-bottom: 1px #000000 solid;
    letter-spacing: 5px;
    font-weight: normal;
    margin-left: 50px;
    margin-right: 50px;
    font-size: 1em;
    margin-top: 0;
    padding-top: 10px;
    }
    
    p, ul, ol, table {
    margin-top: 17px;
    margin-bottom: 0;
    }
    
    ol, ul {
    margin-left: 75px;
    margin-right: 75px;
    }
    
    a:link, a:visited {
    text-decoration: none;
    font-weight: bold;
    color: #ff4700;
    }
    
    a:hover {
    text-decoration: underline;
    }
    
    /* Styles for the footer at the bottom of the page */
    
    #footer {
    text-align: center;
    margin-bottom: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: .65em;
    margin-top: 20px;
    padding-right: 50px;
    background-color: #ff4c00;
    color: #ffffff;
    font-weight: bold;
    border-top: 1px #000000 solid;
    border-bottom: 1px #000000 solid;
    }
    
    #footer a:link, #footer a:visited {
    color: #ffffff;
    text-decoration: none;
    }
    
    #footer a:hover {
    text-decoration: underline;
    color: #ffffff;
    }
    Can anyone help me fix this?

  2. #2
    SitePoint Member jatkinson10's Avatar
    Join Date
    Jun 2005
    Location
    USA
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are a couple things you can do. One, give the body selector a height of 100% this may or may not work. The other is to switch the design to make the footer area the end.
    Strive for more!
    SIGNS. PRINT. WEB.

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using the Body height at 100% didn't work.

    Could you expand a bit on what you mean about switching the design?

    Thanks

    Mark

  4. #4
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is your site down ? The page won't loadup...

  5. #5
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, site is ok this morning.

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

    Try this:

    Code:
    html{height:100%}
    body{min-height:100%}
    * html body{height:100%}

  7. #7
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, that worked a treat.

    Cheers

    Mark


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
  •