Publicado em 25 de mai.

[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)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Diego Macêdo· 25 de mai.

Bom, consegui aqui sozinho resolver o problema, só que estou com outra dúvida:

HTML:

<div id="menu_sup">
<ul id="menu_superior">
 <li><a href="#principal" class="principal"><span>Principal</span></a></li>
 <li><a href="#quemsomos" class="quemsomos"><span>Quem Somos</span></a></li>
 <li><a href="#oquefazemos" class="oquefazemos"><span>O Que Fazemos</span></a></li>
 <li><a href="#ondeestamos" class="ondeestamos"><span>Onde Estamos</span></a></li>
 <li><a href="#parceiros" class="parceiros"><span>Parceiros</span></a></li>
 <li><a href="#faleconosco" class="faleconosco"><span>Fale Conosco</span></a></li>
 </ul>
</div>

CSS:

#menu_sup{
	height:34px;
	margin-left: auto;
	margin-right: auto;
	width:100%;
}
#menu_superior{
	margin-left:auto;
 margin-right:auto;
 margin-top:0;
 display:table;
	background-image:url(../imagens/bg_menu_sup.jpg);
	background-position:top left;
	background-repeat:repeat-x;
	height:34px;
	width:100%;
}

#menu_superior li{ float: left; list-style: none; } #menu_superior li a{

	display: block;
	height: 34px;
	background-image: url(../imagens/menu_superior.gif);
	background-repeat:no-repeat;
}

#menu_superior li a span{ display: none; }

#menu_superior li .principal{ width: 111px; background-position: 0px 0px; }
#menu_superior li .principal:hover{ width: 111px; background-position: 0px -34px; }

#menu_superior li .quemsomos{ width: 132px; background-position: -111px 0px; }
#menu_superior li .quemsomos:hover{ width: 132px; background-position: -111px -34px; }

#menu_superior li .oquefazemos{ width: 151px; background-position: -243px 0px; }
#menu_superior li .oquefazemos:hover{ width: 151px; background-position: -243px -34px; }

#menu_superior li .ondeestamos{ width: 151px; background-position: -395px 0px; }
#menu_superior li .ondeestamos:hover{ width: 151px; background-position: -395px -34px; }

#menu_superior li .parceiros{ width: 116px; background-position: -546px 0px; }
#menu_superior li .parceiros:hover{ width: 116px; background-position: -546px -34px; }

#menu_superior li .faleconosco{ width: 143px; background-position: -662px 0px; }
#menu_superior li .faleconosco:hover{ width: 143px; background-position: -662px -34px; }

Como eu faço para centralizar este CSS Sprite dentro da DIV#menu_sup?

William Bruno· 25 de mai.

#menu_superior{
 margin-left:auto;
 margin-right:auto;
 margin-top:0;
 width:100%;

} meio dificil centralizar um elemento de 100% de largura não?

defina uma largura em pixels, que os margins automáticos laterais, farão o trabalho.

Diego Macêdo· 25 de mai.

Desculpa William, mas bem na hora que você mandou a resposta eu editei o post.

Eu estou querendo adicionar aquela imagem de fundo com 100% da tela na largura, ou seja, quero que ele pegue de um lado da página até o outro exibindo o fundo laranja com aquela imagem. E emcima deste background, ele exiba o menu de forma centralizada.

Veja que eu acrescentei lá no HTML uma div #menu_sup e também no CSS.

Resultado deveria ser esse aqui:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img412.imageshack.us/img412/5732/menubf.jpg&key=538e0e6ff56c4e9307dac004f999197cb94d288d14e679fc349908bb66d602f4" alt="Imagem Postada" />

William Bruno· 25 de mai.

coloque essa imagem degradê laranja, em um outro elemento ou como background do body

Diego Macêdo· 25 de mai.

É verdade William, eu nem tinha pensado nessa possibilidade. A pessoa de cabeça quente num resolve nada mesmo.

Muito obrigado, ficou do jeito que eu estava planejando!

Abraços!