Menu horizontal sem texto?

[pedrovg]

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

[Matheus Matos]

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

[pedrovg]

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

[Matheus Matos]

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

[pedrovg]

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

[Matheus Matos]

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 Setembro 23, 2009 por Matheus Matos

[pedrovg]

Valeu.

[pedrovg]

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.

[Matheus Matos]

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 Setembro 24, 2009 por Matheus Matos

[pedrovg]

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 Setembro 24, 2009 por pedrovg

[Matheus Matos]

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

[pedrovg]

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??

[Matheus Matos]

má linguagem? Não entendi o que você quis dizer.

[pedrovg]

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?

[Matheus Matos]

não não... isso não está fora das regras do CSS não! Usar absolute utilizando-se right e bottom não está fora dos padrões CSS da W3C. Para saber mais se o seu site está válido, navegue até esse link:

http://jigsaw.w3.org/css-validator/

Vlw

Matheus Matos o.O