[Resolvido] Alinhamento CSS dentro de uma <td>

[Diego Macêdo 6]

CSS:

a.not_titulo:link{
	font:Tahoma, Geneva, sans-serif;
	font-size:18px;
	color:#333;
	text-decoration:none;
	text-align:left;
}

a.not_titulo:hover{
	text-decoration:underline;
}

.not_data{
	font:Tahoma, Geneva, sans-serif;
	font-size:10px;
	color:#666;
}

.not_texto{
	font:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#000;
	text-align:justify;
}

.not_fotocapa{
	text-align:center;
}

HTML:

<table cellspacing="5" cellpadding="0" border="0" width="100%"><tbody><tr>
	<td valign="top"><img height="20" width="10" src="/imagens/noticia_titulo.gif"/> <a class="not_titulo" href="noticias.php?acao=ler&id_noticia=24">Joines de Natal: site disponibiliza regulamentos e informações </a><br/><font class="not_data">(17/11/2009)<br/></font><img align="bottom" src="/imagens/noticias/8728.jpg" class="not_fotocapa"/><br/><font class="not_texto">O presidente do Comitê Organizador dos V Jogos de Integração da Polícia Federal no Nordeste (Joines), Francisco Ferreira Fontes, comunica aos atletas e dirigentes que o site...</font></td>
	<td valign="top"><img height="20" width="10" src="/imagens/noticia_titulo.gif"/> <a class="not_titulo" href="noticias.php?acao=ler&id_noticia=23">Benefício da bolsa-prisão vira polêmica</a><br/><font class="not_data">(17/11/2009)<br/></font><img align="bottom" src="/imagens/noticias/7374.jpg" class="not_fotocapa"/><br/><font class="not_texto">Conhecido por seus críticos como “bolsa bandido”, o auxílio reclusão – pago mensalmente pelo governo federal a 25 mil famílias dependentes de presos – já custou ...</font></td>
</tr><tr>
	<td valign="top"><img height="20" width="10" src="/imagens/noticia_titulo.gif"/> <a class="not_titulo" href="noticias.php?acao=ler&id_noticia=22">Câmara analisa paridade para servidores inativos </a><br/><font class="not_data">(17/11/2009)<br/></font><img align="bottom" src="/imagens/noticias/9538.jpg" class="not_fotocapa"/><br/><font class="not_texto">A comissão especial criada pela Câmara dos Deputados para analisar a concessão de vencimentos integrais com paridade para os servidores aposentados por invalidez permanente,...</font></td>
	<td valign="top"><img height="20" width="10" src="/imagens/noticia_titulo.gif"/> <a class="not_titulo" href="noticias.php?acao=ler&id_noticia=21">Feriados e Pontos facultativos de 2010</a><br/><font class="not_data">(17/11/2009)<br/></font><img align="bottom" src="/imagens/noticias/3360.jpg" class="not_fotocapa"/><br/><font class="not_texto">O Ministério do Planejamento publicou a Portaria 834, que enumera os feriados e pontos facultativos a serem observados pela administração federal no ano de 2010. De acordo com o...</font></td>
</tr></tbody></table>

Esse HTML está sendo carregado através da função load() do Jquery dentro de uma DIV. A primeira TD não está carregando o CSS, mas as atribuições do CSS estão funcionando normalmente nas outras 3 TD (html sendo gerado por PHP)

 

Estou querendo fazer o texto da noticia ser exibido com um alinhamento justificado e a foto de capa seja centralizada. Como eu poderia resolver esses 2 problemas?

 

LINK: http://ansefalagoas.com.br/

[Thiago Retondar 18]

Não entendi. =/ Aqui está normal. Olhe:

 

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Diego Macêdo 6]

Aqui realmente tá normal no primeiro quadro, olhei pelo IE e tá normal, deve ser o cache do meu firefox.

 

Mas como eu faço para alinhar as fotos ao centro?

E deixar o texto justificado (creio que ele não esteja errado meu CSS pra isso, pois modifiquei pra left, right, center e não mudou nada)?

 

Vlw Thiago

[Thiago Retondar 18]

Essas imagens estão todas com o mesmo tamanho, certo?

 

Só definir o width e colocar margin: 0 auto.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[angelorubin 142]

Boa tarde,

 

Sinceramente eu aconselho você a padronizar, pois tentar usar padrões em uma estrutura sem padrão nenhum fica muito dificil.

 

O uso de tabela que não se faz necessário neste caso ao meu entender.

 

Apenas um trecho do codigo para os amigos de forum entenderem do que falo:

 

 

<td valign="top">
    <img src="/imagens/noticia_titulo.gif" width="10" height="20"> 
    <a href="noticias.php?acao=ler&id_noticia=21" class="not_titulo">Feriados e Pontos facultativos de 2010</a><br>
    <font class="not_data">(17/11/2009)<br></font>
    <img class="not_fotocapa" src="img/3360.jpg" align="bottom"><br>
    <font class="not_texto">O Ministério do Planejamento publicou a Portaria 834, que enumera os feriados e pontos facultativos a serem observados pela administração federal no ano de 2010. De acordo com o...</font>
    </td>

Espero que corrija e retorne para podermos ajuda-lo melhor.

[Diego Macêdo 6]

Thiago, não funcionou! =/

 

Ficou assim minha CSS:

.not_fotocapa{
  width: 200px;
  margin: 0 auto;
}

Angelo, o que seria padronizar pra você neste caso? Todos os elementos dentro das TD estão usando CSS. Que outra alternativa você teria?

[Thiago Retondar 18]

O .not_fotocapa é o que? A imagem? Um elemento que engloba a imagem?

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Diego Macêdo 6]

É isso aqui ó:

HTML
<img class="not_fotocapa" src="....." />

CSS
.not_fotocapa{
  width: 200px;
  margin: 0 auto;
}

[Maujor 144]

Acrescente a declaração display: block;

.not_fotocapa{
       display:block;
width:200px;
       margin:0 auto;
   }

[Diego Macêdo 6]

Boa Maujor!

 

Obrigadão! A parte das imagens foi resolvido, agora falta ajustar o texto pra ficar "justificado". Pq não tá funcionando?

[angelorubin 142]

Boa tarde,

 

Eu não entendo uso de BR dentro do FONT, usar tabela não vi necessidade, porque para posicionar os elementos que estão ali dentro tais como: IMG e outros outros não existe a necessidade de tabela, tabela e para dados tabulares.

 

Minha idéia de soluçao standard:

 

4 divs com os elementos dentro ja resolveria sem a tabela como forma de estruturar o layout.

 

Bem é uma apenas uma sugestao que ao meu ver facilitaria.

[Maujor 144]

.not_data{
font:Tahoma, Geneva, sans-serif;
font-size:10px;
color:#666;
       display:block;
       text-align:center;
     }

[Diego Macêdo 6]

Maujor, você se equivocou, o problema é na notícia mesmo.

 

Atualmente está assim:

.not_texto{
  color: #000;
  font-size: 12px;
  text-align: justify;
}

Independente do que eu botar no "text-align", seja "right, left, center" ele não altera nada. Mas gostaria que ficasse realmente justificado, pois não está.

[Thiago Retondar 18]

Você está usando a tag font. Troque por p.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Diego Macêdo 6]

É verdade Thiago, vacilei. Tava focado no PHP e no CSS e acabei da tag font.

[Thiago Retondar 18]

Que bom que resolveu. ;)

 

Tópico [Resolvido].

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif