CSS Sprite Issue

  • twalters84
  • Graduate
  • Graduate
  • twalters84
  • Posts: 161
  • Loc: Mount Savage, MD

Post 3+ Months Ago

Greetings,

I am trying to improve performance on my website by minimizing HTTP requests.

I have a zapatec menu (zpmenu) that has an image for each menu item. Each one of these images
is currently an HTTP request. I would like to use a CSS Sprite for the 16x16 menu icons. Instead
of making one HTTP request for each icon, it would just make one HTTP request for the sprite.

The following is the CSS Sprite I made:
Attachments:
menuIcons.png


The Zapatec menu has themes which they take the CSS and manipulate it with javascript to
create the menu. I am uploading the theme CSS here:
Attachments:
zpmenu.ace

(63.01 KiB) Downloaded 215 times



Code: [ Select ]

In the menu, I have HTML like this:

<li>
 <img src="/img/menu/backlink.png" alt="My IMG Title" height="16" width="16" />
 <a href="/index.cfm">my webpage</a>
</li>

I have tried doing this:

<li>
 <img class="sprite iconPhotos" alt="My IMG Title" height="16" width="16" />
 <a href="/index.cfm">my webpage</a>
</li>

However, no photo will ever appear.
  1. In the menu, I have HTML like this:
  2. <li>
  3.  <img src="/img/menu/backlink.png" alt="My IMG Title" height="16" width="16" />
  4.  <a href="/index.cfm">my webpage</a>
  5. </li>
  6. I have tried doing this:
  7. <li>
  8.  <img class="sprite iconPhotos" alt="My IMG Title" height="16" width="16" />
  9.  <a href="/index.cfm">my webpage</a>
  10. </li>
  11. However, no photo will ever appear.


There is a line of code in the barblue.css file that has to do with the icons:

Code: [ Select ]

.zpMenuBarblue .zpMenuContainer .zpMenuContainer .icon
{
  padding-left: 5px;
  padding-right: 10px;
}

I know if you place the following in that class:

background: url(../../../img/menu/menuIcons.png) 0 0 no-repeat;

the entire sprite shows up for every menu icon. However, I need
it so the correct 16x16 icon shows up for the corresponding
menu item.
  1. .zpMenuBarblue .zpMenuContainer .zpMenuContainer .icon
  2. {
  3.   padding-left: 5px;
  4.   padding-right: 10px;
  5. }
  6. I know if you place the following in that class:
  7. background: url(../../../img/menu/menuIcons.png) 0 0 no-repeat;
  8. the entire sprite shows up for every menu icon. However, I need
  9. it so the correct 16x16 icon shows up for the corresponding
  10. menu item.


I am willing to pay $10.00 US to the first person that posts a solution
to this problem in this thread. Only the post that has a working solution
will get paid and the poster must have a PayPal account to get the money.

If you need the website URL, please PM me or contact me through one of
the websites in my signature. I may not be available until 10:30 PM EST
today but I am working on this website all day Thursday and should be
available.

Thank you in advance for those willing to look into this problem.

Sincerely,
Travis Walters
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9086
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I think if you put the sprite icons in a vertical format like I have attached to this post it would be much easier to accomplish as shown here:

Attachments:
menuIcons_vertical.png


I just tested it with this code and it seems to work okay:

HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sprite Test</title>
 
<style type="text/css">
ul {
   list-style-type:none;
   margin:0;
   padding:0;
}
 
ul li
{
   margin:20px 0;
   padding-left:20px;
   background: url(menuIcons_vertical.png) no-repeat top left;
   line-height:16px;
}
 
.sprite_01 { background-position: 0 0; }
.sprite_02 { background-position: 0 -17px; }
.sprite_03 { background-position: 0 -34px; }
.sprite_04 { background-position: 0 -51px; }
.sprite_05 { background-position: 0 -68px; }
.sprite_06 { background-position: 0 -85px; }
.sprite_07 { background-position: 0 -102px; }
.sprite_08 { background-position: 0 -119px; }
.sprite_09 { background-position: 0 -135px; }
.sprite_10 { background-position: 0 -152px; }
.sprite_11 { background-position: 0 -170px; }
.sprite_12 { background-position: 0 -187px; }
.sprite_13 { background-position: 0 -204px; }
.sprite_14 { background-position: 0 -221px; }
.sprite_15 { background-position: 0 -238px; }
.sprite_16 { background-position: 0 -255px; }
.sprite_17 { background-position: 0 -272px; }
.sprite_18 { background-position: 0 -289px; }
.sprite_19 { background-position: 0 -306px; }
.sprite_20 { background-position: 0 -323px; }
.sprite_21 { background-position: 0 -340px; }
 
</style>
</head>
 
<body>
<ul>
<li class="sprite_01"><a href="link.html">Link</a></li>
<li class="sprite_02"><a href="link.html">Link</a></li>
<li class="sprite_03"><a href="link.html">Link</a></li>
<li class="sprite_04"><a href="link.html">Link</a></li>
<li class="sprite_05"><a href="link.html">Link</a></li>
<li class="sprite_06"><a href="link.html">Link</a></li>
<li class="sprite_07"><a href="link.html">Link</a></li>
<li class="sprite_08"><a href="link.html">Link</a></li>
<li class="sprite_09"><a href="link.html">Link</a></li>
<li class="sprite_10"><a href="link.html">Link</a></li>
<li class="sprite_11"><a href="link.html">Link</a></li>
<li class="sprite_12"><a href="link.html">Link</a></li>
<li class="sprite_13"><a href="link.html">Link</a></li>
<li class="sprite_14"><a href="link.html">Link</a></li>
<li class="sprite_15"><a href="link.html">Link</a></li>
<li class="sprite_16"><a href="link.html">Link</a></li>
<li class="sprite_17"><a href="link.html">Link</a></li>
<li class="sprite_18"><a href="link.html">Link</a></li>
<li class="sprite_19"><a href="link.html">Link</a></li>
<li class="sprite_20"><a href="link.html">Link</a></li>
<li class="sprite_21"><a href="link.html">Link</a></li>
</ul>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Sprite Test</title>
  5.  
  6. <style type="text/css">
  7. ul {
  8.    list-style-type:none;
  9.    margin:0;
  10.    padding:0;
  11. }
  12.  
  13. ul li
  14. {
  15.    margin:20px 0;
  16.    padding-left:20px;
  17.    background: url(menuIcons_vertical.png) no-repeat top left;
  18.    line-height:16px;
  19. }
  20.  
  21. .sprite_01 { background-position: 0 0; }
  22. .sprite_02 { background-position: 0 -17px; }
  23. .sprite_03 { background-position: 0 -34px; }
  24. .sprite_04 { background-position: 0 -51px; }
  25. .sprite_05 { background-position: 0 -68px; }
  26. .sprite_06 { background-position: 0 -85px; }
  27. .sprite_07 { background-position: 0 -102px; }
  28. .sprite_08 { background-position: 0 -119px; }
  29. .sprite_09 { background-position: 0 -135px; }
  30. .sprite_10 { background-position: 0 -152px; }
  31. .sprite_11 { background-position: 0 -170px; }
  32. .sprite_12 { background-position: 0 -187px; }
  33. .sprite_13 { background-position: 0 -204px; }
  34. .sprite_14 { background-position: 0 -221px; }
  35. .sprite_15 { background-position: 0 -238px; }
  36. .sprite_16 { background-position: 0 -255px; }
  37. .sprite_17 { background-position: 0 -272px; }
  38. .sprite_18 { background-position: 0 -289px; }
  39. .sprite_19 { background-position: 0 -306px; }
  40. .sprite_20 { background-position: 0 -323px; }
  41. .sprite_21 { background-position: 0 -340px; }
  42.  
  43. </style>
  44. </head>
  45.  
  46. <body>
  47. <ul>
  48. <li class="sprite_01"><a href="link.html">Link</a></li>
  49. <li class="sprite_02"><a href="link.html">Link</a></li>
  50. <li class="sprite_03"><a href="link.html">Link</a></li>
  51. <li class="sprite_04"><a href="link.html">Link</a></li>
  52. <li class="sprite_05"><a href="link.html">Link</a></li>
  53. <li class="sprite_06"><a href="link.html">Link</a></li>
  54. <li class="sprite_07"><a href="link.html">Link</a></li>
  55. <li class="sprite_08"><a href="link.html">Link</a></li>
  56. <li class="sprite_09"><a href="link.html">Link</a></li>
  57. <li class="sprite_10"><a href="link.html">Link</a></li>
  58. <li class="sprite_11"><a href="link.html">Link</a></li>
  59. <li class="sprite_12"><a href="link.html">Link</a></li>
  60. <li class="sprite_13"><a href="link.html">Link</a></li>
  61. <li class="sprite_14"><a href="link.html">Link</a></li>
  62. <li class="sprite_15"><a href="link.html">Link</a></li>
  63. <li class="sprite_16"><a href="link.html">Link</a></li>
  64. <li class="sprite_17"><a href="link.html">Link</a></li>
  65. <li class="sprite_18"><a href="link.html">Link</a></li>
  66. <li class="sprite_19"><a href="link.html">Link</a></li>
  67. <li class="sprite_20"><a href="link.html">Link</a></li>
  68. <li class="sprite_21"><a href="link.html">Link</a></li>
  69. </ul>
  70. </body>
  71. </html>


You can see the result here:

examples/sprite_test/

Hopefully I understood your problem correctly. Let me know if that helps!
  • twalters84
  • Graduate
  • Graduate
  • twalters84
  • Posts: 161
  • Loc: Mount Savage, MD

Post 3+ Months Ago

Hey there,

I never expected the admin on the site to work on this problem.

Thanks for looking this problem over. Getting the sprite to work with ordinary HTML code was not the issue however. I need the sprite to work with the zapatec javascript menu known as zpmenu.

I will post a better example for those willing to help.

HTML Code Below:

Code: [ Select ]

<!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>

<meta name="Description" content="" />
<meta name="Keywords" content="" />
<meta name="title" content="" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Travis Walters" />
<meta name="Copyright" content="2007-2009" />
<meta name="robots" content="NOODP, INDEX, FOLLOW" />

<title>My Title</title>

<link rel="icon" type="image/gif" href="img/gif/favicon.gif" />
<link rel="stylesheet" type="text/css" href="inc/style.css" media="all" />

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="inc/ieBugs.css" media="all" />
<![endif]-->

<script type="text/javascript" src="zapatec/utils/zapatec.js"></script>
<script type="text/javascript" src="zapatec/zpmenu/src/zpmenu.js"></script>

</head>

<body>

 <div id="wrap">
        
  <div id="header" class="float">
  
   <div class="content">
  
    <div class="LogoColumn" align="center">
        
    </div>
        
    <div class="BannerColumn">
    
     <div class="myHeaderBanner">
  
      <div class="topGreenBusinessAdOne">
                                                     
      </div>
  
      <div class="topGreenBusinessAdTwo">
                                                     
      </div>
  
      <div class="topGreenBusinessAdThree">
                                                     
      </div>
      
      <div class="clearfix"></div>
    
     </div>
  
     <div id="menu" style="float:right; display:none;">
   
      <ul id="menu-items">
  
       <cfoutput>
  
        <li>
        
         <a href="/" accesskey="1">home</a>
         
         <ul>
   
          <li>
         
           <img src="img/menu/award_star.png" alt="About Us" height="16" width="16" />
           <a href="about-us.cfm">about us</a>
                 
          </li> 
  
          <li>
         
           <img src="img/menu/advertise.png" alt="Green Advertising" height="16" width="16" />
           <a href="advertise/green-advertising.cfm">advertise with us</a>
  
           <ul>
          
            <li>
             <img src="img/menu/advertise.png" alt="Find Green Businesses" height="16" width="16" />
             <a href="advertise/green-advertising.cfm">green advertising</a>
            </li>
            
            <li>
             <img src="img/menu/backlink.png" alt="Link Exchange" height="16" width="16" />
             <a href="advertise/backlinks.cfm">link exchange</a>
            </li>
                                       
           </ul>
                 
          </li> 
         
          <li>
         
           <img src="img/menu/book.png" alt="Testimonials" height="16" width="16" />
           <a href="testimonials.cfm">testimonials</a>
                 
          </li> 
         
         </ul>
         
        </li>
  
        <li>
        
         <a href="green-business/businesses-going-green.cfm" accesskey="2">green business</a>
  
         <ul>
         
          <li>
         
           <img src="img/menu/magnifier.png" alt="Find Green Businesses" height="16" width="16" />
           <a href="green-business/businesses-going-green.cfm">business directory</a>
          
           <ul>
          
            <li>
             <img src="img/menu/magnifier2.png" alt="Find Green Businesses" height="16" width="16" />
             <a href="green-business/advanced-business-search.cfm">advanced search</a>
            </li>
            
            <li>
             <img src="img/menu/magnifier.png" alt="Find Green Businesses" height="16" width="16" />
             <a href="businesses-going-green.cfm">basic search</a>
            </li>
                      
            <li>
             <img src="img/menu/map.png" alt="Map Search" height="16" width="16" />
             <a href="green-business/map-search.cfm">map search</a>
            </li>
                   
           </ul>
         
          </li>
  
          <li>
         
           <img src="img/menu/magnifier.png" alt="Find Green Businesses" height="16" width="16" />
           <a href="green-events/business-events.cfm">business events</a>
          
           <ul>
          
            <li>
             <img src="img/menu/magnifier2.png" alt="Advanved Event Search" height="16" width="16" />
             <a href="green-events/advanced-event-search.cfm">advanced search</a>
            </li>
            
            <li>
             <img src="img/menu/magnifier.png" alt="Find Green Events" height="16" width="16" />
             <a href="green-events/business-events.cfm">basic search</a>
            </li>
                      
            <li>
             <img src="img/menu/map.png" alt="Event Map Search" height="16" width="16" />
             <a href="green-events/map-search.cfm">map search</a>
            </li>
                   
           </ul>
         
          </li>
         
         </ul>
  
         <ul>
         
          <li>
         
           <img src="img/menu/camera.png" alt="Green Business Media" height="16" width="16" />
           <a href="green-business/videos/green-videos.cfm">business media</a>
          
           <ul>
          
            <li>
             <img src="img/menu/picture.png" alt="Business Photos" height="16" width="16" />
             <a href="green-business/photos/green-photos.cfm">business photos</a>
            </li>
            
            <li>
             <img src="img/menu/camera.png" alt="Business Videos" height="16" width="16" />
             <a href="green-business/videos/green-videos.cfm">business videos</a>
            </li>
                                       
           </ul>
         
          </li>
         
         </ul>
         
         <ul>
         
          <li>
         
           <img src="img/menu/report.png" alt="Register Green Business" height="16" width="16" />
           <a href="businesses-going-green.cfm">register a business</a>
          
           <ul>
          
            <li>
             <img src="img/menu/report_go.png" alt="Add Green Business" height="16" width="16" />
             <a href="green-business/add-green-business.cfm">add green business</a>
            </li>
                
            <li>
             <img src="img/menu/report_magnify.png" alt="Green Business Plans" height="16" width="16" />
             <a href="green-business/green-business-plans.cfm">green business plans</a>
            </li>
                                                 
           </ul>
         
          </li>
         
         </ul>
         
        </li>
  
        <li>
         <a href="green-products/find-green-products.cfm" accesskey="3">green products</a>
        </li>
  
        <li>
         <a href="green-living/green-living.cfm" accesskey="4">green living</a>
        </li> 
         
        <li>
         <a href="take-action/take-action.cfm" accesskey="5">take action</a>
        </li>
             
        <li>
        
         <a href="eco-friendly-news.cfm" accesskey="6">community</a>
         
         <ul>
         
          <li>
           <img src="img/menu/world.png" alt="Green Earth" height="16" width="16" />
           <a href="earth/green-earth.cfm">green earth</a>
          </li>
          
          <li>
           <img src="img/menu/page_copy.png" alt="Green Forum" height="16" width="16" />
           <a href="forum/green-categories.cfm">green forum</a>
          </li>
          
          <li>
           <img src="img/menu/script.png" alt="News Archive" height="16" width="16" />
           <a href="eco-friendly-news.cfm">news archive</a>
          </li>        
         
         </ul>
         
        </li>
      
        <li>
        
         <a href="faq.cfm" accesskey="7">help</a>
         
         <ul>
         
          <li>
           <img src="img/menu/lightbulb.png" alt="Member FAQ" height="16" width="16" />
           <a href="faq.cfm">common questions</a>
          </li>
          
          <li>
           <img src="img/menu/help.png" alt="Contact Us" height="16" width="16" />
           <a href="contact-us.cfm">contact us</a>
          </li>
           
          <li>
           <img src="img/menu/sitemap.png" alt="Site Map" height="16" width="16" />
           <a href="siteMap.cfm">site map</a>
          </li>        
         
         </ul>
         
        </li>
  
       </cfoutput>
           
      </ul>
      
      <script type="text/javascript">
      var myMenu = new Zapatec.Menu
      ({
        theme: "barblue",
        source: "menu-items"
      });
      </script>
          
     </div> 
     
     <script type="text/javascript">
     var myMenuBar = document.getElementById("menu");
     myMenuBar.style.display = "inline";
     </script>   
     
     <noscript>
     
      <div id="menu2" style="float:right;">
      
       <ul id="menu-items2">
  
        <cfoutput>
  
         <li><a href="" accesskey="1">home</a></li>
  
         <li><a href="businesses-going-green.cfm" accesskey="2">businesses</a></li>
         
         <li><a href="organizations-going-green.cfm" accesskey="3">organizations</a></li>
         
         <li><a href="environmental-people.cfm" accesskey="4">people</a></li>
         
         <li><a href="save-the-earth.cfm" accesskey="5">events</a></li>
  
         <li><a href="find-green-products.cfm" accesskey="6">products</a></li>
      
         <li><a href="eco-friendly-news.cfm" accesskey="7">community</a></li>
      
         <li><a href="faq.cfm" accesskey="8">help</a></li>
  
        </cfoutput>
           
       </ul> 
       
      </div>   
      
     </noscript>      
       
    </div>
   
   </div>
   
  </div>
    
 </div>
  
</body>

</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http:// www . w3 . org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http:// www . w3 . org/1999/xhtml">
  4. <head>
  5. <meta name="Description" content="" />
  6. <meta name="Keywords" content="" />
  7. <meta name="title" content="" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <meta name="author" content="Travis Walters" />
  10. <meta name="Copyright" content="2007-2009" />
  11. <meta name="robots" content="NOODP, INDEX, FOLLOW" />
  12. <title>My Title</title>
  13. <link rel="icon" type="image/gif" href="img/gif/favicon.gif" />
  14. <link rel="stylesheet" type="text/css" href="inc/style.css" media="all" />
  15. <!--[if lt IE 7]>
  16. <link rel="stylesheet" type="text/css" href="inc/ieBugs.css" media="all" />
  17. <![endif]-->
  18. <script type="text/javascript" src="zapatec/utils/zapatec.js"></script>
  19. <script type="text/javascript" src="zapatec/zpmenu/src/zpmenu.js"></script>
  20. </head>
  21. <body>
  22.  <div id="wrap">
  23.         
  24.   <div id="header" class="float">
  25.   
  26.    <div class="content">
  27.   
  28.     <div class="LogoColumn" align="center">
  29.         
  30.     </div>
  31.         
  32.     <div class="BannerColumn">
  33.     
  34.      <div class="myHeaderBanner">
  35.   
  36.       <div class="topGreenBusinessAdOne">
  37.                                                      
  38.       </div>
  39.   
  40.       <div class="topGreenBusinessAdTwo">
  41.                                                      
  42.       </div>
  43.   
  44.       <div class="topGreenBusinessAdThree">
  45.                                                      
  46.       </div>
  47.       
  48.       <div class="clearfix"></div>
  49.     
  50.      </div>
  51.   
  52.      <div id="menu" style="float:right; display:none;">
  53.    
  54.       <ul id="menu-items">
  55.   
  56.        <cfoutput>
  57.   
  58.         <li>
  59.         
  60.          <a href="/" accesskey="1">home</a>
  61.          
  62.          <ul>
  63.    
  64.           <li>
  65.          
  66.            <img src="img/menu/award_star.png" alt="About Us" height="16" width="16" />
  67.            <a href="about-us.cfm">about us</a>
  68.                  
  69.           </li> 
  70.   
  71.           <li>
  72.          
  73.            <img src="img/menu/advertise.png" alt="Green Advertising" height="16" width="16" />
  74.            <a href="advertise/green-advertising.cfm">advertise with us</a>
  75.   
  76.            <ul>
  77.           
  78.             <li>
  79.              <img src="img/menu/advertise.png" alt="Find Green Businesses" height="16" width="16" />
  80.              <a href="advertise/green-advertising.cfm">green advertising</a>
  81.             </li>
  82.             
  83.             <li>
  84.              <img src="img/menu/backlink.png" alt="Link Exchange" height="16" width="16" />
  85.              <a href="advertise/backlinks.cfm">link exchange</a>
  86.             </li>
  87.                                        
  88.            </ul>
  89.                  
  90.           </li> 
  91.          
  92.           <li>
  93.          
  94.            <img src="img/menu/book.png" alt="Testimonials" height="16" width="16" />
  95.            <a href="testimonials.cfm">testimonials</a>
  96.                  
  97.           </li> 
  98.          
  99.          </ul>
  100.          
  101.         </li>
  102.   
  103.         <li>
  104.         
  105.          <a href="green-business/businesses-going-green.cfm" accesskey="2">green business</a>
  106.   
  107.          <ul>
  108.          
  109.           <li>
  110.          
  111.            <img src="img/menu/magnifier.png" alt="Find Green Businesses" height="16" width="16" />
  112.            <a href="green-business/businesses-going-green.cfm">business directory</a>
  113.           
  114.            <ul>
  115.           
  116.             <li>
  117.              <img src="img/menu/magnifier2.png" alt="Find Green Businesses" height="16" width="16" />
  118.              <a href="green-business/advanced-business-search.cfm">advanced search</a>
  119.             </li>
  120.             
  121.             <li>
  122.              <img src="img/menu/magnifier.png" alt="Find Green Businesses" height="16" width="16" />
  123.              <a href="businesses-going-green.cfm">basic search</a>
  124.             </li>
  125.                       
  126.             <li>
  127.              <img src="img/menu/map.png" alt="Map Search" height="16" width="16" />
  128.              <a href="green-business/map-search.cfm">map search</a>
  129.             </li>
  130.                    
  131.            </ul>
  132.          
  133.           </li>
  134.   
  135.           <li>
  136.          
  137.            <img src="img/menu/magnifier.png" alt="Find Green Businesses" height="16" width="16" />
  138.            <a href="green-events/business-events.cfm">business events</a>
  139.           
  140.            <ul>
  141.           
  142.             <li>
  143.              <img src="img/menu/magnifier2.png" alt="Advanved Event Search" height="16" width="16" />
  144.              <a href="green-events/advanced-event-search.cfm">advanced search</a>
  145.             </li>
  146.             
  147.             <li>
  148.              <img src="img/menu/magnifier.png" alt="Find Green Events" height="16" width="16" />
  149.              <a href="green-events/business-events.cfm">basic search</a>
  150.             </li>
  151.                       
  152.             <li>
  153.              <img src="img/menu/map.png" alt="Event Map Search" height="16" width="16" />
  154.              <a href="green-events/map-search.cfm">map search</a>
  155.             </li>
  156.                    
  157.            </ul>
  158.          
  159.           </li>
  160.          
  161.          </ul>
  162.   
  163.          <ul>
  164.          
  165.           <li>
  166.          
  167.            <img src="img/menu/camera.png" alt="Green Business Media" height="16" width="16" />
  168.            <a href="green-business/videos/green-videos.cfm">business media</a>
  169.           
  170.            <ul>
  171.           
  172.             <li>
  173.              <img src="img/menu/picture.png" alt="Business Photos" height="16" width="16" />
  174.              <a href="green-business/photos/green-photos.cfm">business photos</a>
  175.             </li>
  176.             
  177.             <li>
  178.              <img src="img/menu/camera.png" alt="Business Videos" height="16" width="16" />
  179.              <a href="green-business/videos/green-videos.cfm">business videos</a>
  180.             </li>
  181.                                        
  182.            </ul>
  183.          
  184.           </li>
  185.          
  186.          </ul>
  187.          
  188.          <ul>
  189.          
  190.           <li>
  191.          
  192.            <img src="img/menu/report.png" alt="Register Green Business" height="16" width="16" />
  193.            <a href="businesses-going-green.cfm">register a business</a>
  194.           
  195.            <ul>
  196.           
  197.             <li>
  198.              <img src="img/menu/report_go.png" alt="Add Green Business" height="16" width="16" />
  199.              <a href="green-business/add-green-business.cfm">add green business</a>
  200.             </li>
  201.                 
  202.             <li>
  203.              <img src="img/menu/report_magnify.png" alt="Green Business Plans" height="16" width="16" />
  204.              <a href="green-business/green-business-plans.cfm">green business plans</a>
  205.             </li>
  206.                                                  
  207.            </ul>
  208.          
  209.           </li>
  210.          
  211.          </ul>
  212.          
  213.         </li>
  214.   
  215.         <li>
  216.          <a href="green-products/find-green-products.cfm" accesskey="3">green products</a>
  217.         </li>
  218.   
  219.         <li>
  220.          <a href="green-living/green-living.cfm" accesskey="4">green living</a>
  221.         </li> 
  222.          
  223.         <li>
  224.          <a href="take-action/take-action.cfm" accesskey="5">take action</a>
  225.         </li>
  226.              
  227.         <li>
  228.         
  229.          <a href="eco-friendly-news.cfm" accesskey="6">community</a>
  230.          
  231.          <ul>
  232.          
  233.           <li>
  234.            <img src="img/menu/world.png" alt="Green Earth" height="16" width="16" />
  235.            <a href="earth/green-earth.cfm">green earth</a>
  236.           </li>
  237.           
  238.           <li>
  239.            <img src="img/menu/page_copy.png" alt="Green Forum" height="16" width="16" />
  240.            <a href="forum/green-categories.cfm">green forum</a>
  241.           </li>
  242.           
  243.           <li>
  244.            <img src="img/menu/script.png" alt="News Archive" height="16" width="16" />
  245.            <a href="eco-friendly-news.cfm">news archive</a>
  246.           </li>        
  247.          
  248.          </ul>
  249.          
  250.         </li>
  251.       
  252.         <li>
  253.         
  254.          <a href="faq.cfm" accesskey="7">help</a>
  255.          
  256.          <ul>
  257.          
  258.           <li>
  259.            <img src="img/menu/lightbulb.png" alt="Member FAQ" height="16" width="16" />
  260.            <a href="faq.cfm">common questions</a>
  261.           </li>
  262.           
  263.           <li>
  264.            <img src="img/menu/help.png" alt="Contact Us" height="16" width="16" />
  265.            <a href="contact-us.cfm">contact us</a>
  266.           </li>
  267.            
  268.           <li>
  269.            <img src="img/menu/sitemap.png" alt="Site Map" height="16" width="16" />
  270.            <a href="siteMap.cfm">site map</a>
  271.           </li>        
  272.          
  273.          </ul>
  274.          
  275.         </li>
  276.   
  277.        </cfoutput>
  278.            
  279.       </ul>
  280.       
  281.       <script type="text/javascript">
  282.       var myMenu = new Zapatec.Menu
  283.       ({
  284.         theme: "barblue",
  285.         source: "menu-items"
  286.       });
  287.       </script>
  288.           
  289.      </div> 
  290.      
  291.      <script type="text/javascript">
  292.      var myMenuBar = document.getElementById("menu");
  293.      myMenuBar.style.display = "inline";
  294.      </script>   
  295.      
  296.      <noscript>
  297.      
  298.       <div id="menu2" style="float:right;">
  299.       
  300.        <ul id="menu-items2">
  301.   
  302.         <cfoutput>
  303.   
  304.          <li><a href="" accesskey="1">home</a></li>
  305.   
  306.          <li><a href="businesses-going-green.cfm" accesskey="2">businesses</a></li>
  307.          
  308.          <li><a href="organizations-going-green.cfm" accesskey="3">organizations</a></li>
  309.          
  310.          <li><a href="environmental-people.cfm" accesskey="4">people</a></li>
  311.          
  312.          <li><a href="save-the-earth.cfm" accesskey="5">events</a></li>
  313.   
  314.          <li><a href="find-green-products.cfm" accesskey="6">products</a></li>
  315.       
  316.          <li><a href="eco-friendly-news.cfm" accesskey="7">community</a></li>
  317.       
  318.          <li><a href="faq.cfm" accesskey="8">help</a></li>
  319.   
  320.         </cfoutput>
  321.            
  322.        </ul> 
  323.        
  324.       </div>   
  325.       
  326.      </noscript>      
  327.        
  328.     </div>
  329.    
  330.    </div>
  331.    
  332.   </div>
  333.     
  334.  </div>
  335.   
  336. </body>
  337. </html>


The website CSS source is below:

Code: [ Select ]

a,a:hover,a:link,a:active,a:visited {
color:#a4cd3b;
text-decoration:none;
outline:0;
}

h1,h2,h3,h4,h5,h6 {
font-family:Arial, Helvetica, sans-serif;
line-height:1.2em;
}

h1 {
font-size:1.6em;
font-weight:400;
margin-bottom:.5em;
}

h2 {
font-size:1.2em;
font-weight:400;
margin-bottom:.5em;
}

h3,h4 {
font:bold 1em Verdana, Arial, Helvetica, sans-serif;
}

p {
line-height:1.4em;
}

ul,ol {
list-style:none;
}

p,ul,ol {
margin-bottom:1.2em;
}

img {
border:0;
display:block;
}

br {
font-size:1em;
line-height:1em;
height:1em;
}

body {
background:#FFF url(../img/jpg/bg1_2.jpg) repeat-x 0 0;
color:#333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.75em;
line-height:1.4em;
text-align:center;
}

#wrap {
text-align:left;
width:100%;
position:relative;
margin:auto;
}

#header,#search,#menu,#menu2,#body,#footer {
float:none;
margin:auto;
}

#header {
height:121px;
width:100%;
position:relative;
background-color:#064A04;
z-index:2;
}

#header .content {
width:795px;
margin:auto;
}

#header .LogoColumn {
width:205px;
float:left;
display:inline;
margin:0;
padding:0;
}

#header .BannerColumn {
width:590px;
height:131px;
float:right;
display:inline;
text-align:left;
margin:0;
padding:0;
}

#header .myHeaderBanner {
width:590px;
height:90px;
margin:0;
padding:0;
}

div.topGreenBusinessAdOne {
width:205px;
height:60px;
float:left;
display:inline;
margin:15px 0 0 6px;
padding:0;
}

div.topGreenBusinessAdTwo {
width:225px;
height:75px;
float:left;
display:inline;
margin:10px 0 0 15px;
padding:0;
}

div.topGreenBusinessAdThree {
width:124px;
height:75px;
float:left;
display:inline;
margin:10px 0 0 15px;
padding:0;
}

#header .myHeaderMenu {
width:590px;
}

#search {
height:35px;
width:795px;
position:relative;
border:1px solid #e7e2ce;
}

#search #search-form {
position:absolute;
right:0;
top:0;
width:378px;
height:29px;
text-align:right;
margin:auto;
padding:8px 25px 0 0;
}

#search form #SITE_SEARCH.text {
background:url(../img/gif/bg_input_1.gif);
border:0;
height:14px;
width:247px;
margin:0 15px 0 0;
padding:4px;
}

#body {
width:795px;
text-align:left;
}

#body a,#body a:link,#body a:visited,#body a:active {
color:#333;
border-bottom:1px dashed #333;
}

#body a:hover {
background-color:#FFFBCF;
border-bottom:1px solid #FFFBCF;
}

#body a:hover img {
background-color:#FFFBCF;
}

#body img {
background-color:#FFF;
border:1px solid #999;
padding:4px;
}

#body img.img {
border:0;
display:inline;
vertical-align:middle;
padding:0;
}

#body .content-box {
float:left;
display:inline;
margin-bottom:30px;
}

#body h3.hdr1,#body h3.hdr2 {
border-bottom:1px solid #e7e2ce;
color:#10592e;
font-weight:400;
line-height:2.3em;
margin-bottom:1.2em;
padding-left:15px;
}

#body h3.hdr2 {
border:0;
margin-bottom:0;
}

#breadcrumbs {
width:100%;
}

#breadcrumbs .content {
line-height:37px;
font-size:.8em;
height:37px;
width:795px;
margin:auto;
}

#col-r h3.hdr1 {
padding:0;
}

#top-businesses .block img {
float:left;
margin:0 10px 1em 0;
}

.myGreenDonations {
width:230px;
}

#footer {
background:url(../img/bg_footer.gif) no-repeat 0 0;
color:#a09a81;
margin-bottom:20px;
padding-top:0;
text-align:center;
width:795px;
}

ul#footer-links li {
border-left:1px solid #A09A81;
display:inline;
margin-left:-4px;
padding:0 16px;
}

ul#footer-links li a,ul#footer-links li a:link,ul#footer-links li a:visited {
color:#A09A81;
}

.hidden {
display:none;
}

.replace {
background:transparent no-repeat 0 0;
border:0;
display:block;
text-indent:-10000px;
line-height:0;
}

.col-l,.float,.block {
float:left;
}

.col-r {
float:right;
}

.txt0 {
color:#bd0826;
}

.txt1 {
color:#666;
font-size:.9em;
}

.txt4 {
color:#666;
}

a.txt2 {
color:#66c;
}

a.logout {
float:left;
margin-top:7px;
display:inline;
background-image:url(../img/gif/bt_logout.gif);
height:25px;
width:91px;
}

a.logout:hover {
background-image:url(../img/gif/bt_logout-over.gif);
}

a.register {
float:left;
margin-top:7px;
display:inline;
background-image:url(../img/jpg/register1.jpg);
height:25px;
width:91px;
}

a.register:hover {
background-image:url(../img/jpg/register.jpg);
}

.cbullet {
background:transparent no-repeat 0 center;
padding-left:25px;
min-height:16px;
height:auto!important;
}

#menu ul,#menu2 ul {
height:30px;
text-align:right;
margin:0;
}

#menu ul li,#menu2 ul li {
display:inline;
margin-left:-2px;
}

.clearfix {
background-color:#FFF;
clear:both;
height:1px;
font-size:1px;
display:block;
visibility:hidden;
margin:0;
padding:0;
}

.clearfix:after {
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}

html[xmlns] .clearfix {
display:block;
}

* html .clearfix {
height:1%;
}

.star-rating,.star-rating a:hover,.star-rating a:active,.star-rating a:focus,.star-rating .current-rating {
background:url(../img/star.gif) left -1000px repeat-x;
}

.star-rating {
position:relative;
width:125px;
height:25px;
overflow:hidden;
list-style:none;
background-position:left top;
margin:0;
padding:0;
}

.star-rating li {
display:inline;
}

.star-rating a,.star-rating .current-rating {
position:absolute;
top:0;
left:0;
text-indent:-1000em;
height:25px;
line-height:25px;
outline:none;
overflow:hidden;
border:none;
}

.star-rating a:hover,.star-rating a:active,.star-rating a:focus {
background-position:left bottom;
}

.star-rating a.one-star {
width:20%;
z-index:6;
}

.star-rating a.two-stars {
width:40%;
z-index:5;
}

.star-rating a.three-stars {
width:60%;
z-index:4;
}

.star-rating a.four-stars {
width:80%;
z-index:3;
}

.star-rating a.five-stars {
width:100%;
z-index:2;
}

.star-rating .current-rating {
z-index:1;
background-position:left center;
}

