Retour à Forum de site web

CSS émission Sprite

  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Inscription: Sep 27, 2007
  • Messages: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Message Septembre 16th, 2009, 1:45 am

Salutations,

Je cherche à améliorer les performances de mon site web en minimisant les requêtes HTTP.

J'ai un menu Zapatec (zpmenu) qui a une image pour chaque option de menu. Chacun de ces images
est actuellement une requête HTTP. Je voudrais utiliser un Sprite CSS pour le 16x16 icônes de menu. Au lieu de
de faire une requête HTTP pour chaque icône, il serait juste faire une requête HTTP pour le sprite.

Ce qui suit est le Sprite CSS j'ai fait:
Attachments:
menuIcons.png


Le menu a Zapatec thèmes qui ils prennent le CSS et le manipuler avec javascript pour
créer le menu. Je suis téléchargeant le thème CSS ici:
Attachments:
zpmenu.ace

(63.01 Kio) Téléchargé 176 fois



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


Il ya une ligne de code dans le fichier barblue.css qui a à voir avec les icônes:

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


Je suis prêt à payer 10,00 $ US à la première personne que les postes d'une solution
à ce problème dans ce fil. Seul le poste qui a une solution de travail
serez payé, et l'affiche doit avoir un compte PayPal pour recevoir l'argent.

Si vous avez besoin de l'URL du site, s'il vous plaît PM moi ou me contacter par l'un des
les sites Web de ma signature. Je mai ne pas être disponibles à 10h30 CEST
aujourd'hui, mais je travaille sur ce site toute la journée jeudi et devrait être
disponible.

Nous vous remercions à l'avance pour ceux qui sont disposés à se pencher sur ce problème.

Cordialement,
Travis Walters
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Septembre 16th, 2009, 1:45 am

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Septembre 16th, 2009, 10:25 am

Je pense que si vous placez les icônes de sprite dans un format vertical, comme je l'ai attaché à ce poste il serait beaucoup plus facile à réaliser, comme illustré ici:

Attachments:
menuIcons_vertical.png


Je l'ai juste testé avec ce code et cela semble fonctionner 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>


Vous pouvez voir le résultat ici:

exemples com / / sprite_test / "> examples / sprite_test /

Heureusement, j'ai compris votre problème correctement. Let me know if that helps!
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Inscription: Sep 27, 2007
  • Messages: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Message Septembre 16th, 2009, 11:26 am

Hey there,

Je ne m'attendais pas l'admin sur le site pour travailler sur ce problème.

Merci pour la recherche sur ce problème. Obtenir le sprite à travailler avec le code HTML ordinaire n'était pas la question cependant. J'ai besoin du sprite à travailler avec le menu javascript Zapatec appelé zpmenu.

Je vais poster un meilleur exemple pour ceux qui veulent aider.

HTML code ci-dessous:

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


Le CSS est source de site Web ci-dessous:

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


Le Zapatec Menu BarBlue. Source Code CSS:

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


EXEMPLE: www. green-montre. org/test2.cfm (enlevez les espaces)

Les fichiers JavaScript Zapatec étaient attachés dans mon précédent post, si quelqu'un a besoin de regarder ces.

C'est un menu très agréable. J'espère simplement que les requêtes HTTP peuvent être réduites par l'utilisation de ce Sprite CSS.

Merci encore pour ceux qui veulent aider et que cela fonctionne avec ce menu particulier.

Cordialement,
Travis Walters
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Septembre 16th, 2009, 11:34 am

Je pense que le même principe est toujours en cours d'application. Le problème avec l'aide du sprite dans un format horizontal est qu'il n'y a aucun moyen de restreindre la façon dont une grande partie de l'image est affichée, puisque vous avez beaucoup plus d'espace horizontal sur un système de menu de sorte que vous pouvez afficher le texte du menu. Si vous appliquez le principe que j'ai utilisé ci-dessus pour votre système en utilisant un format vertical sprite le sprite wouldnt entière soit montré qu'il reste des places uniquement dans la mesure où l'espace vertical horizontal dans un menu est beaucoup plus grand. J'espère que le bon sens. Essayez d'utiliser un sprite verticale vs horizontale du sprite que vous avez utilisé auparavant.

Tout ce que vous avez à faire est de changer vos codes comme ceci:

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>


à:

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>


et ajouter le CSS en plus de vos autres trucs comme je l'ai montré dans mon exemple. Il n'a vraiment pas d'importance ce que vous utilisez pour exécuter vos menus, ce que je fournis vous aurez encore du travail. Vous venez de mettre tout cela ensemble. Votre problème n'est pas liée à Javascript, seul le CSS et HTML.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Inscription: Sep 27, 2007
  • Messages: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Message Septembre 16th, 2009, 12:46 pm

Hey there,

S'il vous plaît consulter la page de l'exemple suivant:

www.green-watch.org/test2.cfm

Comme vous le verrez, votre exemple fonctionne pour les éléments de LI qui n'ont pas de sous-menus - si tant est que pas placé dans le menu. Lorsqu'ils sont placés dans le menu, rien ne se présente à tous.

