2 replies to this topic

[Felipe.v]

Boa noite amigos!! beleza? espero que bem..

gente, estou tentando fazer um menu, utilizando uma imagem unica com a parte de cima A e a de baixo Ahover
usando a tecnica de rollover e os posicionamentos la..

mas nao esta dando certo,.. voces poderiam me ajudar??

primeiro erro : aparece uma bola na frente...
segundo erro: no firefox ainda sai o texto...
terceiro erro: eu vejo que no fundo a imagem faz rollover mas nao aparece na frente na primeira...
quarto erro: nao esta pegando a altura da imagem por completo, que no caso é 39px


Segue abaixo o código...

[codebox]<style type="text/css">

body
{
background: #000;
color: #CCCCCC;
font-size: 12px;
font-family: Verdana, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}

#pagina
{
width: 682px;
height: 100%;
text-align:left;
margin:0 auto 0 auto; /*centraliza o conteudo*/
}


#topo
{
width: 682px;
height: 360px;
background:url('img/topo.png') no-repeat top center;
}

#menu
{
position: relative;
width: 682px;
height: 39px;
background: url('img/menuzao.gif') no-repeat 0 0;
}

#menu ul
{
list-syle: none;
text-indent: -9999em;
}

#menu li
{
position: absolute;
top: 0;
height: 39px;
}

#menu li a
{
display: block;
text-decoration: none;
width: 100%;
heigth: 100%;
top: 0;
}

#menu li a span
{
display: block;
position: absolute;
width: 100%;
heigth: 100%;
top: 0;
cursor: pointer;
}

#menu ul li a:hover
{
z-index:1000;
}

#historia { width: 118px; left: 0px; }
#historia a:hover { background: url('img/menuzao.gif') no-repeat 0 -39px; }
#historia a:span { background: url('img/menuzao.gif') no-repeat 0 0; }

#discografia { width: 132px; left: 118px; }
#discografia a:hover { background: url('img/menuzao.gif') no-repeat -118px -39px; }
#discografia a:span { background: url('img/menuzao.gif') no-repeat -118px 0; }

#fotos { width: 89px; left: 250px; }
#fotos a:hover { background: url('img/menuzao.gif') no-repeat -250px -39px; }
#fotos a:span { background: url('img/menuzao.gif') no-repeat -250px 0; }

#videos{ width: 94px; left: 339px; }
#videos a:hover { background: url('img/menuzao.gif') no-repeat -339px -39px; }
#videos a:span { background: url('img/menuzao.gif') no-repeat -339px 0; }

#wallpapers{ width: 130px; left: 433px; }
#wallpapers a:hover { background: url('img/menuzao.gif') no-repeat -433px -39px; }
#wallpapers a:span { background: url('img/menuzao.gif') no-repeat -433px -0; }

#contato { width: 119px; left: 563px; }
#contato a:hover { background: url('img/menuzao.gif') no-repeat -563px -39px; }
#contato a:span { background: url('img/menuzao.gif') no-repeat -563px 0; }


#conteudo
{
width: 682px;
height: 220px;
background:url('img/conteudo.png') no-repeat;
}


</style>[/codebox]




ESSE É O HTML....


[codebox] <div id="menu">
<ul>
<li id="historia"><a href="#"><span></span>Historia</a></li>
<li id="discografia"><a href="#"><span></span>Discografia</a></li>
<li id="fotos"><a href="#"><span></span>Fotos</a></li>
<li id="videos"><a href="#"><span></span>Vídeos</a></li>
<li id="wallpapers"><a href="#"><span></span>Wallpapers</a></li>
<li id="contato"><a href="#"><span></span>Contato</a></li>
</ul>
</div>


<div id="conteudo">
</div>[/codebox]



Desculpe se o codigo esta poluido,.. mas é que ainda estou em faze de aprendizado..

a proposito amigos a imagem que estou usando esta em anexo!!!

Peço encarecidamente se alguem pode me ajudar...

PS,.. li varios tutoriais.. e nada =\

Atenciosamente Felipe


ninguem amigos?
=\

Attached Files

•  menu_03.gif   50.33KB   6 downloads

Edição feita por: Édipo Costa Rebouças, 24/07/2009, 20:28.

[Édipo Costa Rebouças]

Olha amigo, esta muito estranho o código, eu nunca vi isso:

#fotos a:span

o : depois do a normalmente é para se chamar uma pseudo-classe e não um elemento que não sei o sei intuito com isso...

Eu vou tentar te ensinar esse técnica que você esta tentando usar, começando pelo nome:

CSS Sprites

Que consiste em jogar varias imagens numa só e ir mudando o background-position.

exemplo

<div id="myMenu">
<a href="java script:;" class="bot_home">Home</a>
<a href="java script:;" class="bot_laranjas">Laranjas</a>
</div>

Você teria que usar uma imagem, vamos dar o nome de bot_myMenu_sprits.gif com os dois botões

ai no css formatamos os a só com essa imagem

/* vamos definir caractristicas gerais das tags de link */
#myMenu a{
display: block; /* para poder definir height e width */
float: left; /* para os botões ficarem lado a lado */
text-indent: -9999px; /* Some com o texto */
background-image: url(bot_myMenu_sprits.gif);
}

/* uma a uma */
#myMenu a.bot_home{
width: (sualargura)px; height: (suaaltura)px;
background-position: -(puxa pra cima)px -(puxa pra esquerda)px;
}

