15 Replies Latest reply: May 6, 2013 11:30 PM by onefiftymph RSS

    CSS background & border graphic confusion

    onefiftymph Community Member

      I'm helping this lady with a few things on her site but don't know how to fix the purple gradient background (http://mabelspralines.com/images/subBGProd.png) to show behind the Products table (table BG stays white) here

       

      http://mabelspralines.com/_productsFINAL.html   new

       

      to look like it does here:

       

      http://mabelspralines.com/products.html     previous

       

      CSS: http://mabelspralines.com/styles/global.css

       

      Also the original site had this gold shaded border not just at the top like it is now, but down the sides of the content div and the bottom as part of the footer. Here are the images:

       

      http://mabelspralines.com/images/vertbg.jpg

      http://mabelspralines.com/images/bottbg.jpg

       

      I tried a few things, but can't seem to make it display like the original designer intended - one wrong CSS adjustment and the whole thing goes haywire.

       

      Also, why is there a 1/2" space above the header on each page?

       

      Thanks for pointing me in the right direction!

        • 1. Re: CSS background & border graphic confusion
          Ben Pleysier CommunityMVP
          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>Untitled Document</title>
          <style>
          html {
              background: #FAF1C6;
              height: 100%;
          }
          body {
              width: 800px;
              margin: auto;
          }
          .heading {
              background: url(http://mabelspralines.com/images/bannerv3.png);
              height: 90px;
          }
          .nav {
              background: url(http://mabelspralines.com/images/topbg.jpg) no-repeat;
              height: 65px;
              text-align: center;
          }
          .content-wrapper {
              background: url(http://mabelspralines.com/images/vertbg.jpg) repeat-y;
              overflow: hidden;
              position: relative;
              min-height: 300px;
          }
          .article {
              background: #FFF url(http://mabelspralines.com/images/subBGProd.png) no-repeat;
              width: 759px;
              left: 6px;
              padding: 15px;
              position: absolute;
              min-height: 250px;
          }
          .footer {
              background: url(http://mabelspralines.com/images/bottbg.jpg) no-repeat;
              height: 40px;
              padding: 15px;
          }
          </style>
          </head>
          
          <body>
          <div class="heading"></div>
          <div class="nav">Menu goes here</div>
          <div class="content-wrapper">
            <div class="article"><h2>Article</h2></div>
          </div>
          <div class="footer">Footer</div>
          </body>
          </html>
          
          • 2. Re: CSS background & border graphic confusion
            onefiftymph Community Member

            Thanks Ben. This looks how it should've been done to start with. I'll keep this for a simple start to my next ground-up project.

             

            Your answer requires me to completely rebuild the site, which is functioning ok except for a couple of tweaks I asked about. I messed with it some:

             

            http://mabelspralines.com/_testtoss.html

            http://mabelspralines.com/styles/global1.css

             

            pulling your CSS from the .html into a new .css file and linking it to a new .html page, but right at the very beginning, stuff drops out - like the text below the bottom nav, which DW shows as being Class: TwoColFixLftHdr - but there is no "Text" category in that part of the style sheet.

             

            So right away, I need to start sleuthing and experimenting. The problem is, why I wrote to start with, I don't know CSS and div construction well enough. I learn a little more each time when I get projects once or twice a year, but it doesn't come natural for me. I'm not left-brained at all so it's extremely frustrating trying to figure out what "." is missing or CSS characteristic that's throwing off the layout. I'm not a web designer who's compelled to be a CSS expert. Rebuilding with your answer would take me at least half/probably a full day to rebuild, tweak and troubleshoot all the CSS in the containers and panels and graphics on this site's pages.

             

            But I appreciate your taking the time to try to help me.

            • 3. Re: CSS background & border graphic confusion
              Ben Pleysier CommunityMVP

              I try to keep things simple.

               

              Take the footer for instance. At the moment you have

              <div class="footer">

                   <ul class="list" id="ftnav">

                        <li class="list"><a href="index.html">home</a> |</li>

                        <li class="list"><a href="about.html">about</a> |</li>

                        <li class="list"><a href="products.html">products</a> |</li>

                        <li class="list"><a href="events.html">events</a> |</li>

                        <li class="list"><a href="testimonials.html">testimonials</a> |</li>

                        <li class="list"><a href="contact.html">contact </a></li>

                   </ul>

                   <p>&copy; 2009 Mabel's Gourmet Pralines. All rights reserved. Site by SOF Designs</p>       

              </div>

              The above should look like

              <div class="footer">

                   <ul>

                       <li><a href="index.html">home</a> |</li>

                       <li><a href="about.html">about</a> |</li>

                       <li><a href="products.html">products</a> |</li>

                       <li><a href="events.html">events</a> |</li>

                       <li><a href="testimonials.html">testimonials</a> |</li>

                       <l><a href="contact.html">contact </a></li>

                   </ul>

                   <p>&copy; 2009 Mabel's Gourmet Pralines. All rights reserved. Site by SOF Designs</p>       

              </div>

              This reduces the number of keystrokes during development and makes it a lot easier to read. Also a CLASS does everything that an ID does with the exception of uniqueness. Hence I always use a CLASS except where an ID is required for exact identification. The latter is often used in JS and DOM manipulation.

               

              The style rules for the proposed footer looks like

              .footer {

                  background: url(http://mabelspralines.com/images/bottbg.jpg) no-repeat;

                  height: 40px;

                  padding: 15px;

              }

              .footer ul {

                  font-family: Arial, Helvetica, sans-serif;

                  font-size: 12px;

                  padding: 0px;

                  list-style-type: none;

                  margin-left: 238px;

                  margin-top: 0px;

                  margin-right: 0px;

                  margin-bottom: 0px;

              }

              .footer li {

                  display: inline;

              }

              When using images as in

              <img src="http://mabelspralines.com/images/home1.jpg" alt="Home" width="82" height="25" border="0" id="home_bt" />

              The red coloured part should be included in the CSS, again reducing keystrokes and making it easier to change the values. But why use (different) images for the menu buttons. If you cannot find a CSS alternative you can use the same image for the menu buttons and use text for the label. This has an added advantage in that your anchor elements are not empty which is frowned upon. Instead of using mouse events, use CSS to replace the image as in

              a

              a:hover

              a:focus

              At this stage I will not give you examples for a better functioning menu, I shall leave it up to you to find out. If you run into trouble, please come back here.

               

              Have a look at what Nancy does with CSS menu's http://alt-web.com/DEMOS/demos.shtml

              • 4. Re: CSS background & border graphic confusion
                onefiftymph Community Member

                thanks Ben. i took out the extra CSS I'd tried and put in your latest css but the copyright type at the bottom is still unformatted and out of position. I even typed your code letter by letter to try to understand it the first time, but that didn't help so I copy/pasted it. Obviously I'm missing something...

                 

                http://mabelspralines.com/_testtoss.html

                http://mabelspralines.com/styles/global1.css

                 

                I also tried experimenting with Nancy's Solid-colored CSS List Menu, like you suggested, trying to get it to look like the small purple-on-yellow buttons the previous designer has on the site. After half an hour, it was all i could do just to get the font to Helvetica and take her default background color out. Nothing i do changes the font size or the container size to make the buttons smaller. This is typical of my experience with CSS - countless hours of torture I'm forced to deal with since its arrival. I actually enjoyed building sites back before CSS when I could be a designer rather than a coder. But I understand how helpful it is for people who use it day in/out and know it intimately <sigh>

                 

                thanks for helping me!

                Larry

                • 5. Re: CSS background & border graphic confusion
                  Nancy O. CommunityMVP

                  View source in browser to see the code:

                  http://alt-web.com/sandbox/Mabels.html

                   

                   

                   

                  Nancy O.

                  • 6. Re: CSS background & border graphic confusion
                    onefiftymph Community Member

                    Wow great! Thanks for doing that Nancy - you make it look embarassingly easy as usual.

                     

                    What's all this do?:

                    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHR....  etc etc

                     

                    Hope you're not affected by the fires over there.

                    • 7. Re: CSS background & border graphic confusion
                      Nancy O. CommunityMVP

                      We had a lot of smoke and ash from the recent Camarillo Springs fires.  But thankfully that's under control now.  Today, it's chilly and damp ~ feels like it might rain soon. 

                       

                       

                      Nancy O.

                      • 8. Re: CSS background & border graphic confusion
                        Nancy O. CommunityMVP

                        The CSS background-gradient code contains SVG images for newer IE browsers and filters for older ones.

                         

                         

                        Nancy O.

                        • 9. Re: CSS background & border graphic confusion
                          onefiftymph Community Member

                          The weather change is sure a lucky break.

                           

                          So, if I can mix together your tags http://mabelspralines.com/_test2.html with Ben's graphics fix http://mabelspralines.com/_testtoss.html, I should be close to an up-to-date base template for this site.

                           

                          ( body, .nav vs. nav, .footer vs. footer) Except for body, guess I can have both, its just a personal choice?

                           

                          http://mabelspralines.com/styles/global1.css

                          • 10. Re: CSS background & border graphic confusion
                            Nancy O. CommunityMVP

                            If you use HTML5 doc type, you don't need classes for HTML5 tags.

                             

                            body

                            header

                            footer

                            nav

                            section

                            article

                            aside

                             

                            If you use HTML4 or XHTML doc types, you need to use div .classes or #IDs.

                             

                             

                            Nancy O.

                            • 11. Re: CSS background & border graphic confusion
                              onefiftymph Community Member

                              Thanks! Soon as I put this logo image line

                               

                              <a href="index.html"><img src="images/logo.png" width="152" height="90" border="0" alt="Mabel's Pralines"/></a>  

                               

                              in the header, everything below shifts down an entire inch. Thats crazy, I don't get it...

                               

                              http://mabelspralines.com/_test2.html

                              • 12. Re: CSS background & border graphic confusion
                                Nancy O. CommunityMVP

                                Use your graphics editor & incorporate that logo into your banner image which is in the <header> background.  Problem solved.

                                 

                                 

                                Nancy O.

                                • 14. Re: CSS background & border graphic confusion
                                  osgood_ CommunityMVP

                                  onefiftymph wrote:

                                   

                                  Thanks! Soon as I put this logo image line

                                   

                                  <a href="index.html"><img src="images/logo.png" width="152" height="90" border="0" alt="Mabel's Pralines"/></a>  

                                   

                                  in the header, everything below shifts down an entire inch. Thats crazy, I don't get it...

                                   

                                  http://mabelspralines.com/_test2.html

                                   

                                  That's because you have block level elements -  h1 h2 and address off screen. I guess for search engine purposes? If you add display: none; (as below to the css) then you won't get that gap. Search engines will still read it though.

                                   

                                   

                                  /**Move header text off screen**/

                                  header h1, header h2, header address {

                                  margin: 0;

                                  padding: 0;

                                  text-indent: -99999em;

                                  display: none;

                                  }

                                  • 15. Re: CSS background & border graphic confusion
                                    onefiftymph Community Member

                                    thanks osgood. tried adding the display: none; tag but it didn't work for me. so I took out the h1, h2, address text Nancy put in there - http://mabelspralines.com/images/_headertext.png - didn't realize it was even there, shifting everything down. Getting rid of it solved the problem, not putting the logo into the banner image - but that was good to do anyway. I know it would be good for SEO to have that h1-h2 hidden up there, and I'm guessing it can done without messing up the layout. But I'm trying to keep it simple so I can understand things. The CSS buttons are brilliant though.

                                     

                                    I'm having no luck mixing my most current attempt at a base template http://mabelspralines.com/_testtoss.html , http://mabelspralines.com/styles/global1.css  with Ben's effort to answer my original questions - http://mabelspralines.com/_fromBen.html. The style sheet is a mix of Ben & Nancy's with a couple of things i tried.

                                     

                                    What would the structure of the gold-bordered content frame be? A bunch of nested div's? I can't get the purple gradient back where it belongs. It kept shifting left, over top of the gold frame. Now I don't know where it went. The yellow at bottom -how to keep it and the footer text within the gold border? How to center the copyright text?

                                     

                                    thanks anyone, for helping. im just trying to learn - i dont have to fix this for this client