#main-content {
background:url(../img/gif/bg_body11.gif) repeat-y 0 0;
width:100%;
}

#main-shine {
background:url(../img/jpg/bg_body3.jpg) no-repeat 0 0;
padding-top:20px;
width:100%;
}

#col-l,#col-l2,#col-l3,#col-l4,#col-l5,#col-l6 {
width:238px;
float:left;
display:inline;
margin:0 20px 0 0;
padding:0;
}

#col-r,#col-r2,#col-r3,#col-r4,#col-r5,#col-r6 {
width:520px;
float:right;
display:inline;
margin:0;
padding:0;
}

#main-l {
width:350px;
overflow:hidden;
}

#main-r {
width:150px;
overflow:hidden;
}

#body #col-l .content-box,#body #col-l .content-box2 {
float:left;
padding:0 10px 20px 0;
}

#body #col-l .content-box {
padding-left:15px;
width:177px;
}

#body #col-l .content-box2 {
width:192px;
}

ul#left-nav li a,ul#left-nav2 li a,ul#left-nav li a:visited,ul#left-nav2 li a:visited,ul#left-nav li a:link,ul#left-nav2 li a:link,ul#left-nav li a:active,ul#left-nav2 li a:active {
border-top:1px solid transparent;
border-bottom:1px solid transparent;
color:#333;
display:block;
font-family:Arial, Helvetica, sans-serif;
height:30px;
line-height:30px;
padding-left:15px;
}

ul#left-nav li a.active,ul#left-nav2 li a.active {
background:#FFF;
border-top:1px solid #dadada;
border-bottom:1px solid #dadada;
text-decoration:none;
}

ul#left-nav li a.active:hover,ul#left-nav2 li a.active:hover {
background-color:#FFF;
}

ul#left-nav li a:hover span,ul#left-nav2 li a:hover span {
border-bottom:1px dashed #333;
}

#body #col-r .content-box {
padding-top:10px;
width:100%;
margin:0;
}

.bullet0 {
color:#BD0826;
list-style:none;
}

.bullet1 li {
margin-bottom:1em;
}

#col-r ul.bullet1 {
float:left;
display:inline;
margin-bottom:3em;
width:257px;
}

#latest-news,#green-donations {
margin-top:2em;
}

#tooltip {
text-align:left;
position:absolute;
z-index:1000;
width:195px;
border:1px solid #FFF;
background:#99BA78;
font-size:11px;
line-height:13px!important;
font-weight:400;
color:#fff;
margin:7px 0 0 7px;
padding:9px 15px 10px 10px;
}

#tooltip b {
display:block;
color:#fff!important;
margin:0 0 3px;
}

#tooltip em {
display:block;
font-style:normal;
}

label {
font-size:12px;
font-weight:700;
margin:0;
padding:0;
}

input.text-small {
width:195px;
}

input.text-small2 {
width:140px;
}

input.text-very-small {
width:100px;
}

input.text-medium {
width:245px;
}

select.text-small {
width:200px;
}

select.text-small2 {
width:110px;
text-align:center;
}

select.text-medium {
width:250px;
}

div.TextAreaLeftColumn {
width:320px;
float:left;
display:inline;
line-height:1.4em;
font-size:1em;
margin:15px 0 0;
padding:0;
}

div.TextAreaRightColumn {
width:190px;
float:right;
display:inline;
line-height:1.4em;
font-size:1em;
text-align:right;
margin:15px 0 0;
padding:0;
}

textarea {
width:517px;
height:175px;
}

div.colLeft {
width:169px;
float:left;
display:inline;
text-align:left;
}

.tableRow {
line-height:30px;
}

li.searchResults {
width:508px;
border:1px solid #000;
min-height:100px;
margin:0 0 10px;
padding:5px;
}

li.searchResults:hover {
background:#CCC;
}

div.searchResultsLeftColumn {
width:100px;
float:left;
display:inline;
text-align:left;
margin:0;
padding:0;
}

div.searchResultsRightColumn {
width:395px;
float:right;
display:inline;
line-height:1.4em;
margin:0;
padding:0;
}

li.pageNumbers {
margin:0;
padding:0;
}

div.pageNumber {
display:inline;
margin-left:3px;
margin-right:3px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

div.pageNumbers {
float:left;
width:370px;
text-align:center;
}

div.BackLeftColumn {
width:75px;
float:left;
display:inline;
line-height:1.4em;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
margin:0;
padding:0;
}

div.NextLeftColumn {
width:75px;
float:right;
display:inline;
line-height:1.4em;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
margin:0;
padding:0;
}

#backButtonSpacer {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:700;
font-size:12px;
height:25px;
width:75px;
margin:0;
padding:0;
}

#nextButtonSpacer {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:700;
font-size:12px;
height:20px;
width:75px;
margin:0;
padding:0;
}

p.searchItem {
margin:3px 0 0;
}

p.searchItem2 {
margin:5px 0 0;
}

div.searchResultsLeftColumn2 {
width:185px;
float:left;
display:inline;
text-align:left;
margin:0;
padding:0;
}

div.searchResultsRightColumn2 {
width:310px;
float:right;
display:inline;
line-height:1.4em;
margin:0;
padding:0;
}

#searchBar {
background:#E7E2CE;
width:100%;
float:none;
height:40px;
margin:auto;
}

#topLogin {
background:#666;
width:100%;
float:none;
height:17px;
margin:auto;
padding:0;
}

#topLogin .content {
width:795px;
text-align:right;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin:auto;
}

h5 {
font:bold .8em Verdana, Arial, Helvetica, sans-serif;
}

div. hr {
height:2px;
width:100%;
background:#000;
font-size:1px;
margin:5px 0;
padding:0;
}

.myButtonStyle {
background:url(../img/png/buttonBG.png) repeat-x;
color:#FFF;
height:24px;
margin:0;
padding:0 10px;
}

div.newsColumnLeftColumn {
width:360px;
float:left;
display:inline;
margin:0;
padding:0;
}

div.newsColumnRightColumn {
width:130px;
float:right;
display:inline;
text-align:left;
margin:0;
padding:0;
}

div.leftColumnLeftColumn {
width:175px;
float:left;
display:inline;
margin:0;
padding:0;
}

div.rightColumnLeftColumn {
width:260px;
float:left;
display:inline;
margin:0;
padding:0;
}

div.rightColumnRightColumn {
width:250px;
float:right;
display:inline;
text-align:left;
margin:0;
padding:0;
}

div.addBizDiv,div.joinUsDiv,div.addOrgDiv {
width:140px;
float:right;
display:inline;
text-align:right;
margin:0;
padding:0;
}

div.UMAPDiv,div.GMAPDiv {
width:85px;
float:right;
display:inline;
text-align:right;
margin:0;
padding:0;
}

img.icon {
border:none;
display:inline;
}

#iconItem img {
border:none;
display:inline;
padding:0;
}

p.error,label.error {
color:red;
font-weight:700;
}

p.success,label.success {
color:#090;
font-weight:700;
}

span.required,span.important {
color:red;
}

li {
margin-bottom:10px;
}

div.loginPromptSpacer {
height:100px;
font-size:0;
margin:0!important;
padding:0!important;
}

div.labelTooltipSpacer {
height:3px;
font-size:0;
margin:0!important;
padding:0!important;
}

div.spacer {
height:60px;
font-size:0;
margin:0!important;
padding:0!important;
}

div.spacer3 {
height:30px;
font-size:0;
margin:0!important;
padding:0!important;
}

.zpCalSpecialDay {
background-color:#999;
color:#000;
}

.autocompleter {
z-index:99999999;
background-color:#CCC;
border:solid #000;
font-weight:700;
margin:0;
padding:5px;
}

#GOOGLE_BOTTOM_PAGE_AD {
margin-top:15px;
}

*,#charsRemaining,#charsRemaining2,#charsRemaining3,#charsRemaining4,#charsRemaining5,#charsRemaining6,#charsRemaining7,#charsRemaining8,#charsRemaining9,#charsRemaining10,#charsRemaining11,#charsRemaining12,#charsRemaining13,#charsRemaining14,#charsRemaining15,#topLogin p {
margin:0;
padding:0;
}

#body a.replace,#body a.replace:link,#body a.replace:visited,#body a.border0,ul#footer-links li.first,ul#left-nav li a.active span,ul#left-nav li a:active span,ul#left-nav2 li a.active span,ul#left-nav li a:active span {
border:0;
}

#body a.replace:hover,ul#left-nav li a:hover,ul#left-nav2 li a:hover {
background-color:transparent;
}

#top-businesses p,#latest-news p,#green-donations p,#green-donations2 p {
color:#666;
font-size:.8em;
margin-bottom:1em;
}

#latest-news .block img,#green-donations input,#green-donations2 input {
float:left;
margin:0 10px 0 0;
}

ul#footer-links,div.noMarginSpace,li.bottomItem,p.bottomItem,#left-nav li,#left-nav2 li {
margin:0;
}

#photo-gallery,#video-gallery {
width:100%;
margin-bottom:1em;
}

#photo-gallery li,#video-gallery li {
float:left;
display:inline;
margin:0 0 4px 6px;
}

.content-photos #photo-gallery li,.content-videos #video-gallery li {
margin:0 6px 4px 0;
}

.content-photos p.more,.content-videos p.more {
text-align:right;
width:192px;
padding-right:10px;
}

#photo-gallery li.first,#video-gallery li.first {
margin-left:0;
}

#photo-gallery img,#video-gallery img {
display:inline;
width:50px;
}

div.colMiddle,div.colRight {
width:167px;
float:left;
display:inline;
text-align:left;
margin-left:8px;
}

#backButton,#nextButton {
width:75px;
}

div.searchSpacer,div.spacer4 {
height:10px;
font-size:0;
margin:0!important;
padding:0!important;
}

#myAddNewsBtn2,#myAddBizBtn2,#myBizPlansBtn {
width:130px;
}

.siteSprite {
float: left;
display: block;
width: 16px;
height: 16px;
text-indent: -9999px;
background: url(../img/menu/menuIcons.png) 0 0 no-repeat;
}

