Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite, acho que estou postando no lugar certo pois a linguagem utilizada no blogger é o xml,
bem minha dúvida é que estou tentando colocar um menu no meu blog e os itens ñ ficam centralizados, o código é?
ul#navlist li
{
float:left;
list-style-type:none;
border-right:0px solid #000000;
white-space:nowrap;
}color: #ffffff;
text-decoration: none;
}color: #000000;
background-color: #cccccc;
}color: #ffffff;
background-color: #000000;
}<div id='navcontainer'>
<ul id='navlist'>
<li>
<a href='AQUI O ENDEREÇO DO SEU LINK' id='current'>
<div align='center'></div>
</a>
</li>
</ul>
</div>
obs: onde tem <div align=center> eu coloquei depois para tentar corrigir mais não deu certo;da uma olhada principalmente na palavra softwares, da para perceber melhor.
tenta colocar um text-align:center nessa parte do seu css
ul#navlist li
{
float:left;
list-style-type:none;
border-right:0px solid #000000;
white-space:nowrap;
text-align:center;
}infelismente ñ deu certo
como ninguém mais se abilitou vou detalhar mais, no exemplo que passei, usei uma tabela assim:
<table align='center'><tr>
<td height='3' width='64'/>
<td background='http://www.marvin.xpg.com.br/blog/imgmenu.png' class='menu' height='30' rowspan='2' width='118'>
<div id='navcontainer'>
<ul id='navlist'>
<li>
<a href='AQUI O ENDEREÇO DO SEU LINK' id='current'>
<div align='center'>
<span class='style1'>Home</span>
</div>
</a>
</li>
</ul>
</div>
</td>
<td background='http://www.marvin.xpg.com.br/blog/imgmenu.png' class='menu' rowspan='2' width='118'>
<div id='navcontainer'>
<ul id='navlist'>
<li>
<a href='AQUI O ENDEREÇO DO SEU LINK' id='current'>
<div align='center'>
<span class='style1'>Cursos</span>
</div>
</a>
</li>
</ul>
</div>
</td>
<td background='http://www.marvin.xpg.com.br/blog/imgmenu.png' class='menu' rowspan='2' width='118'>
<div id='navcontainer'>
<ul id='navlist'>
<li>
<a href='AQUI O ENDEREÇO DO SEU LINK' id='current'>
<div align='center'>
<span class='style1'>Jogos</span>
</div>
</a>
</li>
</ul>
</div>
</td>
<td background='http://www.marvin.xpg.com.br/blog/imgmenu.png' class='menu' rowspan='2' width='118'>
<div id='navcontainer'>
<ul id='navlist'>
<li>
<a href='AQUI O ENDEREÇO DO SEU LINK' id='current'>
<div align='center'>
<span class='style1'>Softwares</span>
</div>
</a>
</li>
</ul>
</div>
</td>
<td background='http://www.marvin.xpg.com.br/blog/imgmenu.png' class='menu' rowspan='2' width='118'>
<div id='navcontainer'>
<ul id='navlist'>
<li>
<a href='AQUI O ENDEREÇO DO SEU LINK' id='current'>
<div align='center'>
<span class='style1'>Softwares</span>
</div>
</a>
</li>
</ul>
</div>
</td>
</tr>
</table>Bom dia MarVin! Já que você prefere table, resolvi fazer um exemplo.
Se quiser usar esse exemplo e tiver alguma dúvida, não deixe de postar amigão.
Aqui é o estilo:
#navcontainer{
width:690px;
border:1px gray solid; /* Deixei essa borda na div pra você saber o tamanho atual dela */
} background:url([http://www.marvin.xpg.com.br/blog/imgmenu.png)](http://www.marvin.xpg.com.br/blog/imgmenu.png)) repeat-x;
text-align:center;
width:20%;
font:12px Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
} color: #fff;
text-decoration: none;
} background-color:#333;
color: #fff;
text-decoration: none;
}<div id="navcontainer">
<table width="100%" height="32px" cellspacing="2" border="0" >
<tr>
<td><a href="#">Home</a></td>
<td><a href="#">Cursos</a></td>
<td><a href="#">Jogos</a></td>
<td><a href="#">Softwares</a></td>
<td><a href="#">Outros</a></td>
</tr>
</table>
</div>acabei de testar nesse layout do meu blog de teste e deu certo, tentei com meu layout ñ deu muito certo mais acho que deve ser uma configuração de outros links que devem estar em conflito, assim que chegar em casa vou fazer o templat novamente com essas configurações.
Por favor, não de
>
****
desnecessários.
****Utilizar tabelas só irá te atrapalhar, porém aqui no Mozilla Firefox está centralizado.
****
**** http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
****
****
****
Desculpa ae pelo
é que clico em responder e ele aparece automaticamente e acabo esquecendo de remover...
Para não ter que ficar retirando ****
>
****
, clique em /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/style_images/10/t_reply.gif&key=1c15a81e2c777193813b37e6397d0c7fadaf0ffda60e6a1a7f7a7b9537dd51fe" alt="Imagem Postada" />.
**** http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
****
****
****
Bom dia!! essa atualização demorou muito, mais agora parece q já melhorou, estava tentando entrar a cada segundo. bem com a ajuda do Claudiobrother consegui resolvel o problema do posicionamento, inclusive dei uma incrementada no código para trocar a imagem do fundo no hover, mais um outro problema que vem tirando meu tempo e meu sono é quanto a cor dos links nesse código está definida para branco e na minha skin a cor dos links é diferente só que tá ficando tudo branco e não só a tabela, como posso limitar essa formatação somente à essa tabela???
#navcontainer{
width:100%;
} background:url([http://www.marvin.xpg.com.br/blog/imgmenu.png](http://www.marvin.xpg.com.br/blog/imgmenu.png)) repeat-x;
text-align: center;
width:110px;
font:15px Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
border-left: 1px solid #B22222;
}color: #fff;
text-decoration: none;
}seletor display: block;
border: 1px solid #A52A2A;
background:url([http://www.marvin.xpg.com.br/blog/imgmenu2.png](http://www.marvin.xpg.com.br/blog/imgmenu2.png)) repeat-x;
text-decoration: none;
}Bem,
já tentou fazer isso:
a {
color: white;
}será que o problema não é por que esta tabela está dentro de outra tabela???
Pode até ser, mas fazendo o que eu falei no outro post, será aplicado a cor branca à todos os a.
^_^
pq apareceu [resolvido] no titulo do post????
Bom dia!! essa atualização demorou muito, mais agora parece q já melhorou, estava tentando entrar a cada segundo. bem com a ajuda do Claudiobrother consegui resolvel o problema do posicionamento, inclusive dei uma incrementada no código
O assunto central do tópico foi resolvido.
^_^
então eu terei que abrir outro post???
Pode continuar postando aqui, mas em uma próxima, crie um novo tópico. Não há problemas.
^_^
Você não conhece uma forma de personalizar apenas um determinado lugar? algo que limite, pensei em colocar <style> no menu ao invés da tag, mais ainda não tentei pq estou sem o dreamweaver aqui no trabalho.
Tente ser o máximo específico nas declarações
Ou se não, em último caso, use style inline.
;)
>
Bem,
já tentou fazer isso:
a {
color: white;
}
^_^como assim você poderia me mostar?
deixa eu explicar novamente. na minha skin tem em uma determinanda parte do código isso:
/ Default links /
a:link,a:visited{
font-weight: bold;
text-decoration: none;
color: $linkColor;
background: transparent;
} font-weight: bold;
text-decoration: underline;
color: $hoverLinkColor;
background: transparent;
}a:active {
font-weight : bold;
text-decoration : none;
color: $hoverLinkColor;
background: transparent;
}/ =================================MENU====== /
#navcontainer {
width:100%;
} background:url([http://www.marvin.xpg.com.br/blog/imgmenu.png](http://www.marvin.xpg.com.br/blog/imgmenu.png)) repeat-x;
text-align: center;
width:110px;
font:15px Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
border-left: 1px solid #B22222;
}#navcontainer a:link, a:visited{
color: #ffffff;
text-decoration: none;
}seletor display: block;
color: #ffffff;
background:url([http://www.marvin.xpg.com.br/blog/imgmenu2.png](http://www.marvin.xpg.com.br/blog/imgmenu2.png)) repeat-x;
border: 1px solid #A52A2A;
text-decoration: none;
}color: #ffffff;
text-decoration: none;
}coloque no inicio do código isso:
a, a:link{
color: white;
}http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
boa noite, depois de muito tempo de pesquina na net e de muito encomodo ao moderador, encontrei a solução para meu menu, juntando o que ele me disse com o que eu encontrei nesse tutorial: http://www.maujor.com/tutorial/linkdif.php (que a final recomendo) e com o que o Claudiobrother me passou. bem agradecimentos à parte, a solução foi:
mantive a formatação para todos os links que estava na skin alterei o #navcontainer que ficou assim:
#navcontainer{
width:100%;
} background:url([http://www.marvin.xpg.com.br/blog/imgmenu.png](http://www.marvin.xpg.com.br/blog/imgmenu.png)) repeat-x;
text-align: center;
width:110px;
font:15px Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
border-left: 1px solid #B22222;
}
#navcontainer a:link {
text-decoration: none;
}seletor display: block;
border: 1px solid #A52A2A;
background:url([http://www.marvin.xpg.com.br/blog/imgmenu2.png](http://www.marvin.xpg.com.br/blog/imgmenu2.png)) repeat-x;
text-decoration: none;
}Eu friei um style fora da skin, para configurar a cor de fonte dos links do menu, ficou assim:
<style>
a.teste:link{
color: #FFFFFF;
text-decoration: none;
}color: #FFFFFF;
text-decoration: none;a.teste:active {
color: #FFFFFF;
text-decoration: none;
}
</style><div id='navcontainer'>
<table border='0' cellspacing='0' class='navcontainer' height='30px' width='100%'>
<tr>
<td><a class='teste' href='#'>Home</a></td>
<td><a class='teste' href='#'>Cursos</a></td>
<td><a class='teste' href='#'>Jogos</a></td>
<td><a class='teste' href='#'>Softwares</a></td>
<td><a class='teste' href='#'>Hardware</a></td>
<td><a class='teste' href='#'>Indicados</a></td>
<td><a class='teste' href='#'>Perfil</a></td>
</tr>
</table>
</div>e voilá (é assim q escreve?) funcionou, o único problema é que não funciona na IE 6 ( e o que funciona?) a troca de background no hover. Será que seria interessante abrir um poste com essa segunda parte de minha dúvida, percebo que dúvidas parecidas com essa aparecem pela net, e seria uma boa ajuda e pelo titulo do post não dá para imaginar que ela seja resolvida também.
valleu muito obrigado!!!!!
Procure por CSS Sprite. Postei um vídeo na seção de tutoriais do fórum.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Posta um link do seu blog.