1 Reply Latest reply: Dec 2, 2011 10:18 AM by SnakEyez02 RSS

    I'm experiencing 2 issues with a site I'm working on that I can't figure out...

    spdorsey6969 Community Member

      I'm developing a site for a local 5-star restaurant, and I'm almost done with the development. Unfortunately, I'm a lot better at design then coding, and I have a couple of problems that I have not found solutions to.

      If you have a few minutes, I'd love some advice on how to fix these. They are confusing me a lot...

      1) My pages have a footer that attached to the bottom of the content of the page. On pages that end with tables, there's space between the content and the footer. On pages without tables, it looks fine. Examples:

      Broken:

      [1] http://www.dorseygraphics.com/review/wclg/site_05/winelist.html

      Not broken:

      [2] http://www.dorseygraphics.com/review/wclg/site_05/contact.html

      2) My background image contains some complex elements that overlap (like vines overlapping the content area just a bit on either side). the client LOVES this, so it's not an option to remove. My background is currently a large PNG that easily takes care of the overlapping issue with a simple BG image. But it runs out at the bottom of the page, and some of the pages have content that it too tall for the background.

      Example:

      [3] http://www.dorseygraphics.com/review/wclg/site_05/reviews.html

      How would you go about solving this problem? I'm thinking the easiest way is to add a new containing DIV and use it to extend the content area down, but that would mess up the header (I think). I'm confused.

       

        • 1. Re: I'm experiencing 2 issues with a site I'm working on that I can't figure out...
          SnakEyez02 CommunityMVP

          1) My pages have a footer that attached to the bottom of the content of the page. On pages that end with tables, there's space between the content and the footer. On pages without tables, it looks fine. Examples:

          Broken:

          [1] http://www.dorseygraphics.com/review/wclg/site_05/winelist.html

          Not broken:

          [2] http://www.dorseygraphics.com/review/wclg/site_05/contact.html

           

          The problem here is the background image.  Do you have the image without the beige background in the center?  If so what you need to do is leave the background of the body as the URL to the image (without the beige in the center), no-repeat, and leave the color as you have.  Then move the lighter beige color background to the container with the navigation and content.

           

          2) My background image contains some complex elements that overlap (like vines overlapping the content area just a bit on either side). the client LOVES this, so it's not an option to remove. My background is currently a large PNG that easily takes care of the overlapping issue with a simple BG image. But it runs out at the bottom of the page, and some of the pages have content that it too tall for the background.

          Example:

          [3] http://www.dorseygraphics.com/review/wclg/site_05/reviews.html

          How would you go about solving this problem? I'm thinking the easiest way is to add a new containing DIV and use it to extend the content area down, but that would mess up the header (I think). I'm confused.

           

          If you look at my above answer I don't think this is a huge problem.  In CSS3 (Safari, Firefox, Chrome, IE9) you can have multiple background images, one static and one repeating in your case.  However, older browsers will not see this, most notably IE 8 and earlier.  You could put the initial image in one layer and make the body background a repeating image but you run the risk of the layers not aligning. 

           

          Another alternative is to set the max-height of the content container and then set the overflow attribute to scroll in the CSS (overflow: scroll;).  That would make the content container scroll independantly from the page.

           

          A final alternative would be to discuss the pages with the client again.  For instance with the wine list there are different types of wines.  You could have nested tabbed panels, or you could make a page for each wine type sparkling/white, red, etc. and then have tabbed panels underneath to make the lists shorter.  Otherwise the "Significant Others" or "Riesling" get lost at the bottom of the page, regardless of your background, and users do not know those wines are offered.