#iconPhoto
{
background:#FF0000
}
  1. a,a:hover,a:link,a:active,a:visited {
  2. color:#a4cd3b;
  3. text-decoration:none;
  4. outline:0;
  5. }
  6. h1,h2,h3,h4,h5,h6 {
  7. font-family:Arial, Helvetica, sans-serif;
  8. line-height:1.2em;
  9. }
  10. h1 {
  11. font-size:1.6em;
  12. font-weight:400;
  13. margin-bottom:.5em;
  14. }
  15. h2 {
  16. font-size:1.2em;
  17. font-weight:400;
  18. margin-bottom:.5em;
  19. }
  20. h3,h4 {
  21. font:bold 1em Verdana, Arial, Helvetica, sans-serif;
  22. }
  23. p {
  24. line-height:1.4em;
  25. }
  26. ul,ol {
  27. list-style:none;
  28. }
  29. p,ul,ol {
  30. margin-bottom:1.2em;
  31. }
  32. img {
  33. border:0;
  34. display:block;
  35. }
  36. br {
  37. font-size:1em;
  38. line-height:1em;
  39. height:1em;
  40. }
  41. body {
  42. background:#FFF url(../img/jpg/bg1_2.jpg) repeat-x 0 0;
  43. color:#333;
  44. font-family:Verdana, Arial, Helvetica, sans-serif;
  45. font-size:.75em;
  46. line-height:1.4em;
  47. text-align:center;
  48. }
  49. #wrap {
  50. text-align:left;
  51. width:100%;
  52. position:relative;
  53. margin:auto;
  54. }
  55. #header,#search,#menu,#menu2,#body,#footer {
  56. float:none;
  57. margin:auto;
  58. }
  59. #header {
  60. height:121px;
  61. width:100%;
  62. position:relative;
  63. background-color:#064A04;
  64. z-index:2;
  65. }
  66. #header .content {
  67. width:795px;
  68. margin:auto;
  69. }
  70. #header .LogoColumn {
  71. width:205px;
  72. float:left;
  73. display:inline;
  74. margin:0;
  75. padding:0;
  76. }
  77. #header .BannerColumn {
  78. width:590px;
  79. height:131px;
  80. float:right;
  81. display:inline;
  82. text-align:left;
  83. margin:0;
  84. padding:0;
  85. }
  86. #header .myHeaderBanner {
  87. width:590px;
  88. height:90px;
  89. margin:0;
  90. padding:0;
  91. }
  92. div.topGreenBusinessAdOne {
  93. width:205px;
  94. height:60px;
  95. float:left;
  96. display:inline;
  97. margin:15px 0 0 6px;
  98. padding:0;
  99. }
  100. div.topGreenBusinessAdTwo {
  101. width:225px;
  102. height:75px;
  103. float:left;
  104. display:inline;
  105. margin:10px 0 0 15px;
  106. padding:0;
  107. }
  108. div.topGreenBusinessAdThree {
  109. width:124px;
  110. height:75px;
  111. float:left;
  112. display:inline;
  113. margin:10px 0 0 15px;
  114. padding:0;
  115. }
  116. #header .myHeaderMenu {
  117. width:590px;
  118. }
  119. #search {
  120. height:35px;
  121. width:795px;
  122. position:relative;
  123. border:1px solid #e7e2ce;
  124. }
  125. #search #search-form {
  126. position:absolute;
  127. right:0;
  128. top:0;
  129. width:378px;
  130. height:29px;
  131. text-align:right;
  132. margin:auto;
  133. padding:8px 25px 0 0;
  134. }
  135. #search form #SITE_SEARCH.text {
  136. background:url(../img/gif/bg_input_1.gif);
  137. border:0;
  138. height:14px;
  139. width:247px;
  140. margin:0 15px 0 0;
  141. padding:4px;
  142. }
  143. #body {
  144. width:795px;
  145. text-align:left;
  146. }
  147. #body a,#body a:link,#body a:visited,#body a:active {
  148. color:#333;
  149. border-bottom:1px dashed #333;
  150. }
  151. #body a:hover {
  152. background-color:#FFFBCF;
  153. border-bottom:1px solid #FFFBCF;
  154. }
  155. #body a:hover img {
  156. background-color:#FFFBCF;
  157. }
  158. #body img {
  159. background-color:#FFF;
  160. border:1px solid #999;
  161. padding:4px;
  162. }
  163. #body img.img {
  164. border:0;
  165. display:inline;
  166. vertical-align:middle;
  167. padding:0;
  168. }
  169. #body .content-box {
  170. float:left;
  171. display:inline;
  172. margin-bottom:30px;
  173. }
  174. #body h3.hdr1,#body h3.hdr2 {
  175. border-bottom:1px solid #e7e2ce;
  176. color:#10592e;
  177. font-weight:400;
  178. line-height:2.3em;
  179. margin-bottom:1.2em;
  180. padding-left:15px;
  181. }
  182. #body h3.hdr2 {
  183. border:0;
  184. margin-bottom:0;
  185. }
  186. #breadcrumbs {
  187. width:100%;
  188. }
  189. #breadcrumbs .content {
  190. line-height:37px;
  191. font-size:.8em;
  192. height:37px;
  193. width:795px;
  194. margin:auto;
  195. }
  196. #col-r h3.hdr1 {
  197. padding:0;
  198. }
  199. #top-businesses .block img {
  200. float:left;
  201. margin:0 10px 1em 0;
  202. }
  203. .myGreenDonations {
  204. width:230px;
  205. }
  206. #footer {
  207. background:url(../img/bg_footer.gif) no-repeat 0 0;
  208. color:#a09a81;
  209. margin-bottom:20px;
  210. padding-top:0;
  211. text-align:center;
  212. width:795px;
  213. }
  214. ul#footer-links li {
  215. border-left:1px solid #A09A81;
  216. display:inline;
  217. margin-left:-4px;
  218. padding:0 16px;
  219. }
  220. ul#footer-links li a,ul#footer-links li a:link,ul#footer-links li a:visited {
  221. color:#A09A81;
  222. }
  223. .hidden {
  224. display:none;
  225. }
  226. .replace {
  227. background:transparent no-repeat 0 0;
  228. border:0;
  229. display:block;
  230. text-indent:-10000px;
  231. line-height:0;
  232. }
  233. .col-l,.float,.block {
  234. float:left;
  235. }
  236. .col-r {
  237. float:right;
  238. }
  239. .txt0 {
  240. color:#bd0826;
  241. }
  242. .txt1 {
  243. color:#666;
  244. font-size:.9em;
  245. }
  246. .txt4 {
  247. color:#666;
  248. }
  249. a.txt2 {
  250. color:#66c;
  251. }
  252. a.logout {
  253. float:left;
  254. margin-top:7px;
  255. display:inline;
  256. background-image:url(../img/gif/bt_logout.gif);
  257. height:25px;
  258. width:91px;
  259. }
  260. a.logout:hover {
  261. background-image:url(../img/gif/bt_logout-over.gif);
  262. }
  263. a.register {
  264. float:left;
  265. margin-top:7px;
  266. display:inline;
  267. background-image:url(../img/jpg/register1.jpg);
  268. height:25px;
  269. width:91px;
  270. }
  271. a.register:hover {
  272. background-image:url(../img/jpg/register.jpg);
  273. }
  274. .cbullet {
  275. background:transparent no-repeat 0 center;
  276. padding-left:25px;
  277. min-height:16px;
  278. height:auto!important;
  279. }
  280. #menu ul,#menu2 ul {
  281. height:30px;
  282. text-align:right;
  283. margin:0;
  284. }
  285. #menu ul li,#menu2 ul li {
  286. display:inline;
  287. margin-left:-2px;
  288. }
  289. .clearfix {
  290. background-color:#FFF;
  291. clear:both;
  292. height:1px;
  293. font-size:1px;
  294. display:block;
  295. visibility:hidden;
  296. margin:0;
  297. padding:0;
  298. }
  299. .clearfix:after {
  300. content:".";
  301. display:block;
  302. clear:both;
  303. visibility:hidden;
  304. line-height:0;
  305. height:0;
  306. }
  307. html[xmlns] .clearfix {
  308. display:block;
  309. }
  310. * html .clearfix {
  311. height:1%;
  312. }
  313. .star-rating,.star-rating a:hover,.star-rating a:active,.star-rating a:focus,.star-rating .current-rating {
  314. background:url(../img/star.gif) left -1000px repeat-x;
  315. }
  316. .star-rating {
  317. position:relative;
  318. width:125px;
  319. height:25px;
  320. overflow:hidden;
  321. list-style:none;
  322. background-position:left top;
  323. margin:0;
  324. padding:0;
  325. }
  326. .star-rating li {
  327. display:inline;
  328. }
  329. .star-rating a,.star-rating .current-rating {
  330. position:absolute;
  331. top:0;
  332. left:0;
  333. text-indent:-1000em;
  334. height:25px;
  335. line-height:25px;
  336. outline:none;
  337. overflow:hidden;
  338. border:none;
  339. }
  340. .star-rating a:hover,.star-rating a:active,.star-rating a:focus {
  341. background-position:left bottom;
  342. }
  343. .star-rating a.one-star {
  344. width:20%;
  345. z-index:6;
  346. }
  347. .star-rating a.two-stars {
  348. width:40%;
  349. z-index:5;
  350. }
  351. .star-rating a.three-stars {
  352. width:60%;
  353. z-index:4;
  354. }
  355. .star-rating a.four-stars {
  356. width:80%;
  357. z-index:3;
  358. }
  359. .star-rating a.five-stars {
  360. width:100%;
  361. z-index:2;
  362. }
  363. .star-rating .current-rating {
  364. z-index:1;
  365. background-position:left center;
  366. }
  367. #main-content {
  368. background:url(../img/gif/bg_body11.gif) repeat-y 0 0;
  369. width:100%;
  370. }
  371. #main-shine {
  372. background:url(../img/jpg/bg_body3.jpg) no-repeat 0 0;
  373. padding-top:20px;
  374. width:100%;
  375. }
  376. #col-l,#col-l2,#col-l3,#col-l4,#col-l5,#col-l6 {
  377. width:238px;
  378. float:left;
  379. display:inline;
  380. margin:0 20px 0 0;
  381. padding:0;
  382. }
  383. #col-r,#col-r2,#col-r3,#col-r4,#col-r5,#col-r6 {
  384. width:520px;
  385. float:right;
  386. display:inline;
  387. margin:0;
  388. padding:0;
  389. }
  390. #main-l {
  391. width:350px;
  392. overflow:hidden;
  393. }
  394. #main-r {
  395. width:150px;
  396. overflow:hidden;
  397. }
  398. #body #col-l .content-box,#body #col-l .content-box2 {
  399. float:left;
  400. padding:0 10px 20px 0;
  401. }
  402. #body #col-l .content-box {
  403. padding-left:15px;
  404. width:177px;
  405. }
  406. #body #col-l .content-box2 {
  407. width:192px;
  408. }
  409. ul#left-nav li a,ul#left-nav2 li a,ul#left-nav li a:visited,ul#left-nav2 li a:visited,ul#left-nav li a:link,ul#left-nav2 li a:link,ul#left-nav li a:active,ul#left-nav2 li a:active {
  410. border-top:1px solid transparent;
  411. border-bottom:1px solid transparent;
  412. color:#333;
  413. display:block;
  414. font-family:Arial, Helvetica, sans-serif;
  415. height:30px;
  416. line-height:30px;
  417. padding-left:15px;
  418. }
  419. ul#left-nav li a.active,ul#left-nav2 li a.active {
  420. background:#FFF;
  421. border-top:1px solid #dadada;
  422. border-bottom:1px solid #dadada;
  423. text-decoration:none;
  424. }
  425. ul#left-nav li a.active:hover,ul#left-nav2 li a.active:hover {
  426. background-color:#FFF;
  427. }
  428. ul#left-nav li a:hover span,ul#left-nav2 li a:hover span {
  429. border-bottom:1px dashed #333;
  430. }
  431. #body #col-r .content-box {
  432. padding-top:10px;
  433. width:100%;
  434. margin:0;
  435. }
  436. .bullet0 {
  437. color:#BD0826;
  438. list-style:none;
  439. }
  440. .bullet1 li {
  441. margin-bottom:1em;
  442. }
  443. #col-r ul.bullet1 {
  444. float:left;
  445. display:inline;
  446. margin-bottom:3em;
  447. width:257px;
  448. }
  449. #latest-news,#green-donations {
  450. margin-top:2em;
  451. }
  452. #tooltip {
  453. text-align:left;
  454. position:absolute;
  455. z-index:1000;
  456. width:195px;
  457. border:1px solid #FFF;
  458. background:#99BA78;
  459. font-size:11px;
  460. line-height:13px!important;
  461. font-weight:400;
  462. color:#fff;
  463. margin:7px 0 0 7px;
  464. padding:9px 15px 10px 10px;
  465. }
  466. #tooltip b {
  467. display:block;
  468. color:#fff!important;
  469. margin:0 0 3px;
  470. }
  471. #tooltip em {
  472. display:block;
  473. font-style:normal;
  474. }
  475. label {
  476. font-size:12px;
  477. font-weight:700;
  478. margin:0;
  479. padding:0;
  480. }
  481. input.text-small {
  482. width:195px;
  483. }
  484. input.text-small2 {
  485. width:140px;
  486. }
  487. input.text-very-small {
  488. width:100px;
  489. }
  490. input.text-medium {
  491. width:245px;
  492. }
  493. select.text-small {
  494. width:200px;
  495. }
  496. select.text-small2 {
  497. width:110px;
  498. text-align:center;
  499. }
  500. select.text-medium {
  501. width:250px;
  502. }
  503. div.TextAreaLeftColumn {
  504. width:320px;
  505. float:left;
  506. display:inline;
  507. line-height:1.4em;
  508. font-size:1em;
  509. margin:15px 0 0;
  510. padding:0;
  511. }
  512. div.TextAreaRightColumn {
  513. width:190px;
  514. float:right;
  515. display:inline;
  516. line-height:1.4em;
  517. font-size:1em;
  518. text-align:right;
  519. margin:15px 0 0;
  520. padding:0;
  521. }
  522. textarea {
  523. width:517px;
  524. height:175px;
  525. }
  526. div.colLeft {
  527. width:169px;
  528. float:left;
  529. display:inline;
  530. text-align:left;
  531. }
  532. .tableRow {
  533. line-height:30px;
  534. }
  535. li.searchResults {
  536. width:508px;
  537. border:1px solid #000;
  538. min-height:100px;
  539. margin:0 0 10px;
  540. padding:5px;
  541. }
  542. li.searchResults:hover {
  543. background:#CCC;
  544. }
  545. div.searchResultsLeftColumn {
  546. width:100px;
  547. float:left;
  548. display:inline;
  549. text-align:left;
  550. margin:0;
  551. padding:0;
  552. }
  553. div.searchResultsRightColumn {
  554. width:395px;
  555. float:right;
  556. display:inline;
  557. line-height:1.4em;
  558. margin:0;
  559. padding:0;
  560. }
  561. li.pageNumbers {
  562. margin:0;
  563. padding:0;
  564. }
  565. div.pageNumber {
  566. display:inline;
  567. margin-left:3px;
  568. margin-right:3px;
  569. font-family:Verdana, Arial, Helvetica, sans-serif;
  570. font-size:10px;
  571. }
  572. div.pageNumbers {
  573. float:left;
  574. width:370px;
  575. text-align:center;
  576. }
  577. div.BackLeftColumn {
  578. width:75px;
  579. float:left;
  580. display:inline;
  581. line-height:1.4em;
  582. font-family:Verdana, Arial, Helvetica, sans-serif;
  583. font-size:1em;
  584. margin:0;
  585. padding:0;
  586. }
  587. div.NextLeftColumn {
  588. width:75px;
  589. float:right;
  590. display:inline;
  591. line-height:1.4em;
  592. font-family:Verdana, Arial, Helvetica, sans-serif;
  593. font-size:1em;
  594. margin:0;
  595. padding:0;
  596. }
  597. #backButtonSpacer {
  598. font-family:Verdana, Arial, Helvetica, sans-serif;
  599. font-weight:700;
  600. font-size:12px;
  601. height:25px;
  602. width:75px;
  603. margin:0;
  604. padding:0;
  605. }
  606. #nextButtonSpacer {
  607. font-family:Verdana, Arial, Helvetica, sans-serif;
  608. font-weight:700;
  609. font-size:12px;
  610. height:20px;
  611. width:75px;
  612. margin:0;
  613. padding:0;
  614. }
  615. p.searchItem {
  616. margin:3px 0 0;
  617. }
  618. p.searchItem2 {
  619. margin:5px 0 0;
  620. }
  621. div.searchResultsLeftColumn2 {
  622. width:185px;
  623. float:left;
  624. display:inline;
  625. text-align:left;
  626. margin:0;
  627. padding:0;
  628. }
  629. div.searchResultsRightColumn2 {
  630. width:310px;
  631. float:right;
  632. display:inline;
  633. line-height:1.4em;
  634. margin:0;
  635. padding:0;
  636. }
  637. #searchBar {
  638. background:#E7E2CE;
  639. width:100%;
  640. float:none;
  641. height:40px;
  642. margin:auto;
  643. }
  644. #topLogin {
  645. background:#666;
  646. width:100%;
  647. float:none;
  648. height:17px;
  649. margin:auto;
  650. padding:0;
  651. }
  652. #topLogin .content {
  653. width:795px;
  654. text-align:right;
  655. color:#FFF;
  656. font-family:Arial, Helvetica, sans-serif;
  657. font-size:11px;
  658. margin:auto;
  659. }
  660. h5 {
  661. font:bold .8em Verdana, Arial, Helvetica, sans-serif;
  662. }
  663. div. hr {
  664. height:2px;
  665. width:100%;
  666. background:#000;
  667. font-size:1px;
  668. margin:5px 0;
  669. padding:0;
  670. }
  671. .myButtonStyle {
  672. background:url(../img/png/buttonBG.png) repeat-x;
  673. color:#FFF;
  674. height:24px;
  675. margin:0;
  676. padding:0 10px;
  677. }
  678. div.newsColumnLeftColumn {
  679. width:360px;
  680. float:left;
  681. display:inline;
  682. margin:0;
  683. padding:0;
  684. }
  685. div.newsColumnRightColumn {
  686. width:130px;
  687. float:right;
  688. display:inline;
  689. text-align:left;
  690. margin:0;
  691. padding:0;
  692. }
  693. div.leftColumnLeftColumn {
  694. width:175px;
  695. float:left;
  696. display:inline;
  697. margin:0;
  698. padding:0;
  699. }
  700. div.rightColumnLeftColumn {
  701. width:260px;
  702. float:left;
  703. display:inline;
  704. margin:0;
  705. padding:0;
  706. }
  707. div.rightColumnRightColumn {
  708. width:250px;
  709. float:right;
  710. display:inline;
  711. text-align:left;
  712. margin:0;
  713. padding:0;
  714. }
  715. div.addBizDiv,div.joinUsDiv,div.addOrgDiv {
  716. width:140px;
  717. float:right;
  718. display:inline;
  719. text-align:right;
  720. margin:0;
  721. padding:0;
  722. }
  723. div.UMAPDiv,div.GMAPDiv {
  724. width:85px;
  725. float:right;
  726. display:inline;
  727. text-align:right;
  728. margin:0;
  729. padding:0;
  730. }
  731. img.icon {
  732. border:none;
  733. display:inline;
  734. }
  735. #iconItem img {
  736. border:none;
  737. display:inline;
  738. padding:0;
  739. }
  740. p.error,label.error {
  741. color:red;
  742. font-weight:700;
  743. }
  744. p.success,label.success {
  745. color:#090;
  746. font-weight:700;
  747. }
  748. span.required,span.important {
  749. color:red;
  750. }
  751. li {
  752. margin-bottom:10px;
  753. }
  754. div.loginPromptSpacer {
  755. height:100px;
  756. font-size:0;
  757. margin:0!important;
  758. padding:0!important;
  759. }
  760. div.labelTooltipSpacer {
  761. height:3px;
  762. font-size:0;
  763. margin:0!important;
  764. padding:0!important;
  765. }
  766. div.spacer {
  767. height:60px;
  768. font-size:0;
  769. margin:0!important;
  770. padding:0!important;
  771. }
  772. div.spacer3 {
  773. height:30px;
  774. font-size:0;
  775. margin:0!important;
  776. padding:0!important;
  777. }
  778. .zpCalSpecialDay {
  779. background-color:#999;
  780. color:#000;
  781. }
  782. .autocompleter {
  783. z-index:99999999;
  784. background-color:#CCC;
  785. border:solid #000;
  786. font-weight:700;
  787. margin:0;
  788. padding:5px;
  789. }
  790. #GOOGLE_BOTTOM_PAGE_AD {
  791. margin-top:15px;
  792. }
  793. *,#charsRemaining,#charsRemaining2,#charsRemaining3,#charsRemaining4,#charsRemaining5,#charsRemaining6,#charsRemaining7,#charsRemaining8,#charsRemaining9,#charsRemaining10,#charsRemaining11,#charsRemaining12,#charsRemaining13,#charsRemaining14,#charsRemaining15,#topLogin p {
  794. margin:0;
  795. padding:0;
  796. }
  797. #body a.replace,#body a.replace:link,#body a.replace:visited,#body a.border0,ul#footer-links li.first,ul#left-nav li a.active span,ul#left-nav li a:active span,ul#left-nav2 li a.active span,ul#left-nav li a:active span {
  798. border:0;
  799. }
  800. #body a.replace:hover,ul#left-nav li a:hover,ul#left-nav2 li a:hover {
  801. background-color:transparent;
  802. }
  803. #top-businesses p,#latest-news p,#green-donations p,#green-donations2 p {
  804. color:#666;
  805. font-size:.8em;
  806. margin-bottom:1em;
  807. }
  808. #latest-news .block img,#green-donations input,#green-donations2 input {
  809. float:left;
  810. margin:0 10px 0 0;
  811. }
  812. ul#footer-links,div.noMarginSpace,li.bottomItem,p.bottomItem,#left-nav li,#left-nav2 li {
  813. margin:0;
  814. }
  815. #photo-gallery,#video-gallery {
  816. width:100%;
  817. margin-bottom:1em;
  818. }
  819. #photo-gallery li,#video-gallery li {
  820. float:left;
  821. display:inline;
  822. margin:0 0 4px 6px;
  823. }
  824. .content-photos #photo-gallery li,.content-videos #video-gallery li {
  825. margin:0 6px 4px 0;
  826. }
  827. .content-photos p.more,.content-videos p.more {
  828. text-align:right;
  829. width:192px;
  830. padding-right:10px;
  831. }
  832. #photo-gallery li.first,#video-gallery li.first {
  833. margin-left:0;
  834. }
  835. #photo-gallery img,#video-gallery img {
  836. display:inline;
  837. width:50px;
  838. }
  839. div.colMiddle,div.colRight {
  840. width:167px;
  841. float:left;
  842. display:inline;
  843. text-align:left;
  844. margin-left:8px;
  845. }
  846. #backButton,#nextButton {
  847. width:75px;
  848. }
  849. div.searchSpacer,div.spacer4 {
  850. height:10px;
  851. font-size:0;
  852. margin:0!important;
  853. padding:0!important;
  854. }
  855. #myAddNewsBtn2,#myAddBizBtn2,#myBizPlansBtn {
  856. width:130px;
  857. }
  858. .siteSprite {
  859. float: left;
  860. display: block;
  861. width: 16px;
  862. height: 16px;
  863. text-indent: -9999px;
  864. background: url(../img/menu/menuIcons.png) 0 0 no-repeat;
  865. }
  866. #iconPhoto
  867. {
  868. background:#FF0000
  869. }


