Volver al Foro de Diseño de páginas Web

Número Sprite CSS

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

Nota Septiembre 16th, 2009, 1:45 am

Saludos,

Estoy tratando de mejorar el rendimiento de mi sitio web, minimizando las peticiones HTTP.

Tengo un menú Zapatec (zpmenu) que tiene una imagen para cada elemento del menú. Cada una de estas imágenes de
es actualmente una solicitud HTTP. Me gustaría usar un Sprite CSS para el menú de iconos de 16x16. En vez de
de hacer una petición HTTP para cada icono, sólo quisiera hacer una petición HTTP para el sprite.

El siguiente es el Sprite CSS que hice:
Attachments:
menuIcons.png


El menú ha Zapatec temas que toman la CSS y manipularlo con Javascript para
crear el menú. Estoy subiendo el tema CSS aquí:
Attachments:
zpmenu.ace

(63.01 KiB) 181 veces



Código: [ 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.


Hay una línea de código en el archivo de barblue.css que tiene que ver con los iconos:

Código: [ 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.


Estoy dispuesto a pagar 10,00 dólares EE.UU. a la primera persona que los puestos de una solución de
a este problema en este hilo. Sólo el puesto que tiene una solución de trabajo
van a pagar y el cartel debe tener una cuenta PayPal, para obtener el dinero.

Si necesita la URL del sitio web, por favor pm mí o ponerse en contacto conmigo a través de uno de los
en los sitios web en mi firma. No puede estar disponible hasta las 10:30 PM EST
día de hoy, pero estoy trabajando en este sitio web todos los días jueves y debe ser
disponible.

Gracias de antemano por quienes están dispuestos a estudiar este problema.

Atentamente,
Travis Walters
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Septiembre 16th, 2009, 1:45 am

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8925
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Septiembre 16th, 2009, 10:25 am

Creo que si usted pone los iconos de sprites en un formato vertical como he adjuntado a este puesto sería mucho más fácil de lograr como se muestra aquí:

Attachments:
menuIcons_vertical.png


Acabo de prueba con este código y parece que funciona bien:

HTML Código: [ 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>


Usted puede ver el resultado aquí:

ejemplos com / / sprite_test / "> ejemplos / sprite_test /

Espero entender su problema correctamente. Hágame saber si eso ayuda!
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Sep 27, 2007
  • Mensajes: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Nota Septiembre 16th, 2009, 11:26 am

Hey there,

Nunca esperé que el administrador del sitio para trabajar en este problema.

Gracias por mirar este problema otra vez. Conseguir el sprite para trabajar con código HTML ordinario no era el problema sin embargo. Necesito el sprite para trabajar con el menú del Javascript Zapatec conocido como zpmenu.

Voy a publicar un mejor ejemplo para quienes están dispuestos a ayudar.

HTML code below:

Código: [ 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>


La fuente CSS sitio web es a continuación:

Código: [ 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. }


El BarBlue Menú Zapatec. css Código Fuente:

Código: [ 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. }


EJEMPLO: www. Green-reloj. org/test2.cfm (quitar espacios)

Los archivos javascript Zapatec se adjunta en mi anterior post, si alguien tiene que mirar a esos.

Es un menú muy bueno. Sólo espero que las peticiones HTTP puede ser reducido mediante el uso de este Sprite CSS.

Gracias de nuevo por quienes están dispuestos a ayudar y conseguir este trabajo con este menú especial.

Atentamente,
Travis Walters
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8925
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Septiembre 16th, 2009, 11:34 am

Creo que el mismo principio que todavía va a aplicar. El problema con el uso de los sprites en un formato horizontal es que no hay forma de restringir la cantidad de la imagen se muestra ya que usted tiene mucho más espacio horizontal en un sistema de menú de manera que pueda mostrar el texto del menú. Si se aplica el principio he usado anteriormente para el sistema usando un formato vertical sprite el sprite wouldnt todo se muestra como sólo hay espacio tanto vertical como en el espacio horizontal en un menú es mucho más grande. Espero que tenga sentido. Trate de usar un sprite vertical vs el sprite horizontal que ha utilizado antes.

Todo lo que tienes que hacer es cambiar sus códigos de esta manera:

HTML Código: [ 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>


a:

HTML Código: [ 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>


y añadir la CSS, además de sus otras cosas como he mostrado en mi ejemplo. Realmente no importa lo que usted está utilizando para ejecutar sus menús, lo que yo siempre que seguirá funcionando. Sólo tienes que ponerlo todo junto. Su problema no está relacionado con Javascript, sólo el CSS y HTML.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Sep 27, 2007
  • Mensajes: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Nota Septiembre 16th, 2009, 12:46 pm

Hey there,

Por favor, consulte la página de ejemplo siguiente:

www.green-watch.org/test2.cfm

Como se verá, el ejemplo funciona para los elementos LI que no tienen submenús - que no es si se coloca en el menú. Cuando se coloca en el menú, no aparece nada en absoluto.

Usando firebug en Firefox, parece que el menú se cambia por JavaScript en varias tablas. No estoy seguro de si la clase está aún siendo reconocida por el menú. En este punto, sé que el tema barblue.css desempeña un papel clave.

Código: [ 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. }


Tengo un tiempo difícil con la CSS, ya que es sin JavaScript jugando un papel :)

Gracias de nuevo por alguien que tiene una solución a esto.

Atentamente,
Travis Walters

PS. Tengo una liga de bowling hasta tarde esta noche. Estará de regreso después de las 10:30 CEST y estoy todo el día de mañana.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8925
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Septiembre 16th, 2009, 1:12 pm

Eché un vistazo para usted. El background-position se muestran en realidad correctamente y que se hereda, sin embargo, la imagen realmente css sprite no se hereda. Pruebe este CSS:

CSS Código: [ 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. }


y luego el código HTML para el cambio real a este formato:

HTML Código: [ 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>


Cuando la sprite_image estaría primero en la clase, y luego el sprite_name reales después de la clase (que se refiere a la parte real del sprite que quieres ver).

Esperamos que tenga sentido.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Registrado: Feb 10, 2004
  • Mensajes: 13455
  • Loc: Florida
  • Status: Offline

Nota Septiembre 16th, 2009, 7:47 pm

Im no está seguro de cuál de los navegadores esto funcionará y sólo experimentó brevemente hace un año, por lo que soy reacio a mencionar, pero un gif transparente debe dejar que el brillo de fondo de una <img> elemento a través.


Volviendo al HTML original en su primera entrada.
HTML Código: [ 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>


Tal vez este aspecto.
HTML Código: [ 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 Código: [ 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. }


Yo usaría un pixel 16x16 "claro. gif "en vez de un 1x1 como usted podría estar inclinado a hacer a fin de reducir la probabilidad de ad-bloqueantes confundirlo como un píxel de seguimiento.

También quiero seguir con la orientación horizontal desde la <img> elemento se definen las dimensiones del icono y no hay posibilidad de que el fondo está fuera de posición.

Pero la principal razón que me gusta seguir con imágenes de ancho en lugar de imágenes de altura es imágenes de alta son más grandes que las imágenes de ancho .
Theres un comentario anónimo que suena como una Explicación plausible al final de ese puesto.
Quote:
Su fiesta de fuegos artificiales, ni tampoco el formato PNG, de su realidad debido a la forma en las imágenes se almacenan.

Cada imagen es una serie de píxeles que componen una línea y al final de cada línea que habría un "regreso" de carácter como en la escritura de un párrafo. Menos de líneas en una imagen amplia significa que el tamaño de archivo mucho más pequeño.


Este enfoque requeriría dos imágenes, y sprite.png clear.gif, ya que el navegador sólo debe comprobar clear.gif la primera vez que viene a través de ella, pero thats todavía mucho mejor que 21.
Strong with this one, the sudo is.
  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Sep 27, 2007
  • Mensajes: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Nota Septiembre 17th, 2009, 12:29 am

Hey there,

Estoy convencido de que la "zpmenu.js" archivo JavaScript está manipulando el UL HTML y elementos LI y convertirlos en un menú giró en torno a las mesas. Lo comprobé esta noche sobre Firebug en Firefox en la vista HTML de la página de ejemplo que el programa de instalación.

El truco para conseguir este menú para que funcione correctamente es mediante la mejora de su archivo de Javascript para colocar una clase personalizada para cada icono. Me voy a basar el nombre de la clase en el nombre del icono y deshacernos de la extensión PNG. < br>
Una vez hecho esto, creo que el código CSS sprite va a funcionar. Dejaré que ambos saben cómo progresa.

Atentamente,
Travis Walters
  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Sep 27, 2007
  • Mensajes: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Nota Septiembre 17th, 2009, 3:54 am

Saludos,

He actualizado algunas líneas de código JavaScript en el archivo de zpmenu.js.

El problema era que los nombres de clases no se tuvieron en cuenta cuando el código de JavaScript manipula la UL y los elementos de LI y los convirtieron en elementos de la tabla.

He cambiado:

Código: [ 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. }


a lo siguiente:

Código: [ 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. }


También cambié el texto siguiente:

Código: [ 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. }


a lo siguiente:

Código: [ 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. }


Así que básicamente hay dos líneas de código JavaScript en el archivo de zpmenu.js que estaba tirando conmigo.

Este pequeño proyecto se ha completado.

Para algunos ejemplos de gran Bigwebmaster, yo os envío $ 5 dólares a través de PayPal, si me dan una dirección de correo electrónico que puede enviar a. El total $ 10 dólares no se concedió debido a los cambios que se necesitan Javascript.

Además, joebert, yo también te enviará $ 5 dólares por proporcionar la punta en la transpare no GIF. Después de ajustar el javascript se hizo, que necesitaba no un transpare imagen para obtener la imagen de fondo a la pantalla correcta.

Código: [ 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>


El sprite horizontal trabajado bien. No tenía necesidad de estar en posición vertical.

Espero que esto ayude a otras personas con este problema.

Gracias de nuevo por toda su ayuda.

Atentamente,
Travis Walters
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8925
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Septiembre 17th, 2009, 12:03 pm

No creo que haya terminado. Acabo de comprobar su sitio en IE8 y su un completo desastre con sus menús. Le aconsejo que comprobar. Con todo lo que FF se ve muy bien.

No se preocupe por el dinero de Travis, estoy feliz de que eran capaces de entender algunas cosas :)

No espero que nadie se me paga para ayudar aquí, uno de los objetivos con Ozzu es tener una comunidad de miembros se ayudan entre sí. Eso depende de usted si usted quiere pagar a otros si, pero voy a pasar.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8925
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Septiembre 17th, 2009, 12:12 pm

Aquí está el error de JavaScript También estoy recibiendo en IE8:

Código: [ 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 Usuario
  • Registrado: Jul 25, 2005
  • Mensajes: 2735
  • Loc: Nashville, TN
  • Status: Offline

Nota Septiembre 17th, 2009, 12:12 pm

twalters, si pudiera hacer una sugerencia, puede tomar los $ 10 y lo puso hacia una composición y ayudar a mantener a nuestra comunidad. Las cuotas son un contrato por un tiempo y ya comienzan en sólo $ 15. Puedes echar un vistazo a los honorarios y los beneficios aquí .
I'd love to change the world, but they won't give me the source code.
  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Sep 27, 2007
  • Mensajes: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Nota Septiembre 17th, 2009, 1:57 pm

Hey there,

Buenas capturas en el problema de IE. Got to love .. Microsoft jajaja

Dos piezas actualización de código a continuación:

Código: [ 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. }


y ..

Código: [ 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;


Hubo un problema entre "className", que trabajó en el IE y "clase", que funciona en todos los navegadores de otros. Sin embargo, la object.ClassName parece que funciona a través de navegadores.

Increíble lo difícil que era algo muy simple de hacer.

Gracias de nuevo por aquellos que me han ayudado a solucionar este problema. Es muy apreciado.

He estado usando un programa llamado YSlow y PageSpeed para obtener el mejor rendimiento de mi sitio web. Sigo siendo clasificado un grado D de modo que hay mucho que hacer todavía para la plantilla. Supongo que el próximo será el de minimizar las y combinar todos los archivos JavaScript de alguna forma.

Atentamente,
Travis Walters
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8925
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Septiembre 17th, 2009, 2:38 pm

No estoy seguro de lo que se utiliza para comprimir y minimizar las su JavaScript y CSS, pero yo uso esta y absolutamente love it:

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

Esperamos que ayuda si no eran conscientes de ello. En realidad puede descargarlo aquí:

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

Usted necesita tener Java instalado en su máquina para usarlo.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • twalters84
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Sep 27, 2007
  • Mensajes: 161
  • Loc: Mount Savage, MD
  • Status: Offline

Nota Septiembre 17th, 2009, 3:07 pm

Hey there,

Me preguntaba si ese programa puede manejar archivos JavaScript que se llaman dentro de un archivo JavaScript?

Por ejemplo, scriptaculous.js es una biblioteca común que contiene la Web 2.0 muchos servicios públicos. Hay un buen JavaScript pocos archivos llamados desde el archivo principal.

¿Tiene el compresor YUI combinar esos archivos tan bien o qué tengo que hacer ajustes JavaScript antes de comprimir los archivos?

Lo mismo ocurre con el menú Zapatec. Pide unos 6 diferentes archivos JavaScript de la zpmenu.js archivo principal.

Soy muy nuevo en la compresión de archivos. Yo sé, una vez comprimido, el código JavaScript se puede servir en un archivo GZIP parecido sirvo CSS en mi sitio web:

Código: [ 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>


Lo anterior es Utilización de ColdFusion para determinar si el navegador puede manejar archivos GZIP. Si no, sirve a los archivos sin compresión.

Atentamente,
Travis Walters
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Septiembre 17th, 2009, 3:07 pm

1, 2

Publicar Información

  • Total de mensajes en este tema: 16 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 105 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC