[Resolvido]Centralizando o TOP MENU

Sabbra
Autor do Tópico
Offline
JCB! Estagiário

Mais

13 anos 9 meses atrás #61148 por Sabbra

Sabbra created the topic: [Resolvido]Centralizando o TOP MENU

Fala galera, estou com certa dificuldade para centralizar meu top menu
como podem ver ele fica para a esquerda...
http://www.tocadodragao.com/joomla/

aqui vai a CSS original:

#topmenu_out {
	height: 38px;
	background-repeat: repeat-x;
}
#topmenu_left {
	height: 38px;
	background-repeat: no-repeat;
}
#topmenu_right {
	height: 38px;
	background-repeat: no-repeat;
	background-position: right;
}
#topmenu {
	height: 33px;
	color: #000;
	text-align: left;
	padding: 4px 27px 0px 27px;
	float: left;
	font-variant:small-caps;
}
#topmenu ul, 
#topmenu li {
	display: inline;
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}
#topmenu a {
	color: #ffb019;
	float: left;
	height: 20px;
	border: none;
	background: none;
    line-height: 25px;
	font-size: 12px;
	font-family: Tahoma, Arial,Verdana ;
	padding: 0px 5px;
	border-left: 1px solid #444;
	border-right: 1px solid #444;
	border-bottom: 1px solid #444;

}
#topmenu  a:hover, 
#topmenu #active_menu, 
#topmenu li#current a {
	text-decoration: underline;
	color: #ffd700;

eu ja fiz algumas alterações da versão orginal, mas nao consigo centralizar o bendito...
alguem sabe onde estou errando?

Please Entrar ou Registrar to join the conversation.

Sabbra
Autor do Tópico
Offline
JCB! Estagiário

Mais

13 anos 9 meses atrás #61149 por Sabbra

Sabbra replied the topic: Re: Centralizando o TOP MENU

Bom fiz uma gambiarra aqui e cheguei nesses valores pra deixar centralizado

#topmenu {
	height: 33px;
	color: #000;
	text-align: left;
	padding: 4px 287px 0px 27px;
	float: right;
	font-variant:small-caps;

Please Entrar ou Registrar to join the conversation.

edyonil
Offline
JCB! Master

Mais

13 anos 9 meses atrás #61151 por edyonil

edyonil replied the topic: Re: Centralizando o TOP MENU

Solução para seu problema....

Substitua as regras

#topmenu {
    color: #000000;
    float: right;
    font-variant: small-caps;
    height: 33px;
    padding: 4px 287px 0 27px;
    text-align: left;
}
#topmenu ul, #topmenu li {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Por esse código abaixo

#topmenu {
    color: #000000;
    font-variant: small-caps;
    height: 33px;
    padding: 4px 28px 0 27px;
    text-align: center;
}
#topmenu ul, #topmenu li {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Tem tantos erros de CSS ai que ficou difícil até para mim achar uma solução.

Aproveito e deixo como recomendação o artigo que escrevi aqui para o Joomla Clube.
<img src="{SMILIES_PATH}/icon_arrow.gif" alt=":seta:" title="Seta" /> Recomendação de livro – Use a Cabeça HTML com CSS e XHTML

Abraços....

[b:8sje7mdx]________________________________________________________________[/b:8sje7mdx]
[size=110:8sje7mdx][color=#400080:8sje7mdx][b:8sje7mdx]Aprender e desenvolver são metas que para mim devem ser batida.[/b:8sje7mdx][/color:8sje7mdx][/size:8sje7mdx]
Ajudar é cumprir a missão que o Deus pai nos passou.
[url:8sje7mdx]http://edyonil.com[/url:8sje7mdx]
[url:8sje7mdx]http://gmais.de/edyonil[/url:8sje7mdx] - [url:8sje7mdx]http://twitter.com/edyonil[/url:8sje7mdx]
[url:8sje7mdx]...

Please Entrar ou Registrar to join the conversation.

Sabbra
Autor do Tópico
Offline
JCB! Estagiário

Mais

13 anos 9 meses atrás #61154 por Sabbra

Sabbra replied the topic: Re: Centralizando o TOP MENU

Po Edy, valu a força cara...o lance é que não sei nada de programação haha estou fuçando aqui...
Vou ver de ler esse livro, tenho ctz que vai me ajudar..

Curioso que o comando que você colocou ali

display: inline-block;

fez aparece o as cruzes do lado de cada opção do menu, alguma ideia de como tirar elas dali?
o.O

E qual a variável que muda a distancia entre as opções do menu?

Valeu Edy!

Please Entrar ou Registrar to join the conversation.

edyonil
Offline
JCB! Master

Mais

13 anos 9 meses atrás #61155 por edyonil

edyonil replied the topic: Re: Centralizando o TOP MENU

Para remover você precisar apagar as propriedades backgrounds dais regras abaixo:

Linha: 577 do arquivo template.css

li {
    background-image: url("../images/arrow.gif");
    background-position: 0 2px;
    background-repeat: no-repeat;
    list-style: none outside none;
    margin-left: 10px;
    padding-left: 0;
    text-align: left;
    text-indent: 20px;
}
li:hover {
    background-image: url("../images/arrow_hover.gif");
    background-position: 0 2px;
    background-repeat: no-repeat;
    padding-left: 0;
    text-align: left;
}

Para mudar a distancia entre os menus da lista você deve manipular a propriedade "margin". Na primeira regra LI você somente substitui a propriedade abaixo

    margin-left: 10px;

Substitui por:

   margin: 0px 10px 0px 10px;

A regra acima está definindo a margem no sentido horário, ou seja; top, right, bottom, left - Em português: Topo, direita, baixo, esquerda;

Lembre-se: Substitua somente a propriedade margin, os demais ficam...

Abraço.

PS.: Se seu problema está resolvido, modifique o titulo e coloque [RESOLVIDO].

Please Entrar ou Registrar to join the conversation.

Joomla Templates Best Joomla Templates Premium Joomla Templates Free Joomla Templates