The Zapatec Menu BarBlue.css Source Code:

Code: [ Select ]

/* $Id: barblue.css 4322 2006-09-04 08:49:33Z shacka $ */
@import url("layout/3d.css");

.zpMenuBarblue .zpMenuContainer {
border: solid 1px #516d9d;
}
/* top level, vertical and horizontal */
.zpMenuBarblue .zpMenu-horizontal-mode .zpMenu-level-1,
.zpMenuBarblue .zpMenu-vertical-mode .zpMenu-level-1 {
    width: 100px;
    padding: 0;
    background: url(barblue/bg_menu.gif) #a5cbda repeat-x 0 0;
    height: 24px;
}


/* Top Menu,Has SUB */
.zpMenuBarblue .zpMenuContainer .zpMenu-item-collapsed {
    background: url(barblue/bg_menu.gif) #a5cbda repeat-x 0 0;
}

/* Top Menu,Selected,No Sub */
.zpMenuBarblue .zpMenuContainer .zpMenu-item-selected {
    background: url(barblue/bg_menu_sel.gif) #bad7e3 repeat-x 0 0;
}

.zpMenuBarblue .zpMenuContainer .zpMenu-item-selected-collapsed {
    background: url(barblue/bg_menu_sel.gif) #bad7e3 repeat-x 0 0;
}

/* Top Menu,selected,Has Sub */
.zpMenuBarblue .zpMenuContainer .zpMenu-item-expanded {
    background: url(barblue/bg_menu_sel.gif) #bad7e3 repeat-x 0 0;
}

/* Top Menu,Selected,No Sub */
.zpMenuBarblue .zpMenu-horizontal-mode .zpMenu-level-1 {
    padding-left: 5px;
}

.zpMenuBarblue .zpMenu-vertical-mode .zpMenu-level-1 {
    padding-left: 5px;
    text-align:left;
}

.zpMenuBarblue .zpMenu-top .zpMenu-item-selected a,
.zpMenuBarblue .zpMenu-top .zpMenu-item-selected .zpMenu-label,
.zpMenuBarblue .zpMenuContainer a,
.zpMenuBarblue .zpMenuContainer span,
.zpMenuBarblue .zpMenuContainer .zpMenu-label{
    color: #51729b;
    font-family: Arial, Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold; 
    line-height: 22px;
}


.zpMenuBarblue .zpMenuContainer .zpMenuContainer a,
.zpMenuBarblue .zpMenuContainer .zpMenuContainer span,
.zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-label {
    color: #51729b;
    font-family: Arial, Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal; 
    line-height: 22px;
}

.zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item-expanded{
    background: white;
}

.zpMenuBarblue .zpMenuContainer .zpMenuContainer {
    margin-top:1px;
    margin-left:0px;
    background: #e4eff3;
    padding-top:0px;
    border: solid 1px #a5cbda;
    border-bottom: solid 3px #a5cbda;
}
.zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenuContainer {    
    border-top: solid 3px #a5cbda;
}



/* General items that's not a top menu */
.zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item,
.zpMenuBarblue .zpMenuContainer .zpMenuContainer {
    width: 170px;
}

.zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item {
    margin-top:0px;
    padding-top: 0px;
    height: 22px;
    margin-left:0px;    
    margin-bottom: 0px;
    background: url(barblue/hr.gif) repeat-x bottom left #e7f0f5;
}

/* Current selected items in vertical menu*/
.zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item-selected {
    background-color: #c9d7e2;
}

.zpMenuBarblue .zpMenu-top .zpMenu-item-selected a,
.zpMenuBarblue .zpMenu-top .zpMenu-item-selected .zpMenu-label,
.zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item-selected a,
.zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item-selected .zpMenu-label {
    font-weight: bold;
}


/* The arrow that shows up when there's a sub-menu */
.zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item-collapsed .zpMenu-label {
    background: url(barblue/arrow_li.gif) no-repeat center right;
}

/* The arrow that shows up when there's a sub-menu and the item is hovered*/
.zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item-expanded .zpMenu-label {
    background: url("barblue/arrow_da.gif") no-repeat center right;
}

.zpMenuBarblue .zpMenuContainer .zpMenuContainer .icon {
    padding-left: 3px;
}

/* Controls the behavior of <hr> it the menu */
.zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item-hr {
    border:none;
    margin:0;
    background: url(barblue/hr.gif) repeat-x bottom left #98BCD5;
    height:5px;
    padding:0px;    
}
  1. /* $Id: barblue.css 4322 2006-09-04 08:49:33Z shacka $ */
  2. @import url("layout/3d.css");
  3. .zpMenuBarblue .zpMenuContainer {
  4. border: solid 1px #516d9d;
  5. }
  6. /* top level, vertical and horizontal */
  7. .zpMenuBarblue .zpMenu-horizontal-mode .zpMenu-level-1,
  8. .zpMenuBarblue .zpMenu-vertical-mode .zpMenu-level-1 {
  9.     width: 100px;
  10.     padding: 0;
  11.     background: url(barblue/bg_menu.gif) #a5cbda repeat-x 0 0;
  12.     height: 24px;
  13. }
  14. /* Top Menu,Has SUB */
  15. .zpMenuBarblue .zpMenuContainer .zpMenu-item-collapsed {
  16.     background: url(barblue/bg_menu.gif) #a5cbda repeat-x 0 0;
  17. }
  18. /* Top Menu,Selected,No Sub */
  19. .zpMenuBarblue .zpMenuContainer .zpMenu-item-selected {
  20.     background: url(barblue/bg_menu_sel.gif) #bad7e3 repeat-x 0 0;
  21. }
  22. .zpMenuBarblue .zpMenuContainer .zpMenu-item-selected-collapsed {
  23.     background: url(barblue/bg_menu_sel.gif) #bad7e3 repeat-x 0 0;
  24. }
  25. /* Top Menu,selected,Has Sub */
  26. .zpMenuBarblue .zpMenuContainer .zpMenu-item-expanded {
  27.     background: url(barblue/bg_menu_sel.gif) #bad7e3 repeat-x 0 0;
  28. }
  29. /* Top Menu,Selected,No Sub */
  30. .zpMenuBarblue .zpMenu-horizontal-mode .zpMenu-level-1 {
  31.     padding-left: 5px;
  32. }
  33. .zpMenuBarblue .zpMenu-vertical-mode .zpMenu-level-1 {
  34.     padding-left: 5px;
  35.     text-align:left;
  36. }
  37. .zpMenuBarblue .zpMenu-top .zpMenu-item-selected a,
  38. .zpMenuBarblue .zpMenu-top .zpMenu-item-selected .zpMenu-label,
  39. .zpMenuBarblue .zpMenuContainer a,
  40. .zpMenuBarblue .zpMenuContainer span,
  41. .zpMenuBarblue .zpMenuContainer .zpMenu-label{
  42.     color: #51729b;
  43.     font-family: Arial, Verdana, Arial, Helvetica, sans-serif;
  44.     font-size: 12px;
  45.     font-weight: bold; 
  46.     line-height: 22px;
  47. }
  48. .zpMenuBarblue .zpMenuContainer .zpMenuContainer a,
  49. .zpMenuBarblue .zpMenuContainer .zpMenuContainer span,
  50. .zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-label {
  51.     color: #51729b;
  52.     font-family: Arial, Verdana, Arial, Helvetica, sans-serif;
  53.     font-size: 12px;
  54.     font-weight: normal; 
  55.     line-height: 22px;
  56. }
  57. .zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item-expanded{
  58.     background: white;
  59. }
  60. .zpMenuBarblue .zpMenuContainer .zpMenuContainer {
  61.     margin-top:1px;
  62.     margin-left:0px;
  63.     background: #e4eff3;
  64.     padding-top:0px;
  65.     border: solid 1px #a5cbda;
  66.     border-bottom: solid 3px #a5cbda;
  67. }
  68. .zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenuContainer {    
  69.     border-top: solid 3px #a5cbda;
  70. }
  71. /* General items that's not a top menu */
  72. .zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item,
  73. .zpMenuBarblue .zpMenuContainer .zpMenuContainer {
  74.     width: 170px;
  75. }
  76. .zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item {
  77.     margin-top:0px;
  78.     padding-top: 0px;
  79.     height: 22px;
  80.     margin-left:0px;    
  81.     margin-bottom: 0px;
  82.     background: url(barblue/hr.gif) repeat-x bottom left #e7f0f5;
  83. }
  84. /* Current selected items in vertical menu*/
  85. .zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item-selected {
  86.     background-color: #c9d7e2;
  87. }
  88. .zpMenuBarblue .zpMenu-top .zpMenu-item-selected a,
  89. .zpMenuBarblue .zpMenu-top .zpMenu-item-selected .zpMenu-label,
  90. .zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item-selected a,
  91. .zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item-selected .zpMenu-label {
  92.     font-weight: bold;
  93. }
  94. /* The arrow that shows up when there's a sub-menu */
  95. .zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item-collapsed .zpMenu-label {
  96.     background: url(barblue/arrow_li.gif) no-repeat center right;
  97. }
  98. /* The arrow that shows up when there's a sub-menu and the item is hovered*/
  99. .zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item-expanded .zpMenu-label {
  100.     background: url("barblue/arrow_da.gif") no-repeat center right;
  101. }
  102. .zpMenuBarblue .zpMenuContainer .zpMenuContainer .icon {
  103.     padding-left: 3px;
  104. }
  105. /* Controls the behavior of <hr> it the menu */
  106. .zpMenuBarblue .zpMenuContainer .zpMenuContainer .zpMenu-item-hr {
  107.     border:none;
  108.     margin:0;
  109.     background: url(barblue/hr.gif) repeat-x bottom left #98BCD5;
  110.     height:5px;
  111.     padding:0px;    
  112. }


EXAMPLE: www . green-watch . org/test2.cfm (remove spaces)

The zapatec javascript files were attached in my previous post if anybody needs to look at those.

It is a really nice menu. I just hope that the HTTP requests can be reduced by using this CSS Sprite.

Thanks again for those willing to help and get this working with this particular menu.

Sincerely,
Travis Walters
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9086
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I think the same principle is still going to apply. The problem with using the sprite in a horizontal format is that there is no way to restrict how much of the image is shown since you have much more horizontal space on a menu system so that you can display the menu text. If you apply the principle I used above to your system using a vertical format sprite the entire sprite wouldn't be shown as there is only so much vertical space where as horizontal space in a menu is much larger. I hope that makes sense. Try using a vertical sprite vs the horizontal sprite that you used before.

All you have to do is change your codes like this:

HTML Code: [ Select ]
                        <li>
                          <img src="img/menu/magnifier.png" alt="Find Green Businesses" height="16" width="16" />
                          <a href="businesses-going-green.cfm">basic search</a>
                        </li>
  1.                         <li>
  2.                           <img src="img/menu/magnifier.png" alt="Find Green Businesses" height="16" width="16" />
  3.                           <a href="businesses-going-green.cfm">basic search</a>
  4.                         </li>


to:

HTML Code: [ Select ]
                        <li class="sprite_name">
                          <a href="businesses-going-green.cfm">basic search</a>
                        </li>
  1.                         <li class="sprite_name">
  2.                           <a href="businesses-going-green.cfm">basic search</a>
  3.                         </li>


and add the CSS in addition to your other stuff as I showed in my example. It really doesn't matter what you are using to run your menus, what I provided you will still work. You just have to put it all together. Your problem is not related to Javascript, only the CSS and HTML.
  • twalters84
  • Graduate
  • Graduate
  • twalters84
  • Posts: 161
  • Loc: Mount Savage, MD

Post 3+ Months Ago

Hey there,

Please check out the following example page:

www.green-watch.org/test2.cfm

As you will see, your example works for LI elements that do not have submenus - that is if not placed in the menu. When placed in the menu, nothing shows up at all.

Using firebug in firefox, it looks like the menu is changed by javascript into multiple tables. I am not sure if the CLASS is even being recognized by the menu. At this point, I know that the barblue.css theme plays a keyrole.

Code: [ Select ]

.zpMenuBarblue .zpMenuContainer .zpMenuContainer .icon
{
    padding-left: 5px;
    padding-right: 10px;
}
  1. .zpMenuBarblue .zpMenuContainer .zpMenuContainer .icon
  2. {
  3.     padding-left: 5px;
  4.     padding-right: 10px;
  5. }


I have a hard enough time with CSS as it is without javascript playing a role :)

Thanks again for anybody that has a solution to this.

Sincerely,
Travis Walters

PS. I have a bowling league until late tonight. Will be back after 10:30 PM EST and I am available all day tommorrow.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9086
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I took a look for you. The background-position does actually show up correctly and is being inherited, however, the actually sprite image css is not being inherited. Try this CSS:

CSS Code: [ Select ]
li.sprite_image
{
   margin:20px 0;
   padding-left:20px;
   background: url(menuIcons_vertical.png) no-repeat top left;
   line-height:16px;
}
  1. li.sprite_image
  2. {
  3.    margin:20px 0;
  4.    padding-left:20px;
  5.    background: url(menuIcons_vertical.png) no-repeat top left;
  6.    line-height:16px;
  7. }


and then for the actual HTML change it to this format:

HTML Code: [ Select ]
                        <li class="sprite_image sprite_name">
                          <a href="businesses-going-green.cfm">basic search</a>
                        </li>
  1.                         <li class="sprite_image sprite_name">
  2.                           <a href="businesses-going-green.cfm">basic search</a>
  3.                         </li>


Where the sprite_image would come first in the class, and then the actual sprite_name after in the class (which refers to the actual part of the sprite you want to see).

Hope that makes sense.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

I'm not sure which browsers this will work in and I only experimented with it briefly about a year ago, so I'm reluctant to mention it, but a clear GIF should let the background of an <img> element shine through.


Going back to the original HTML in your first post.
HTML Code: [ Select ]
<li>
   <img src="/img/menu/backlink.png" alt="My IMG Title" height="16" width="16" />
   <a href="/index.cfm">my webpage</a>
</li>
  1. <li>
  2.    <img src="/img/menu/backlink.png" alt="My IMG Title" height="16" width="16" />
  3.    <a href="/index.cfm">my webpage</a>
  4. </li>


