Ir para conteúdo
Fórum Script Brasil
  • 0

Menu horizontal sem texto?


pedrovg

Pergunta

Oi, tentei fazer um menu horizontal sem texto. Criei os ícones dos botões e queria deixá-lo como background do menu para a pessoa clicar neles. Funcionou. Mas quando tiro o texto do menu o texto e deixo só o fundo ele não é mais executado. Nem aparece.

Segue o código.

Parte CSS:

ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:90px;
text-decoration:none;
color:white;
background-color:none;
padding:0px 4px;
border-right:none;
background-repeat:no-repeat;
background-position:16px 6px; 
padding-left:14px;
}
a.home{
    background-image:url('a1.png');
}
a.teste{
    background-image:url('a2.png');
}
a.contato{
    background-image:url('a2.png');
}



a:hover {background-color:#ff3300}
li {display:inline}
Dentro do body coloquei assim:
<div class="menu"><ul>
<li></li>
<li><a  class="home" href="#"></a></li>
<li><a  class="teste" href="#"></a></li>
<li><a  class="contato" href="#"></a></li>
</ul>
</div>

Obrigado:)

Link para o comentário
Compartilhar em outros sites

14 respostass a esta questão

Posts Recomendados

  • 0

cara isso é meio lógico não acha? Se o ícone está como background, ele só vai ser exibido quando estiver algo na li. Ao invés de deixar o link vazio, porquê não tira ele do background e coloca a imagem no link? Tente assim:

<div class="menu">

<ul>

<li><a class="home" href="#"><img src="a1.png" border="0" /></a></li>

<li><a class="teste" href="#"><img src="a2.png" border="0" /></a></li>

<li><a class="contato" href="#"><img src="a3.png" border="0" /></a></li>

</ul>

</div>

qualquer coisa posta aí!

Vlw

Matheus Matos

Link para o comentário
Compartilhar em outros sites

  • 0

Não tinha pensado por esse lado. hehe Valeu.

O que estava tentando fazer é definir numa css só todos os backgrounds. para não ter q mudar páginas por páginas se quiser mudar o ícone.

Pensei agora em deixar o texto transparente, mas o background fica também.

Não tem um jeito de ter que mexer só num arquivo para alterar todas as outras? Com php sei que dá, mas não sei como fazer com css este menu.

vlw

Link para o comentário
Compartilhar em outros sites

  • 0

hm... cria uma imagem transparente! Assim:

<div class="menu">

<ul>

<li><a class="home" href="#"><img src="icone_transparente.png" border="0" /></a></li>

<li><a class="teste" href="#"><img src="icone_transparente.png" border="0" /></a></li>

<li><a class="contato" href="#"><img src="icone_transparente.png" border="0" /></a></li>

</ul>

</div>

aí basta definir via css como você fazia antes, o ícone como background!

Vlw

Matheus Matos

Link para o comentário
Compartilhar em outros sites

  • 0

mas não ficará pesado não... tipo, você cria apenas uma imagem transparente, o que é super leve, do tamanho do ícone que você vai usar, 25x25 30x30 ceilá você que sabe...

é apenas uma imagem transparente, e não várias, ela está sendo pedida ao servidor várias vezes, mais vai ser carregada apenas uma vez, após ela carregar, todas os lugares que ela é solicitada, não vai ser carregada novamente...

quanto à isso não vai influir quase que nada no seu site....

Vlw

Matheus Matos

Editado por Matheus Matos
Link para o comentário
Compartilhar em outros sites

  • 0

Opa... claro tem sim no css da div coloque:

para background:

background: url(imagem de fundo.gif) repeat;

explicando:

repeat = repete a imagem

repeat-x = repete horizontalmente a imagem

repeat-y = repete verticalmente a imagem

no-repeat = a imagem não se repete!

para bordas:

border: [estilo] [tamanho] [cor] assim:

border: solid 1px #FF0000;

o CSS3 suporta bordas com imagem, mais não é aconselhável usar ainda por causa dos navegadores, que dizer, mais precisamente por causa do IEca que não suporta o querido CSS3, apenas Firefox, Chrome, Opera e os restantes mais famosos!

Vlw

Matheus Matos o.O

Editado por Matheus Matos
Link para o comentário
Compartilhar em outros sites

  • 0

Valeu. Deixa fazer outra pergunta hehe. Esse é o primeiro site que estou fazendo com todos os detalhes, antes de parar no meio hehe, por isso aparecem algum problemas.

Fiz uma div para o rodapé. Funciona muito bem. Aí fiz mais duas divs que vou colocar dentro do rodape para colocar uma imagem, uma fica na esquerda e outra na direita. Mas só a da esquerda aparece, a outra fica atrás. Tentei mexer de todo jeito no z-index e nada.

div.imagem3{
    width:230px;
    height: 260px;
    position:absolute;
    left: 0px;
    bottom: 0px;
    background-image:url('imagem2.png');
    z-index:2;
}

div.imagem4{
    width:190px;
    height: 280px;
    position: absolute;
    right: 5px;
    bottom: 0px;
    background-image:url('imagem1.png');
    z-index:3;
}

Editado por pedrovg
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...