[Resolvido] Alternar tamanho da letra

[PF2G]

Boa tarde,

Eu estou a fazer um site onde ao escolher a lingua Portugues a palavra Ingles fica mais pequeno e o mesmo se passa se escolher a lingua Ingles, a palavra Portugues fica mais pequena:

style.css

.table2 td ul li.active
{
background:url(../imagens/meiabola.png) center right no-repeat;
}
.table2 td ul li.lang
{
background:url(../imagens/menu_bola.png) center right no-repeat;
line-height:26px;
}

menu.php

<ul>
<li <?php if($page == "familyoffice"){ echo "class=\"active\"";}else {echo "class=\"normal\"";}?>><a href="?p=familyoffice〈=<?php echo $current_lang; ?>"><?php echo $lang['Family Office']; ?></a></li>
<li <?php if($page == "multifamily"){ echo "class=\"active\"";}else {echo "class=\"normal\"";}?>><a href="?p=multifamily〈=<?php echo $current_lang; ?>"><?php echo $lang['Multi Family Office']; ?></a></li>
<li <?php if($page == "foco"){ echo "class=\"active\"";}else {echo "class=\"normal\"";}?>><a href="?p=foco〈=<?php echo $current_lang; ?>"><?php echo $lang['Foco']; ?></a></li>
<li <?php if($page == "servicos"){ echo "class=\"active\"";}else {echo "class=\"normal\"";}?>><a href="?p=servicos〈=<?php echo $current_lang; ?>"><?php echo $lang['Serviços']; ?></a></li>
<li <?php if($page == "valores"){ echo "class=\"active\"";}else {echo "class=\"normal\"";}?>><a href="?p=valores〈=<?php echo $current_lang; ?>"><?php echo $lang['Valores']; ?></a></li>
<li <?php if($page == "seminarios"){ echo "class=\"active\"";}else {echo "class=\"normal\"";}?>><a href="?p=seminarios〈=<?php echo $current_lang; ?>"><?php echo $lang['Seminários']; ?></a></li>
<li <?php if($page == "contactos"){ echo "class=\"active\"";}else {echo "class=\"normal\"";}?>><a href="?p=contactos〈=<?php echo $current_lang; ?>"><?php echo $lang['Contactos']; ?></a></li>
<li class="normal"></li>
<li class="normal"></li>
<li <?php if($lang == "pt"){ echo "class=\"active lang \"";}else {echo "class=\"normal lang\"";}?>><a href="?lang=pt"><?php echo $lang['Português']; ?></a></li>
<li <?php if($lang == "en"){ echo "class=\"active lang \"";}else {echo "class=\"normal lang\"";}?>><a href="?lang=en"><?php echo $lang['Inglês']; ?></a></li></ul>

header.php

Cufon.replace('.normal', {hover: 'true',fontFamily: 'Aaux Prolight'});
Cufon.replace('.active',{color: '#00bce2',fontFamily: 'Aaux Prolight'});
Cufon.replace('.texto',{fontFamily: 'Museo 300',fontSize: '12px'});
Cufon.replace('.fontchange', {color:'#00bce2',fontFamily: 'Aaux Prolight',fontSize: '28px'});
Cufon.replace('.fontchange2', {fontFamily: 'Aaux Prolight',fontSize: '18px'});
Cufon.replace('.changecolor',{fontFamily: 'Museo 700',fontSize: '12px'});

Será que alguem me pode ajudar?

Obrigado,

PF2G

[vtimbuc]

Podes aproveitar ja que tens a class active e adicionar o estilo com a letra maior.

.active { font-size: 14px; }

$('li').on('click', function() {
$('li').removeClass('active');
$(this).addClass('active');
});

Adiciona uma class ao ul para não fazeres target a todas as lists do dom.

Edited June 4, 2012 at 08:51 PM by vtimbuc

[brunoais]

Eu deito abaixo o que o que o vtimbuc diz! Eu discordo a solução dele.

A minha solução é:

Altera a ordem das regras CSS. A especificidade das duas é igual, por isso, a que estiver em 2º lugar ganha em relação ao que está em primeiro.

Podes tb usar uma maneira que prefiro (mas n consigo mostrar com essa quantidade e tipo de código) que é ter mais especificidade nos casos especiais e menos especificidade nos casos mais gerais.

Isto é:

Tens varios elementos do menu. Só um está selecionado, n é?

Então (exemplo):

div.menuContainer > div.menu > .normal{
/* aqui vai os comandos CSS que se aplicam a para todos os elementos e
a elementos que não são o especial
*/
}
div.menuContainer > div.menu > .normal.selected{
/* aqui vai os comandos CSS que se aplicam ao elemento especial
se contares, este elemento tem mais especificidade que o anterior, por isso,
neste, é aplicado tudo do anterior e o que estiver aqui escrito que entre em conflito com o anterior é usado em vez do anterior.
*/
}

Edited June 4, 2012 at 10:29 PM by brunoais

[vtimbuc]

Eu deito abaixo o que o que o vtimbuc diz! Eu discordo a solução dele.

A minha solução é:

Altera a ordem das regras CSS. A especificidade das duas é igual, por isso, a que estiver em 2º lugar ganha em relação ao que está em primeiro.

Podes tb usar uma maneira que prefiro (mas n consigo mostrar com essa quantidade e tipo de código) que é ter mais especificidade nos casos especiais e menos especificidade nos casos mais gerais.

Isto é:

Tens varios elementos do menu. Só um está selecionado, n é?

Então (exemplo):

div.menuContainer > div.menu > .normal{
/* aqui vai os comandos CSS que se aplicam a para todos os elementos e
a elementos que não são o especial
*/
}
div.menuContainer > div.menu > .normal.selected{
/* aqui vai os comandos CSS que se aplicam ao elemento especial
se contares, este elemento tem mais especificidade que o anterior, por isso,
neste, é aplicado tudo do anterior e o que estiver aqui escrito que entre em conflito com o anterior é usado em vez do anterior.
*/
}

Pelo que eu percebi ele precisa de alterar o tamanho da letra quando o elemento é seleccionado logo para adicionar a class selected como esta na tua solução precisa de um evento em JS ou usando o elemento :target, o que é mais complicado. Dai eu ter usado a class active e jquery para o click event.

[brunoais]

Pelo que eu percebi ele precisa de alterar o tamanho da letra quando o elemento é seleccionado logo para adicionar a class selected como esta na tua solução precisa de um evento em JS ou usando o elemento :target, o que é mais complicado. Dai eu ter usado a class active e jquery para o click event.

jQuery é js, por isso, não percebi o que escreveste corretamente.

[PF2G]

Tópico Resolvido