Buenas, me habia exforzado mucchisimo explicando mi problema, y derrepente se me cerro el explorador, por lo que ahora voya resumir un poco. =)
yo no se nada de css y queria practicar, el punto es que vi un efecto muy bueno en
paypal.com el efecto que tiene al pasar el mouse por los "botones" que en css me di cuenta investigando que se llama css sprite.
el punto es que me copie toda la pagina de paypal de modo que se guardo el archivo .css ..
el cual poco apoco fuy estudiando y resumiendo.. :S y llege ala conclucion que la parte que hace ese efecto es la siguiente:
Código:
#navGlobal {float:right; margin-top:.45em; font-size:.9em; text-align:right;}
#navGlobal li {display:inline; border-right:1px solid #333; padding-left:.9em;}
#navGlobal li a {margin-right:1em;}
#navGlobal .new {padding-right:.5em; font-weight:bold; font-style:italic; color:#ff7900;}
#navGlobal .last {border:none;}
#navPrimary {clear:both; z-index:2; position:absolute; top:100px; width:100%; min-height:6px;}
#navPrimary.empty {top:92px; height:6px; background:url(nav_sprite.gif) left 0 repeat-x;}
#navPrimary ul {overflow:hidden; margin:0; padding:0 0 0 10px; background:url(nav_sprite.gif) left 1.8em repeat-x; list-style-type:none;}
#navPrimary ul.secondary {margin-bottom:2em;}
#navPrimary ul li {float:left; margin:.45em .45em 0 0; padding:.27em .9em; background:#1A4773 url(nav_sprite.gif) left -75px repeat-x;}
#navPrimary ul li:hover, #navPrimary ul li.hover {background:#1A4773 dir(nav_sprite.gif) left -197px repeat-x;}
#navPrimary ul li a {display:block; color:#fff; font-weight:bold; text-decoration:none; text-align:center;}
#navPrimary ul li.active {margin-top:0; border-left:1px solid #ccc; border-right:1px solid #ccc; padding:.7em .9em .5em .9em; background:#f8f8f8 url(nav_sprite.gif) left -136px repeat-x;}
#navPrimary ul li.active:hover, #navPrimary ul li.active {background:#f8f8f8 url(nav_sprite.gif) left -136px repeat-x;}
#navPrimary ul li.active a {color:#333;}
#navPrimary ul li ul {display:none;}
#navPrimary ul li.active ul {display:block; overflow:visible; width:100%; position:absolute; top:2.3em; left:0; padding:0; background:url(nav_sprite.gif) left -2.15em repeat-x;}
#navPrimary ul li.active ul li {margin:0; padding:.45em .9em .8em .9em; background:transparent none;}
#navPrimary ul li.active ul li a {display:block; color:#1C4266; font-weight:normal;}
#navPrimary ul li.active ul li a:hover, #navPrimary ul li.active ul li a:focus {text-decoration:underline;}
#navPrimary ul li.active ul li.active:hover, #navPrimary ul li.active ul li.active {border:none; background:none;}
#navPrimary ul li.active ul li.active:hover a {text-decoration:underline;}
#navPrimary ul li.active ul li.active a {color:#333; font-weight:bold;}
#navPrimary ul li.active ul li.active:hover ul li a {text-decoration:none;}
#navPrimary ul li ul li ul, #navPrimary ul li.active ul li ul {display:none;}
#navPrimary ul li.active ul li:hover ul, #navPrimary ul li.active ul li.hover ul {display:block; z-index:10; width:auto; left:auto; margin:-.1em 0 0 -.9em; border:1px solid #ccc; border-top:none; padding:0 1em; background:#fff;}
#navPrimary ul li.active ul li:hover ul li, #navPrimary ul li.active ul li.hover ul li {float:none; margin:1em 0; padding:0;}
#navPrimary ul li.active ul li:hover ul li a, #navPrimary ul li.active ul li.hover ul li a {display:inline; text-align:left;}
#navPrimary ul li.active ul li:hover ul li a:hover, #navPrimary ul li.active ul li.hover ul li a:hover {text-decoration:underline;}
#navPrimary ul li.active ul li.active ul li a {color:#1C4266; font-weight:normal;}
las especificamente la que esta marcado con rojo. la que hace referencia a el marco Navprymary . (ya que hay se encuentran lso Botones que hacen de menu.
para mas referencia metance en
www.paypal.com y vean los botones. no es necesario loguearse ya que el efecto esta en la pagina principal.
y pues exactramente esas son las coordenadas las -75 y la -197.
que son la parte d ela imagen que es mas azul y luego la -197 la parte d ela imagen mas brillante..
ya eh comprobado esas coordenadas con el siguiente codigo:
Código HTML:
<style type="text/css">
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('nav_sprite.gif') 0 -75px;}
#home a:hover{background: url('nav_sprite.gif') 0 -197px;}
</style> el cual puedo poner directamente o guardar dicho codigo en un archivo .css y llamarlo con:
Código HTML:
<link media="screen" rel="stylesheet" type="text/css" href="hola.css">
debo aclarar que de igual forma llamo al archivo css que me eh copiado de paypal. pero no me funciona el efectooo eh hay mi pregunta.. =( que estara pasando.. u.u
ademas que tambien el codigo como podran ver, si le doy la class active. se pone de color amarillo que seria la coordenada -136. la cual con el over sigue siendo -136 que se queda igual pues =)
eso es lo que eh resumido por cuenta propia diganme que tal? je y por que no me agarra el efecto.. =( .. u.u .. esa es mi duda..