Jump to content

Alinhamento em label


Carlos Rocha
 Share

Recommended Posts

Pessoal, tenho um label que fiz ele com width:150px e com height:50.

Mas os textos estão alinhados ao topo.

Experimentei:

width:150px;
height:50px;
text-align:center;
display:inline-block;
background-color:#1C6A90;
color:#FFF;
vertical-align:middle;

Mas não funcionou.

Alguma ideia de como resolver isso?

Edited by carcleo
Link to comment
Share on other sites

Eis o style da pagina:>

 *
 {
padding:0 auto;
margin:0 auto;
 }

 body
 {
 text-align:left;
 }

 div#tudo
 {
text-align:center;
top:0px;
 }

 div#menuEleicoes
 {
display:block;
width:750px;
text-align:center;
 }

 div#presidente
 {
display:block;
width:750px;
text-align:center;
 }

 div#governador, div#senador, div#depFederal, div#depEstadual
 {
display:none;
width:750px;
text-align:center;
top:80px;
 }

 label#labelPresidente, label#labelGovernador, label#labelSenador, label#labelDepFederal, label#labelDepEstadual
 {
width:150px;
height:50px;
text-align:center;
display:table-cell;
background-color:#1C6A90;
color:#FFF;
vertical-align:middle;
 }
 label#labelPresidente:hover, label#labelGovernador:hover, label#labelSenador:hover, label#labelDepFederal:hover, label#labelDepEstadual:hover
 {
background-color:#FFD922;
color:#1C6A90;
 }
 .link
 {
color:#FFF; 
text-decoration:none;
 }
 div#analise
 {
bottom:0px;
text-align:center;
position:relative;
display:block;
 }
Link to comment
Share on other sites

Mas a cor da fonte não muda!

O que esta errado?

o que está errado ? a persistência em não apresentar toda a informação necessária para resolver o problema ...

só existe duas razões (que se combinam numa) para isso não acontecer, no entanto terias a resposta ao teu problema mais cedo, bastando apresentar o HTML ao qual estás a aplicar o CSS.

mais precisamente, o código HTML que está dentro do elemento que está a aplicar o CSS.

razões para a alteração de cor não ser visualizada ao elemento:

- como o próprio nome indica cascading style sheet, se o parâmetro do estilo for alterado por uma outra regra de estilo abaixo da lista de aplicação de estilos, o valor do parâmetro irá ser sobreposto

exemplo :

<span id="i">ping</span>

span { color: red; }
#i   { color: green; }

os dois estilos estão a ser aplicados ao mesmo elemento, mas qual é a cor final ?

- o elemento a que o estilo é aplicado (neste caso, texto) encontrasse a ser alterado por uma outra regra que se sobrepões à esperada dada ao elemento pai

exemplo :

<div>
 <span id="i">ping</span>
</div>

div { color: red; }
#i  { color: green; }

os dois estilos de cor são aplicados ao mesmo elemento, mas qual é a cor final ?

conclusão :

em vez de apresentar 50% da informação (css) apresenta os 100% da informação (html+css)

ps : ainda existe um outro caso (que pessoalmente penso ser o problema) mas não vou referir devido à falta de informação (HTML) por envolve a tag a

Edited by HappyHippyHippo
  • Vote 1
IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

Me perdoas pela falta.

Segue:

Unico js da página:

function abre(a)
{
 document.getElementById(a).style.display = "block";
 document.getElementById("label"+a.substring(0,1).toUpperCase()+a.substring(1,a.length)).style.backgroundColor = "green";
}

function fecha(a,b,c,d)
{

 document.getElementById(a).style.display = "none";
 document.getElementById(b).style.display = "none";
 document.getElementById(c).style.display = "none";
 document.getElementById(d).style.display = "none";

 document.getElementById("label"+a.substring(0,1).toUpperCase()+a.substring(1,a.length)).style.backgroundColor = "#1C6A90";  
 document.getElementById("label"+b.substring(0,1).toUpperCase()+b.substring(1,b.length)).style.backgroundColor = "#1C6A90";  
 document.getElementById("label"+c.substring(0,1).toUpperCase()+c.substring(1,c.length)).style.backgroundColor = "#1C6A90";  
 document.getElementById("label"+d.substring(0,1).toUpperCase()+d.substring(1,d.length)).style.backgroundColor = "#1C6A90";  
}

Página completa

http://www.radiomuriae.com.br/eleicoes2014.html


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rádio Muriaé</title>
<style>
 *
 {
padding:0 auto;
margin:0 auto;
 }

 body
 {
 text-align:left;
 }

 div#tudo
 {
text-align:center;
top:0px;
 }

 div#menuEleicoes
 {
display:block;
width:750px;
text-align:center;
 }

 div#presidente
 {
display:block;
width:750px;
text-align:center;
 }

 div#governador, div#senador, div#depFederal, div#depEstadual
 {
display:none;
width:750px;
text-align:center;
top:80px;
 }

 label#labelPresidente, label#labelGovernador, label#labelSenador, label#labelDepFederal, label#labelDepEstadual
 {
width:150px;
height:50px;
text-align:center;
display:table-cell;
background-color:#1C6A90;
color:#FFF;
vertical-align:middle;
 }
 label#labelPresidente:hover, label#labelGovernador:hover, label#labelSenador:hover, label#labelDepFederal:hover, label#labelDepEstadual:hover
 {
background-color:#FFD922;
color:#1C6A90;
 }
 .link
 {
color:#FFF; 
text-decoration:none;
 }
 div#analise
 {
bottom:0px;
text-align:center;
position:relative;
display:block;
 }
</style>
<script type="text/javascript" src="abre_fecha.js"></script>
</head>
<body>
<div id="tudo">
 <img src="imagens/logo.jpg"  style="alignment-adjust:central;" />          

 <a href="#analise" onclick="
 document.getElementById('h3Analise').style.backgroundColor='#1C6A90';
 document.getElementById('h3Analise').style.color='#FFF'">
 <img src="imagens/mao.png" width="" height="166px" /></a>

 <h2>Resultados parciais da Apuração dos votos das eleições<br />do pleito do dia 05 de outubro de 2014</h2><br />
 <div id="menuEleicoes">
  <label id="labelPresidente">
   <a href="#" class="link" onclick="abre('presidente');fecha('governador','senador','depFederal','depEstadual');">Presidente</a>
  </label><label id="labelGovernador">
   <a href="#" class="link" onclick="abre('governador');fecha('presidente','senador','depFederal','depEstadual');">Governador</a>
  </label><label id="labelSenador">
    <a href="#" class="link" onclick="abre('senador');fecha('governador','presidente','depFederal','depEstadual');">Senador</a>
  </label><label id="labelDepFederal">
    <a href="#" class="link" onclick="abre('depFederal');fecha('governador','senador','presidente','depEstadual');">Deputado<br />Federal</a>
  </label><label id="labelDepEstadual">
    <a href="#" class="link" onclick="abre('depEstadual');fecha('governador','senador','depFederal','presidente');">Deputado<br />Estadual</a>
  </label>
 </div>

 <div id="presidente">
  <h3>Votação para Presidente da República</h3><br>
  <table width="750" border="1">
   <tr>
     <th>Cancidatos</th>
     <th>Votos Brancos</th>
     <th>Parcial Muriaé</th>
     <th>Total de Votos</th>
   </tr>
   <tr>
     <td>Dilma</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Aécio</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Marina</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Luciana</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Eeraldo</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Levir</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
  </table>
 </div>

 <div id="governador">
  <h3>Votação para Governador do Estado de Minas Gerais</h3><br>
  <table width="750" border="1">
   <tr>
     <th>Cancidatos</th>
     <th>Votos Brancos</th>
     <th>Parcial Muriaé</th>
     <th>Total de Votos</th>
   </tr>
   <tr>
     <td>Dilma</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Aécio</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Marina</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Luciana</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Eeraldo</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Levir</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
 </table>
 </div>

 <div id="senador">
  <h3>Votação para Senador da República</h3><br>
  <table width="750" border="1">
   <tr>
     <th>Cancidatos</th>
     <th>Votos Brancos</th>
     <th>Parcial Muriaé</th>
     <th>Total de Votos</th>
   </tr>
   <tr>
     <td>Dilma</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Aécio</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Marina</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Luciana</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Eeraldo</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Levir</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
 </table>
 </div>

 <div id="depFederal">
  <h3>Votação para Deputado Federal</h3><br>
  <table width="750" border="1">
   <tr>
     <th>Cancidatos</th>
     <th>Votos Brancos</th>
     <th>Parcial Muriaé</th>
     <th>Total de Votos</th>
   </tr>
   <tr>
     <td>Dilma</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Aécio</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Marina</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Luciana</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Eeraldo</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Levir</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
 </table>
 </div>

 <div id="depEstadual">
  <h3>Votação para Deputado Estadual</h3><br>
  <table width="750" border="1">
   <tr>
     <th>Cancidatos</th>
     <th>Votos Brancos</th>
     <th>Parcial Muriaé</th>
     <th>Total de Votos</th>
   </tr>
   <tr>
     <td>Dilma</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Aécio</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Marina</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Luciana</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Eeraldo</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Levir</td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
 </table>
 </div>
 <div id="analise">
   <h3 id="h3Analise">Análise comparativa Deputados em Muriaé</h3>
   <table width="750" border="1">
     <tr>
       <th>Nome do Candidato</th>
       <th>Votação 2010</th>
       <th>Votação 2014</th>
     </tr>
     <tr>
       <td>BRAULIO</td>
       <td> </td>
       <td> </td>
     </tr>
     <tr>
       <td>MIZAEL</td>
       <td> </td>
       <td> </td>
     </tr>
     <tr>
       <td>RENZO</td>
       <td> </td>
       <td> </td>
     </tr>
     <tr>
       <td>WILSON</td>
       <td> </td>
       <td> </td>
     </tr>
     <tr>
       <td>CARLOS WILSON</td>
       <td> </td>
       <td> </td>
     </tr>
   </table>
 </div>
 <br /><br />
</div>
</body>
</html>
Link to comment
Share on other sites

Nem um.

É para simplificar a pergunta que coloquei assim.

Os labeis que quero alterar são esses:

 <div id="menuEleicoes">
  <label id="labelPresidente">
   <a href="#" class="link" onclick="abre('presidente');fecha('governador','senador','depFederal','depEstadual');">Presidente</a>
  </label><label id="labelGovernador">
   <a href="#" class="link" onclick="abre('governador');fecha('presidente','senador','depFederal','depEstadual');">Governador</a>
  </label><label id="labelSenador">
    <a href="#" class="link" onclick="abre('senador');fecha('governador','presidente','depFederal','depEstadual');">Senador</a>
  </label><label id="labelDepFederal">
    <a href="#" class="link" onclick="abre('depFederal');fecha('governador','senador','presidente','depEstadual');">Deputado<br />Federal</a>
  </label><label id="labelDepEstadual">
    <a href="#" class="link" onclick="abre('depEstadual');fecha('governador','senador','depFederal','presidente');">Deputado<br />Estadual</a>
  </label>
 </div>
Link to comment
Share on other sites

já que é então para simplificar a pergunta, vou simplificar a resposta :

ps : ainda existe um outro caso (que pessoalmente penso ser o problema) mas não vou referir devido à falta de informação (HTML) por envolve a tag a

#label:hover a
{
color:#1C6A90;
}
Edited by HappyHippyHippo
  • Vote 1
IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

Não, tu não tens o "a" no fim do seletor. Revê isso.

mas se fosse a ti revia todo o CSS. Está muito confuso e vai criar-te mais problemas. Dou-te um exemplo simples:

label#labelPresidente, label#labelGovernador, label#labelSenador, label#labelDepFederal, label#labelDepEstadual
{
width:150px;
height:50px;
text-align:center;
display:table-cell;
background-color:#1C6A90;
color:#FFF;
vertical-align:middle;
}
label#labelPresidente:hover, label#labelGovernador:hover, label#labelSenador:hover, label#labelDepFederal:hover, label#labelDepEstadual:hover
{
background-color:#FFD922;
color:#1C6A90;
}

Em CSS é boa prática não se usar IDs, mas tu nem sequer estás a facilitar a tua vida evitando a repetição. O que tens em cima podia ser substituido por (mantendo o uso de ID, mas seria melhor se pusesses uma class nesse elemento):

#menuEleicoes label
{
width:150px;
height:50px;
text-align:center;
display:table-cell;
background-color:#1C6A90;
color:#FFF;
vertical-align:middle;
}
#menuEleicoes label:hover
{
background-color:#FFD922;
color:#1C6A90;
}

Há muito mais que podias mudar.

Link to comment
Share on other sites

Já achei:

 .link
 {
  color:#FFF;
  text-decoration:none;
 }

Alterei

 .link:hover
 {
color:#1C6A90;
text-decoration:none;
 }

Mas só dá quando seleciono o texto.

Será que existe uma forma de quando passar o ouse na label, alterar também a cor do link?

Sobre o que postou antes, vou estudar isso para melhorar meus css.

Edited by carcleo
Link to comment
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
 Share

×
×
  • Create New...

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.