It might look like this.
HTML Code: [ Select ]
<li>
   <img class="iconPhotos" src="/img/menu/clear.gif" alt="Photos" height="16" width="16" />
   <a href="/photos.cfm">Photos</a>
</li>
  1. <li>
  2.    <img class="iconPhotos" src="/img/menu/clear.gif" alt="Photos" height="16" width="16" />
  3.    <a href="/photos.cfm">Photos</a>
  4. </li>


CSS Code: [ Select ]
.iconPhotos
{
   background: transparent url("sprite.png") no-repeat 0 0;
}
  1. .iconPhotos
  2. {
  3.    background: transparent url("sprite.png") no-repeat 0 0;
  4. }


I would use a 16x16 pixel "clear.gif" instead of a 1x1 as you might be inclined to do in order to lessen the likelihood of ad-blockers mistaking it as a tracking pixel.

I would also stick with the horizontal orientation since the <img> element will define the dimensions of the icon and there is no chance of the background being out of position.

But the main reason I like to stick with wide images instead of tall images is tall images are larger than wide images.
There's an anonymous comment that sounds like a plausible explaination at the end of that post.
Quote:
It's neither Fireworks nor the PNG format, it's actually due to the way images are stored.

Each image is a series of pixel that makes up a line and at the end of each line there would be a "return" character like in writing a paragraph. Less lines on a wide image means much smaller file size.


This approach would require two images, sprite.png and clear.gif, since the browser should only be checking clear.gif the first time it comes across it, but that's still a lot better than 21.
  • twalters84
  • Graduate
  • Graduate
  • twalters84
  • Posts: 161
  • Loc: Mount Savage, MD

Post 3+ Months Ago

Hey there,

I am convinced that the "zpmenu.js" javascript file is manipulating the HTML UL and LI elements and turning them into a menu revolved around tables. I checked this out tonight on firebug in firefox under the HTML view for the example page I setup.

The trick in getting this menu to work correctly is by upgrading their javascript file to place a custom class for each icon. I am going to base the class name on the icon name and just get rid of the PNG extension.

Once this is done, I think the CSS sprite code will work. I will let you both know how it progresses.

Sincerely,
Travis Walters
  • twalters84
  • Graduate
  • Graduate
  • twalters84
  • Posts: 161
  • Loc: Mount Savage, MD

Post 3+ Months Ago

Greetings,

I updated a few lines of javascript in the zpmenu.js file.

The problem was that class names were not taken into consideration when the javascript code manipulated the UL and LI elements and turned them into table elements.

I changed:

Code: [ Select ]

if(tmpElem.nodeType == 1 && tmpElem.tagName == "IMG")
{
  if(tmpElem.getAttribute("src"))
  {
   tmpObj.img = tmpElem.getAttribute("src");
  }
}
  1. if(tmpElem.nodeType == 1 && tmpElem.tagName == "IMG")
  2. {
  3.   if(tmpElem.getAttribute("src"))
  4.   {
  5.    tmpObj.img = tmpElem.getAttribute("src");
  6.   }
  7. }


to the following:

Code: [ Select ]

if(tmpElem.nodeType == 1 && tmpElem.tagName == "IMG")
{
  if(tmpElem.getAttribute("src"))
  {
   tmpObj.img = tmpElem.getAttribute("src");
   tmpObj.class = tmpElem.getAttribute("class");
  }
}
  1. if(tmpElem.nodeType == 1 && tmpElem.tagName == "IMG")
  2. {
  3.   if(tmpElem.getAttribute("src"))
  4.   {
  5.    tmpObj.img = tmpElem.getAttribute("src");
  6.    tmpObj.class = tmpElem.getAttribute("class");
  7.   }
  8. }


I also changed the following:

Code: [ Select ]

if (oElem.img)
{
  var img = Zapatec.Utils.createElement('img');

  img.setAttribute("src", oElem.img);

  ...

}
  1. if (oElem.img)
  2. {
  3.   var img = Zapatec.Utils.createElement('img');
  4.   img.setAttribute("src", oElem.img);
  5.   ...
  6. }


to the following:

Code: [ Select ]

if (oElem.img)
{
  var img = Zapatec.Utils.createElement('img');

  img.setAttribute("src", oElem.img);
  img.setAttribute("class", oElem.class);

  ...

}
  1. if (oElem.img)
  2. {
  3.   var img = Zapatec.Utils.createElement('img');
  4.   img.setAttribute("src", oElem.img);
  5.   img.setAttribute("class", oElem.class);
  6.   ...
  7. }


So basically there were two lines of javascript in the zpmenu.js file that was throwing me off.

This little project is now complete.

For a few great examples, Bigwebmaster, I will send you $5 dollars via PayPal if you provide me with an email address I can send it to. The full $10 dollars is not being awarded due to the javascript changes that were needed.

Also, joebert, I will also send you $5 dollars for providing the tip on the transparent GIF. After the javascript tweak was made, I needed a transparent image to get the background image to display correct.

Code: [ Select ]

.siteSprite
{
float: left;
display: block;
width: 16px;
height: 16px;
text-indent: -9999px;
background: url(img/menu/menuIcons.png) 0 0 no-repeat;
}

.iconContactUs { background-position: -192px -0; }

<li>
 <img class="siteSprite iconContactUs" src="img/menu/transparent.gif"
 alt="Contact Us" title="Contact Us" height="16" width="16" />
 <a href="contact-us.cfm">contact us</a>
</li>
  1. .siteSprite
  2. {
  3. float: left;
  4. display: block;
  5. width: 16px;
  6. height: 16px;
  7. text-indent: -9999px;
  8. background: url(img/menu/menuIcons.png) 0 0 no-repeat;
  9. }
  10. .iconContactUs { background-position: -192px -0; }
  11. <li>
  12.  <img class="siteSprite iconContactUs" src="img/menu/transparent.gif"
  13.  alt="Contact Us" title="Contact Us" height="16" width="16" />
  14.  <a href="contact-us.cfm">contact us</a>
  15. </li>


The horizontal sprite worked fine. It did not need to be vertical.

Hope this helps other people having this problem.

Thanks again for your all your help.

Sincerely,
Travis Walters
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9086
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I don't think you are finished. I just checked your site in IE8 and its a complete mess with your menus. I would advise you check. With FF everything looks great.

Don't worry about the money Travis, I am happy you were able to figure some things out :)

I don't expect anybody to be paying me for help here, one of the goals with ozzu is to have a community of members helping each other out. That is up to you if you want to pay others though, but I will pass.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9086
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Here is the javascript error I am also getting in IE8:

Code: [ Select ]
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Thu, 17 Sep 2009 19:10:59 UTC


Message: Expected identifier
Line: 534
Char: 15
Code: 0
URI: http://www.green-watch.org/zapatec/zpmenu/src/zpmenu-core.js


Message: Object expected
Line: 440
Char: 9
Code: 0
URI: http://www.green-watch.org/
  1. Webpage error details
  2. User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
  3. Timestamp: Thu, 17 Sep 2009 19:10:59 UTC
  4. Message: Expected identifier
  5. Line: 534
  6. Char: 15
  7. Code: 0
  8. URI: http://www.green-watch.org/zapatec/zpmenu/src/zpmenu-core.js
  9. Message: Object expected
  10. Line: 440
  11. Char: 9
  12. Code: 0
  13. URI: http://www.green-watch.org/
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

twalters, if I could make a suggestion, you could take the $10 and put it towards a membership and help support our community. The fees are a one-time deal and and begin at just $15. You can have a look at the fees and benefits here.
  • twalters84
  • Graduate
  • Graduate
  • twalters84
  • Posts: 161
  • Loc: Mount Savage, MD

Post 3+ Months Ago

Hey there,

Good catch on the IE problem. Got to love microsoft.. lol

Two updated pieces of code below:

Code: [ Select ]

if(tmpElem.getAttribute("src"))
{
  tmpObj.img = tmpElem.getAttribute("src");
  tmpObj.myClassName = tmpElem.className;
}
  1. if(tmpElem.getAttribute("src"))
  2. {
  3.   tmpObj.img = tmpElem.getAttribute("src");
  4.   tmpObj.myClassName = tmpElem.className;
  5. }


and..

Code: [ Select ]

var img = Zapatec.Utils.createElement('img');
img.setAttribute("src", oElem.img);
img.className = oElem.myClassName;
  1. var img = Zapatec.Utils.createElement('img');
  2. img.setAttribute("src", oElem.img);
  3. img.className = oElem.myClassName;


There was an issue between "className" which worked in IE and "class" which works in every other browser. However, the object.ClassName seems to work across browsers.

Amazing how difficult that simple thing was to do.

Thanks again for those who have helped me fix this problem. It is much appreciated.

I have been using a program called YSlow and PageSpeed to get the performance better on my website. I am still being ranked a D grade so there is quite a lot to do yet for the template. I guess the next issue will be to minify and combine all javascript files some how.

Sincerely,
Travis Walters
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9086
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I am not sure what you use to compress/minify your JavaScript and CSS files, but I use this and absolutely love it:

http://developer.yahoo.com/yui/compressor/

Hope that helps if you weren't aware of it. You can actually download it here:

http://yuilibrary.com/downloads/#yuicompressor

You will need Java installed on your machine to use it.
  • twalters84
  • Graduate
  • Graduate
  • twalters84
  • Posts: 161
  • Loc: Mount Savage, MD

Post 3+ Months Ago

Hey there,

I was wondering if that program can handle javascript files that are called within a JavaScript file?

For example, scriptaculous.js is a common library that contains many web 2.0 utilities. There are quite a few JavaScript files called from the main file.

Does the YUI compressor combine those files as well or do I need to make JavaScript tweaks before compressing the files?

The same thing holds true with the Zapatec menu. It calls about 6 different JavaScript files from the main zpmenu.js file.

I am very new at compressing files. I do know once compressed, the JavaScript can be served in a GZIP file much like I serve CSS on my website:

Code: [ Select ]

<cfif #cgi.HTTP_ACCEPT_ENCODING# contains "gzip">
 <cfheader name="Content-Encoding" value="gzip">  
 <cfcontent type="text/css" deletefile="no" file="#expandpath('./style.css.gz')#">
<cfelse>
 <cfcontent type="text/css; charset=ISO-8859-1">
 <cfinclude template="style.css">
</cfif>
  1. <cfif #cgi.HTTP_ACCEPT_ENCODING# contains "gzip">
  2.  <cfheader name="Content-Encoding" value="gzip">  
  3.  <cfcontent type="text/css" deletefile="no" file="#expandpath('./style.css.gz')#">
  4. <cfelse>
  5.  <cfcontent type="text/css; charset=ISO-8859-1">
  6.  <cfinclude template="style.css">
  7. </cfif>


The above is using coldfusion to determine whether the browser can handle GZIP files. If not, it serves the files without compression.

Sincerely,
Travis Walters
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9086
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I don't think it will be able to handle external files, you can see the entire documentation here:

http://www.julienlecomte.net/yuicompressor/README

Quote:
Usage: java -jar yuicompressor-x.y.z.jar [options] [input file]

Global Options
-h, --help Displays this information
--type <js|css> Specifies the type of the input file
--charset <charset> Read the input file using <charset>
--line-break <column> Insert a line break after the specified column number
-v, --verbose Display informational messages and warnings
-o <file> Place the output into <file>. Defaults to stdout.

JavaScript Options
--nomunge Minify only, do not obfuscate
--preserve-semi Preserve all semicolons
--disable-optimizations Disable all micro optimizations

DESCRIPTION

The YUI Compressor is a JavaScript compressor which, in addition to removing
comments and white-spaces, obfuscates local variables using the smallest
possible variable name. This obfuscation is safe, even when using constructs
such as 'eval' or 'with' (although the compression is not optimal is those
cases) Compared to jsmin, the average savings is around 20%.

The YUI Compressor is also able to safely compress CSS files. The decision
on which compressor is being used is made on the file extension (js or css)

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: No registered users and 44 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.