Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Filipe_O

Centrar imagem activa de menu

Recommended Posts

Filipe_O

Boas!

Tenho um site em localhost, com um template.

Por defeito, esse template têm uma barra, que quando o link esta activo, mostra uma imagem.

No css, substitui a imagem por um quadrado. Ficou assim.

Mas eu queria que esse quadrado fosse mais pequeno.

E ao restringir a altura para 30px, fica assim.

Como queria que ficasse ao centro, experimentei margin... não deu pois, faz margem tanto ao fundo como ao item.

Experimentei por o background position como center, ou bottom, mas também nada...

Sabem-me ajudar?

Obrigado

Share this post


Link to post
Share on other sites
XicoXperto

Como queria que ficasse ao centro, experimentei margin...

exprimenta dar-lhe um:

padding-top:15px;

parece-me que 15px, são capazes de resolver.

Share this post


Link to post
Share on other sites
XicoXperto

Esqueci-me de dizer,  pelo que eu sei, não é possivel através de CSS alinhar a meio em relação ao eixo yy (digamos a altura).

O "margin:auto;" alinha a meio em relação ao eixo dos xx, que é algo que não te interessa

Share this post


Link to post
Share on other sites
Filipe_O

Pading não :S

Se fosse era margem, porque pading é em relação ao interior. Aumenta o espaço do limite inferior da caixa, até ao texto.

Share this post


Link to post
Share on other sites
Sergio S

O "margin:auto" também funciona em altura, o problema é que só funciona se a altura do elemento paterno estiver definida, e há browsers em que isso não é bem suportado.

Uma forma de fazer com que os elementos dentro de um elemento apareçam centrados verticalmente é usar "display:table-cell; vertical-align:middle;" nesse elemento. Com este código já não é necessário definir a altura, e os subelementos ficam centrados verticalmente. Note que, se não definir uma altura, não haverá margem, pelo que provavelmente quererá adicionar também "height:100%;", caso a altura não esteja definida de outra forma.

No entanto, e neste caso em particular, o problema nem está relacionado com o centrar, mas sim com o local que escolheu para limitar a altura. Em vez de aplicar esse "height:30px;" ao elemento "li", aplique-o ao "div" que o contém: #jsn-pos-mainmenu {height:30px;} .


Mais vale saber e não precisar, que precisar e não saber.

Share this post


Link to post
Share on other sites
Sergio S

Julguei que fosse essa a ideia. Então o objetivo é ficar com um botão centrado numa barra com a altura original, certo? Nesse caso, pelo que vejo na disposição da árvore, descubra qual o elemento paterno que está a determinar a altura total do menu (o meu palpite é que seja o #jsn-pos-mainmenu ou o #menu-mainmenu_1) e aplique-lhe o "display:table-cell; vertical-align:middle;", e depois aplique o "height:30px;" ao elemento imediatamente dentro dele.

Na eventualidade de a altura não estar a ser definida com uma height no elemento paterno, mas sim com um padding, remova essa definição e substitua-a por uma height. Se quiser manter uma estrutura dinâmica, pode usar a unidade em em vez de px.


Mais vale saber e não precisar, que precisar e não saber.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.