problemas com css

[ju_rezende]

Olá pessoal estou fando o menu do meu site usando css, ele tá funcionando certinho o único probleme é que o testo não fica centralizado, vou deixar o link, para que consigam ver o problem e vou postar meu código se alguém puder ajudar fico grata.

LINK MENU

meu código css

/* CSS Document */

#menu a

{

display:block;

width: 194px;

height:20px;

background-image:url(images/bg_prod_up.gif);

font-family:font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

color: #000000;

text-decoration:none;

}

#menu a:hover

{

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

color: #FFFFFF;

background-image:url(images/bg_prod_down.gif)

}

#menu .selecionado {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

color: #FFFFFF;

background-image:url(images/bg_prod_down.gif)

}

meu codigo html

<table id="col-um-prod" width="194" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="194" height="22" background="images/bg_prod.gif" alt=""></td>

</tr>

<!--topo prdutos -->

<tr>

<td width="194" valign="bottom" alt="">

<div id="menu">

<a href="categoria.asp" ><img src="images/transp.gif" width="15" height="1"/ border="0">Amino&aacute;cidos</a>

<a href="Produto.asp" ><img src="images/transp.gif" width="15" height="1"/ border="0">Produto</a>

<a href="Sabor.asp" ><img src="images/transp.gif" width="15" height="1"/ border="0">Sabor</a>

<a href="fornecedor.asp"><img src="images/transp.gif" width="15" height="1"/ border="0">Fornecedores</a>

<a href="Pedido.asp"><img src="images/transp.gif" width="15" height="1"/ border="0">Pedido</a>

<a href="Frete.asp"><img src="images/transp.gif" width="15" height="1"/ border="0">Frete</a>

<a href="Pagamento.asp"><img src="images/transp.gif" width="15" height="1"/ border="0">Formas de Pagamentos</a>

<a href="Noticia.asp" class="selecionado"><img src="images/transp.gif" width="15" height="1"/ border="0">Notícias</a>

<a href="Institucional.asp"><img src="images/transp.gif" width="15" height="1"/ border="0">Instituciona</a>

<a href="Servicos.asp"><img src="images/transp.gif" width="15" height="1"/ border="0">Serviços</a>

<a href="Clientes.asp"><img src="images/transp.gif" width="15" height="1"/ border="0">Clientes</a>

<a href="NewsLatter.asp"><img src="images/transp.gif" width="15" height="1"/ border="0">NewsLatter</a>

<a href="GaleriaFotos.asp"><img src="images/transp.gif" width="15" height="1"/ border="0">Galeria de Fotos</a>

<a href="ComoComprar.asp"><img src="images/transp.gif" width="15" height="1"/ border="0">Como Comprar</a>

<a href="EntregaFrete.asp"><img src="images/transp.gif" width="15" height="1"/ border="0">Entrega e Frete</a>

</div>

</td>

</tr>

<!--rodape prdutos -->

<!--fim do menu de produtos -->

<tr>

<td width="194" height="4" background="images/bg_prod_tarja.gif" alt=""></td>

</tr>

</table>

Desde já grata pela atenção

[Diogo Freitas]

boas, bem basta você colocar text-align:center....

desta forma:

#menu a
{
display:block;
width: 194px;
height:20px;
background-image:url(images/bg_prod_up.gif);
font-family:font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration:none;
text-align:center;
}

#menu a:hover
{
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: bold; 
color: #FFFFFF; 
text-align:center;
background-image:url(images/bg_prod_down.gif)
}
#menu .selecionado {
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: bold; 
color: #FFFFFF; 
text-align:center;
background-image:url(images/bg_prod_down.gif)
}

[ju_rezende]

mas é o alinhamento vertical, o texto fica acima da cetinha da imagem, o textos ficam no topo e não no centro

[Diogo Freitas]

como é lógico eu não vi isso pk não consigo ver a imagem.não a tenho ne.lol

mas você poderá fazer colocando, por exemplo, o texto numa tabela e a imagem noutra.

<table>
<tr>
<td><img src="images/transp.gif" width="15" height="1"/ border="0"></td>
<td><a href="EntregaFrete.asp">Entrega e Frete</a></td>
</tr>
<tr>
<td><img src="images/transp.gif" width="15" height="1"/ border="0"></td>
<td><a href="EntregaFrete.asp">Entrega e Frete</a></td>
</tr>
</table>

[ju_rezende]

mas eu fiz dentro do div e coloquei no css blok,

[Diogo Freitas]

correcto, mas não te sei dizr, nem sei se é possível, central na vertical como voce quer. porém , se fizer como te disse, com tabelas, fica direitinho.

abraço

[KaKarotto]

Juliana, tenta usar o vertical-align:middle.

Eu sempre tento usar esse comando e nunca consigo, não sei usar ele direito...

Se tentar e não funcionar eu recomendo você a fazer outra coisa. Faça o link com height setado para auto. Assim, a caixa do link vai ficar justa na fonte e não terá espaços acima ou abaixo. Então você poderia definir um padding-top e padding-bottom iguais, isso faria com que o texto ficasse exatamente no meio do elemento.

Pelo amor de Deus. Menu se faz com LISTAS. Acostume a fazer assim...você vai ver que terá muito mais controle sobre os elementos...

Olha que simples:

ul#menu{
 width:200px; height:auto;
 border:1px solid blue;
}
ul#menu li a{
 width:100%; height:auto;
 padding:10px 2px;
 border:1px solid green;
}

<ul id="menu">
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>

Outra coisa, ainda que tenha imagem de fundo, deve deixar o height em auto, assim você controla o aparecimento da imagem pelos paddings....

Ok, garota?

Abraço

[Diogo Freitas]

kakaroto, concordo com voce em parte.

claro que pode ser feito com listas, e lógico k dessa forma o controlo sobre a definição é maior, porém as tabelas tb são boas para isso pois elas estão definidas para centro.

abraços

[KaKarotto]

kakaroto, concordo com voce em parte.

claro que pode ser feito com listas, e lógico k dessa forma o controlo sobre a definição é maior, porém as tabelas tb são boas para isso pois elas estão definidas para centro.

abraços

Diogão, essa forma de pensar é de quem aprende a fazer tudo com tabelas. As tabelas tem seus filhos posicionados para o centro, mas não é por isso que deve-se usá-las. O negócio é que tabelas não são feitas para isso, se são boas ou não para este caso é outra história.

O uso do Css é justamente para facilitar a manutenção de códigos, se um dia quisesse mudar o menu para um menu horizontal, as tabelas te dariam uma grande dor de cabeça e um trabalho desnecessário, já que elas são boas apenas para este caso. A cada tabela que cria no seu site para uma função que não é a dela, vai restringindo mais e mais a flexibilidade de seu site.

Outra coisa, algumas metodologias estão sendo implementadas para extender o html e facilitar o desenvolvimento, como microformatos e bibliotecas javascript.

O desenvolvedor da biblioteca sabe que se for desenvolver algum script para menu, deve fazer isso com listas pois o padrão ul > li não muda.

Ao passo que usando tabelas podem existir inúmeras formas de criar menus...

Ou seja, seu menu feito em tabelas fica impossível de se usar com um plugin usado com uma biblioteca para fazer efeitos no seu menu.

Este é apenas um caso....

A semântica é a coisa mais importante em qualquer programação, porque cria uma padronização e melhor reaproveitamento dos códigos.

Se aprender a usar Css direito ( e isso leva tempo ), faz o que quiser sem a menor necessidade de usar tabelas. É simples:

- Use tabelas para criar tabelas

- Use listas para criar listas

- Use a cabeça para criar uma boa aplicação.

É uma sugestão, se quiser aceite.

[Diogo Freitas]

não cara, eu concordo plenamente contigo.até porque não uso outra coisa se não css. a questão é simples, como não estavamos a dar conta de colocar um alinhamento vertical sugeri o uso de tabelas. mas é claro que o css é bem, mas bem melhor. falow

[Ândres]

você colocou uma div "pai" para esta do menu?

----------------------------

criação de sites

criação de logotipos

criação de websites