Utilisation de Firebug dans Firefox, il semble que le menu est modifié par le javascript dans plusieurs tables. Je ne suis pas sûr si la classe est même reconnu par le menu. À ce stade, je sais que le thème barblue.css joue un Rôle clé.

Code: [ Select ]

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


J'ai déjà du mal avec les CSS comme elle est sans javascript jouant un rôle :)

Merci encore pour quelqu'un qui a une solution à cela.

Cordialement,
Travis Walters

PS. J'ai une ligue de bowling jusqu'à ce soir tard. Sera de retour après 10h30, HNE, et je suis disponible toute la journée demain.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Septembre 16th, 2009, 1:12 pm

J'ai pris un coup d'oeil pour vous. Le background-position ne montrent en fait correctement et est héritée, cependant, le CSS fait sprite image n'est pas héréditaire. Essayez cette 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. }


et puis pour le code HTML effective le changer à ce 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>


Lorsque le sprite_image venant en premier dans la classe, puis le sprite_name effectives après la classe (ce qui renvoie à la partie réelle du sprite que vous voulez voir).

Hope that makes sense.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Inscription: Fév 10, 2004
  • Messages: 13455
  • Loc: Florida
  • Status: Offline

Message Septembre 16th, 2009, 7:47 pm

Im not sure les navigateurs cela fonctionne et j'ai seulement essayé brièvement avec elle il ya un an, donc Im réticents à en parler, mais une image GIF clair devrait laisser le fond d'un brillant élément <img> travers.


Pour en revenir au code HTML d'origine dans votre premier message.
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>


Elle pourrait ressembler à ceci.
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. }


Je voudrais utiliser un pixel 16x16 "clair. gif "au lieu d'un 1x1 que vous pourriez être tenté de faire afin de réduire la possibilité d'ad-bloquants à s'y méprendre comme un pixel de suivi.

Je voudrais aussi s'en tenir à l'orientation horizontale depuis le <img> élément sera de définir les dimensions de l'icône et il n'y a aucune chance de l'arrière-plan étant hors de position.

Mais la raison principale, je tiens à s'en tenir à des images de large au lieu d'images de grande taille est images hautes sont plus grandes que l'échelle des images .
Theres un commentaire anonyme qui sonne comme une explication plausible à la fin de ce poste.
Quote:
Feux d'artifice ni son ni le format PNG, sa réellement dû à la façon dont les images sont stockées.

Chaque image est une série de pixels qui composent une ligne et à la fin de chaque ligne il y aurait un «retour» de caractères comme dans la rédaction d'un paragraphe. Moins de lignes sur une image de l'échelle des moyens beaucoup plus petite taille de fichier.


Cette approche aurait besoin de deux images, et sprite.png clear.gif, puisque le navigateur ne doit être la vérification clear.gif la première fois qu'il vient en travers, mais thats encore beaucoup mieux que 21.
Strong with this one, the sudo is.
  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Inscription: Sep 27, 2007
  • Messages: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Message Septembre 17th, 2009, 12:29 am

Hey there,

Je suis convaincu que la "zpmenu.js" fichier javascript manipule l'AMT des éléments HTML et LI et de les transformer en un menu tournait autour des tables. J'ai vérifié ce soir sur Firebug dans Firefox sous le point de vue HTML de la page d'exemple je configurer.

Le truc à obtenir ce menu fonctionne correctement est de mettre à niveau leurs fichier javascript à placer une classe personnalisée pour chaque icône. Je vais établir le nom de classe sur le nom de l'icône et juste se débarrasser de l'extension PNG. < br>
Une fois cela fait, je pense que le code CSS sprite va fonctionner. Je vous laisse à la fois savoir comment il progresse.

Cordialement,
Travis Walters
  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Inscription: Sep 27, 2007
  • Messages: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Message Septembre 17th, 2009, 3:54 am

Salutations,

J'ai mis à jour quelques lignes de JavaScript dans le fichier zpmenu.js.

Le problème est que les noms de classes ne sont pas pris en considération lorsque le code JavaScript manipulé les UL et les éléments de LI et les transformer en éléments de tableau.

J'ai changé:

Code: [ Select ]

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


à ce qui suit:

Code: [ Select ]

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


J'ai également modifié le texte suivant:

Code: [ Select ]

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

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

  ...

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


à ce qui suit:

Code: [ Select ]

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

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

  ...

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


Donc, fondamentalement, il y avait deux lignes de JavaScript dans le fichier zpmenu.js qui me secouer.

Ce petit projet est maintenant terminée.

Pour quelques exemples grand Bigwebmaster, je vais vous envoyer des dollars $ 5 via PayPal si vous me fournir une adresse e-mail je peux l'envoyer. L'intégralité du 10 dollars n'est pas accordé en raison des changements javascript qui étaient nécessaires.

