Sign in to follow this  
pedrovg

Menu horizontal sem texto?

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

E quanto ao consumo de desempenho?

Porque colocar imagens sobregarregam um pouco a página. Desse jeito fica muito mais pesado.

Entre usar php com includes e desse jeito, qual fica mais rápido. porque n sei se isso fica como um "truque" mas n muito recomendado.

vlw

Share this post


Link to post
Share on other sites

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

Edited by Matheus Matos

Share this post


Link to post
Share on other sites

Aproveitando. Sobre o mesmo menu quero colocar um fundo comum para o menu inteiro. Tem como?

Tenho uma div que circula todo o menu e quero deixar uma borda nele.

Share this post


Link to post
Share on other sites

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

Edited by Matheus Matos

Share this post


Link to post
Share on other sites

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;
}

Edited by pedrovg

Share this post


Link to post
Share on other sites

Opa! Position absolute não suporta right e bottom, apenas left e top!

Então, basta colocar com a distância da esquerda, e a distância do topo, tire o right e o bottom

Vlw

Matheus Matos o.O

Share this post


Link to post
Share on other sites

Tinha apagado esta parte porque resolvi o problema. Deixei com bottom e right mesmo. Só arrumei os z-index e dá certo. Agora q falou, ssso é uma má linguagem??

Share this post


Link to post
Share on other sites

Pelo que vi só com o relative usar bottom e right não funciona. Para mim com absolute funcionou numa boa.

O que quis dizer se não uma daquelas coisas que funcionam mas os padrões que fazem o css não recomendam utilizar, seja por desuso, por problemas etc. Entendeu?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this