#myMenu a.bot_laranjas{
width: (sualargura)px; height: (suaaltura)px;
margin: (cima)px (direita)px (baixo)px (esquerda)px;/ * Caso for necessario margins - 
não espefique margin para esquerda com float: left, ou margin pra direita com float: right, pois pode dar bug */
background-position: -(puxa pra cima)px -(puxa pra esquerda)px;
}

Para mudar a imagem no hover seria só adicionar um nome background-position com a pseudo-classe hover:

#myMenu a.bot_home:hover{
background-position: -(puxa pra cima)px -(puxa pra esquerda)px;
}

#myMenu a.bot_laranjas:hover{
background-position: -(puxa pra cima)px -(puxa pra esquerda)px;
}

tem um projeto que estou trabalhando, mas que ainda não foi para o ar, que usa css sprits, um trexo de codigo funcional eu posso te mostrar(ele usa o active e o focus do teclado):

#box_menu_principal{
	position: absolute; top: 73px; left: 331px;
	width: 647px; height: 13px;
}
	#box_menu_principal ul{ width: 647px; height: 13px; }
		#box_menu_principal ul li{ float: left; }
			#box_menu_principal ul li a{
					display: block;
					height: 13px;
					text-indent: -9999px;
					outline: 0;
					background-image: url(../images/bot_menu_principal_sprite.gif);
			}
			#box_menu_principal a.bot_mundo{ width: 54px; margin-right: 99px; background-position: 0 0; } #box_menu_principal a.bot_mundo:active, #box_menu_principal a.bot_mundo:focus, #box_menu_principal a.bot_mundo:hover, #box_menu_principal a.bot_mundo.selected{ background-position: 0 13px; }
			#box_menu_principal a.bot_models{ width: 56px; margin-right: 103px;  background-position: -64px 0; } #box_menu_principal a.bot_models:active, #box_menu_principal a.bot_models:focus, #box_menu_principal a.bot_models:hover, #box_menu_principal a.bot_models.selected{ background-position: -64px 13px; }
			#box_menu_principal a.bot_tv{ width: 18px; margin-right: 98px; background-position: -130px 0; } #box_menu_principal a.bot_tv:active, #box_menu_principal a.bot_tv:focus, #box_menu_principal a.bot_tv:hover, #box_menu_principal a.bot_tv.selected{ background-position: -130px 13px; }
			#box_menu_principal a.bot_galeria{ width: 57px; margin-right: 99px; background-position: -158px 0; } #box_menu_principal a.bot_galeria:active, #box_menu_principal a.bot_galeria:focus, #box_menu_principal a.bot_galeria:hover, #box_menu_principal a.bot_galeria.selected{ background-position: -158px 13px; }
			#box_menu_principal a.bot_contato{ width: 63px; background-position: -225px 0; } #box_menu_principal a.bot_contato:active, #box_menu_principal a.bot_contato:focus, #box_menu_principal a.bot_contato:hover, #box_menu_principal a.bot_contato.selected{ background-position: -225px 13px; }

[Felipe.v]

nossa brother!! caram é isso mesmo que eu estava tentando fazer,.. mas eu estava viajando

errei em varios lugares, inclusive naquele lance que voce falou ( : ) nao deve ser usado antes do span

não é possivel que eu nao tinha visto errinhos como aquele =\

olha só Édipo, muito obrigado pela ajuda e explicação,.. me ajudo bastante....

agora vou disponibilizar o meu codigo terminado e funcionando pro pessoal aprender tambem...

se tiver algum erro me fale

abraçossss!!

Felipe

Resolvido.


[codebox]#menu
{
position:absolute;
width:682px;
height:39px;
background:url('img/menuzao.gif') no-repeat 0 0;
}

#menu ul
{
list-style:none;
}

#menu li
{
position:absolute;
top:0;
height:39px;
}

#menu li a
{
position:absolute;
display:block;
width:100%;
height:100%;
top:0;
cursor:pointer;
}

#menu li a span
{
position:absolute;
display:block;
width:100%;
height:100%;
top:0;
}


#historia{
width:118px;
left:0;
}
#discografia{
width:132px;
left:118px;
}
#fotos{
width:89px;
left:250px;
}
#videos{
width:94px;
left:339px;
}
#wallpapers{
width:130px;
left:433px;
}

#contatos{
width:119px;
left:563px;
}

#historia a span{
background:url('img/menuzao.gif') no-repeat 0 0;
}
#discografia a span{
background:url('img/menuzao.gif') no-repeat -118px 0;
}
#fotos a span{
background:url('img/menuzao.gif') no-repeat -250px 0;
}

#videos a span{
background:url('img/menuzao.gif') no-repeat -339px 0;
}

#wallpapers a span{
background:url('img/menuzao.gif') no-repeat -433px 0;
}

#contatos a span{
background:url('img/menuzao.gif') no-repeat -563px 0;
}

#menu ul li a:hover{
z-index:1000;
}

#historia a:hover span{
background:url('img/menuzao.gif') no-repeat 0 -39px;
}
#discografia a:hover span{
background:url('img/menuzao.gif') no-repeat -118px -39px;
}
#fotos a:hover span{
background:url('img/menuzao.gif') no-repeat -250px -39px;
}
#videos a:hover span{
background:url('img/menuzao.gif') no-repeat -339px -39px;
}
#wallpapers a:hover span{
background:url('img/menuzao.gif') no-repeat -433px -39px;
}
#contatos a:hover span{
background:url('img/menuzao.gif') no-repeat -563px -39px;
}
[/codebox]