En outre, joebert, je vais aussi vous envoyer des dollars $ 5 pour fournir le pourboire sur la transpa pas GIF. Après le tweak javascript a été fait, j'avais besoin d'une transpa pas l'image pour obtenir l'image de fond affichage 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>
  2. .siteSprite
  3. {
  4. float: left;
  5. display: block;
  6. width: 16px;
  7. height: 16px;
  8. text-indent: -9999px;
  9. background: url(img/menu/menuIcons.png) 0 0 no-repeat;
  10. }
  12. .iconContactUs { background-position: -192px -0; }
  14. <li>
  15.  <img class="siteSprite iconContactUs" src="img/menu/transparent.gif"
  16.  alt="Contact Us" title="Contact Us" height="16" width="16" />
  17.  <a href="contact-us.cfm">contact us</a>
  18. </li>


Le sprite horizontale worked fine. Il n'a pas besoin d'être verticale.

Hope this helps autres personnes ayant ce problème.

Merci encore de votre toute votre aide.

Cordialement,
Travis Walters
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Septembre 17th, 2009, 12:03 pm

Je ne pense pas que vous avez terminé. Je viens de vérifier votre site dans IE8 et ses gâchis complet avec vos menus. Je vous conseille de vérifier. Avec FF tout est grand.

Ne pas s'inquiéter de l'argent Travis, je suis heureux de vous étiez en mesure de figurer certaines choses :)

Je ne pense pas que quiconque à me payer pour aider ici, l'un des objectifs avec ozzu est d'avoir une communauté de membres de s'entraider. C'est à vous si vous voulez payer les autres, cependant, mais je passerai.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Septembre 17th, 2009, 12:12 pm

Voici l'erreur javascript, je me fais aussi dans 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
  3. 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)
  4. Timestamp: Thu, 17 Sep 2009 19:10:59 UTC
  7. Message: Expected identifier
  8. Line: 534
  9. Char: 15
  10. Code: 0
  11. URI: http://www.green-watch.org/zapatec/zpmenu/src/zpmenu-core.js
  14. Message: Object expected
  15. Line: 440
  16. Char: 9
  17. Code: 0
  18. URI: http://www.green-watch.org/
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Juil 25, 2005
  • Messages: 2735
  • Loc: Nashville, TN
  • Status: Offline

Message Septembre 17th, 2009, 12:12 pm

twalters, si je pouvais faire une suggestion, vous pouvez prendre le 10 $ et de le mettre vers une adhésion et aider à soutenir notre communauté. Les redevances sont un contrat d'un temps et et de commencer à seulement 15 $. Vous pouvez avoir un regard sur les honoraires et les avantages ici .
I'd love to change the world, but they won't give me the source code.
  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Inscription: Sep 27, 2007
  • Messages: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Message Septembre 17th, 2009, 1:57 pm

Hey there,

Bonne prise sur le problème d'IE. Got to love .. Microsoft lol

Deux pièces mise à jour du code ci-dessous:

Code: [ Select ]

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


et ..

Code: [ Select ]

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


Il y avait un problème entre "className", qui a travaillé dans l'IE et de "classe" qui fonctionne dans tous les navigateurs autres. Toutefois, le object.ClassName semble fonctionner à tous les navigateurs.

C'est fou comme difficile qui a été chose simple à faire.

Merci encore pour ceux qui m'ont aidé à résoudre ce problème. Elle est très appréciée.

J'ai été en utilisant un programme appelé YSlow et PageSpeed pour obtenir le meilleur rendement sur mon site. Je suis toujours classé la note D Donc il ya plutôt beaucoup à faire encore pour le modèle. Je suppose que le prochain numéro sera de rapetisser et combiner tous les fichiers javascript certains comment.

Cordialement,
Travis Walters
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Septembre 17th, 2009, 2:38 pm

Je ne suis pas sûr de ce que vous utilisez pour compresser / rapetisser votre code JavaScript et les fichiers CSS, mais je l'utiliser et l'amour absolument:

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

Hope that helps si vous n'étiez pas au courant. Vous pouvez réellement le télécharger ici:

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

Vous aurez besoin de Java installé sur votre machine pour l'utiliser.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Inscription: Sep 27, 2007
  • Messages: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Message Septembre 17th, 2009, 3:07 pm

Hey there,

Je me demandais si ce programme peut gérer des fichiers javascript qui sont appelés dans un fichier JavaScript?

Par exemple, scriptaculous.js est une bibliothèque commune qui contient beaucoup de web 2.0 utilitaires. Il existe assez peu de fichiers JavaScript appelée à partir du fichier principal.

Est-ce que le compresseur YUI combiner ces fichiers en tant que bien ou ai-je besoin de faire quelques réglages avant JavaScript comprimer les fichiers?

La même chose est vraie avec le menu Zapatec. Il demande environ 6 différents fichiers JavaScript à partir du zpmenu.js principal fichier.

Je suis très nouvelle compression de fichiers. Je ne sais une fois compressé, le JavaScript peut être servi dans un fichier gzip un peu comme je sers CSS sur mon site:

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


Ce qui précède est Utilisation de ColdFusion pour déterminer si le navigateur peut gérer les fichiers gzip. Dans le cas contraire, il sert les fichiers sans compression.

Cordialement,
Travis Walters
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Septembre 17th, 2009, 3:07 pm

1, 2

Afficher de l'information

  • Total des messages de ce sujet: 16 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 164 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC