[RESOLVIDO]Problema com texto dentro de tabela

JH Nascimento · Dezembro 16, 2012

Pessoal, estou enrolado com um aplicação web que desenvolvi a partir de um tutorial com CGI/Python e HTML/CSS. O problema é na parte de HTML mesmo, por isso postei aqui. Tentando aprimorar mais o calendário, eu quis adicionar nele os feriados do mês mostrado, em letras pequenas e na mesma célula onde mostra o dia, mas sem alterar a altura ou largura desta. O calendário está numa tabela, e sempre que tento por uma texto junto, ou ele fica misturado com o número do dia, como na imagem abaixo, ou alarga a tabela. Tentei fazer um DIV, colocando o atributo position: absolute; no <th> e position: relative; no DIV, mas não adianto. Margin, height, align, nada disso funciona, continua sempre misturado com o texto. para entender melhor, vejam o link da imagem: http://i.imgur.com/ihGJ1.png?1?5858

Pus o código aqui embaixo, é grande mas é tudo repetido, basta pular para a parte importante, o CSS e o dia 25/dez. Vejam o que pode ser feito, por favor:

<!DOCTYPE html>
<html lang="pt-BR"><head><meta charset="utf-8">
<title>Calendário Dinâmico</title>
<!-- CSS/ESTILO abaixo \/ -->
    <style type="text/css">
body {
	line-height: 1.4em;
	font-family: tahoma, arial, sans-serif;
	font-size: 62.5%;
 }

#data {
	font-size: 170%;
}

div.holy {
	position: absolute;
	text-align: top, left;
	font-size: 55%;
	height: 10%;
	margin-bottom: 90%;
}

h1 {
	font-size: 270%;
}

table {
	border: 1px solid #333333;
	border-collapse: collapse;
}

td, th {
	border-bottom: 1px solid #333333;
	border-right: 1px solid #333333;
	text-align: center;
	width: 58px;
	font-size: 175%;
	font-weight: bold;
	line-height: 48px;
}

th {
	border-top: 1px solid #333333;
}
</style>
<!-- FIM DO CSS -->
</head>
<body><center>
<h1>Calendário do mês 12/2012</h1>
<!-- INÍCIO da tabela -->
<table><thead><tr>
<th scope="col" bgcolor="blue">seg</th>
<th scope="col" bgcolor="blue">ter</th>
<th scope="col" bgcolor="blue">qua</th>
<th scope="col" bgcolor="blue">qui</th>
<th scope="col" bgcolor="blue">sex</th>
<th scope="col" bgcolor="green">sab</th>
<th scope="col" bgcolor="green">dom</th>
</tr></thead><tbody><tr>
<td bgcolor="lightblue"></td>
<td bgcolor="lightblue"></td>
<td bgcolor="lightblue"></td>
<td bgcolor="lightblue"></td>
<td bgcolor="lightblue"></td>
<td bgcolor="lightgreen">1</td>
<td bgcolor="lightgreen">2</td>
</tr><tr>
<td bgcolor="lightblue">3</td>
<td bgcolor="lightblue">4</td>
<td bgcolor="lightblue">5</td>
<td bgcolor="lightblue">6</td>
<td bgcolor="lightblue">7</td>
<td bgcolor="lightgreen">8</td>
<td bgcolor="lightgreen">9</td>
</tr><tr>
<td bgcolor="lightblue">10</td>
<td bgcolor="lightblue">11</td>
<td bgcolor="lightblue">12</td>
<td bgcolor="lightblue">13</td>
<td bgcolor="lightblue">14</td>
<td bgcolor="pink">15</td>
<td bgcolor="lightgreen">16</td>
</tr><tr>
<td bgcolor="lightblue">17</td>
<td bgcolor="lightblue">18</td>
<td bgcolor="lightblue">19</td>
<td bgcolor="lightblue">20</td>
<td bgcolor="lightblue">21</td>
<td bgcolor="lightgreen">22</td>
<td bgcolor="lightgreen">23</td>
</tr><tr>
<td bgcolor="lightblue">24</td>
<td bgcolor="lightblue"><div class="holy"><a href="#f3"><small>*Christmas</small></a></div>25</td>
<td bgcolor="lightblue">26</td>
<td bgcolor="lightblue">27</td>
<td bgcolor="lightblue">28</td>
<td bgcolor="lightgreen">29</td>
<td bgcolor="lightgreen">30</td>
</tr><tr>
<td bgcolor="lightblue">31</td>
<td bgcolor="lightblue"></td>
<td bgcolor="lightblue"></td>
<td bgcolor="lightblue"></td>
<td bgcolor="lightblue"></td>
<td bgcolor="lightgreen"></td>
<td bgcolor="lightgreen"></td>
</tr></tbody></table>
<!-- FIM da tabela. Código do formulário e fim do documento abaixo \/ -->
<form method="post" action="ola.py">
<span id="data">Data: 2012-12-15</span>
<input type="date" name="message" value="2012-12-15"/><input type="submit" value="Enviar" />
</form></center>
</body></html>

Agradeço desde já.

Editado Dezembro 16, 2012 por JH Nascimento

atkins · Dezembro 16, 2012

Ola, tudo bem?? Primeiramente, você não vai conseguir do jeito que você está fazendo, primeiramente la no text-align:top, left; isso não existe, na verdade ele só ta lendo o top, pra fazer o left valer, voce teria que por text-align:top left; sem a virgula... Mas por sorte deu certo, só retira o left... Outra coisa, o <th> manda sobre o <div>, então voce pode mandar ele fica no top, left, right, bottom, qualquer coisa, o que voce ta mandando no <th> que é center vai se manter no centro...

JH Nascimento · Dezembro 16, 2012

Então... Fiz o que você falou, tirei a vírgula, mas não mudou nada. Então tirei o center do <th> para ver se funcionava, mas a única diferença foi os números se alinharem à esquerda.

Mas acabei achando a solução. Eu pus o dia 25 num <p></p> para quebrar linha, e depois tirei o line-height: 48px; e deixei só height: 48px; para não distorcer, e acabou funcionando. Acho que o problema era esse mesmo, o line-height. Mas obrigado também por em ensinar a usar o align, e eu ainda tenho que conseguir colocar isso no código python que gera a página.

Editado Dezembro 16, 2012 por JH Nascimento

Entrar

[RESOLVIDO]Problema com texto dentro de tabela

Pergunta

JH Nascimento

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

atkins

Link para o comentário

Compartilhar em outros sites

JH Nascimento

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades