[Resolvido] Errando no CSS Sprite
Estou tentando criar este menu usando CSS Sprite:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img97.imageshack.us/img97/9189/menusuperior.gif&key=e3dedbe696ed07ccd9ebec1952116a554a658bae5f1617b897b44f7ccaf6f258" alt="Imagem Postada" />
Com este fundo se repetindo na horizontal:
http://img256.imageshack.us/img256/1737/bgmenusup.jpg
Tentei fazer o menu em um arquivo separado pra depois fazer a junção no site mesmo. O que eu consegui fazer foi ele criar os "blocos" de cada item do menu, mas as imagens não estão aparecendo devidamente.
CSS:
#menu_superior_bg{
width:100%;
height:34px;
float:left;
background-color:#F90;
background-image:url(estatico/imagens/bg_menu_sup.jpg);
}
#menu_superior{
background-image:url(estatico/imagens/bg_menu_sup.jpg) 0 0;
width: 803px;
margin: 0;
padding: 0;
}#menu_superior li{
display: inline;
}#menu_superior li a{
background-image:url(estatico/imagens/menu_superior.gif) no-repeat 0 0;
float: left;
height: 34px;
text-indent: -10000px;
margin-right: 0;
}#menu_superior .ms_principal{background-position: 0px -34x; width: 110px;}
#menu_superior .ms_principal:hover{background-position: 0px 0px;}
#menu_superior .ms_quemsomos{background-position: 112px -34px; width: 132px;}
#menu_superior .ms_quemsomos:hover{background-position: -110px 0px;}
#menu_superior .ms_oquefazemos{background-position: 244px -34px; width: 148px;}
#menu_superior .ms_oquefazemos:hover{background-position: 244px 0px;}
#menu_superior .ms_ondeestamos{background-position: 396px -34px; width: 151px;}
#menu_superior .ms_ondeestamos:hover{background-position: 396px 0px;}
#menu_superior .ms_parceiros{background-position: 549px -34px; width: 115px;}
#menu_superior .ms_parceiros:hover{background-position: 541px 0px;}
#menu_superior .ms_faleconosco{background-position: 666px -34px; width: 142px;}
#menu_superior .ms_faleconosco:hover{background-position: 666px 0px;}
HTML:
<body>
<div id="menu_superior_bg">
<ul id="menu_superior">
<li><a href="principal.php" class="ms_principal">Principal</a></li>
<li><a href="#" class="ms_quemsomos">Quem Somos</a></li>
<li><a href="#" class="ms_oquefazemos">O Que Fazemos</a></li>
<li><a href="#" class="ms_ondeestamos">Onde Estamos</a></li>
<li><a href="#" class="ms_parceiros">Parceiros</a></li>
<li><a href="#" class="ms_faleconosco">Fale Conosco</a></li>
</ul>
</div>
</body>Discussão (5)
Carregando comentários...