Jump to content
Fórum Script Brasil
  • 0

Texto ao redor de uma tabela


©JOÃO GABRIEL MARQUES

Question

Olá mestres! Preciso de um help de vocês!

Seguinte: eu estou fazendo a seção de notícias do meu site, pelo Dreamweaver, e estou fazendo agora a página que será responsável por exibir o texto completo da notícia. Nessa página e em algumas notícias eu precisarei colocar uma tabela com uma imagem relacionada à notícia, e a imagem tem que estar dentro de uma tabela porque a imagem terá que ter os créditos e a legenda (isso será de forma dinâmica, isto é, PHP) e eu gostaria de saber como eu faço para que o texto da notícia "contorne" a tabela, isto é, a tabela da imagem deve ter um espaçamento de uns 3 px em relação ao texto da notícia.

Cito como exemplo o site da Folha Online. Acessem o seguinte endereço e vejam o que eu quero fazer: http://www1.folha.uol.com.br/folha/mundo/ult94u356516.shtml

Nesse caso, o texto contorna o banner publicitário e a tabela que contém a imagem, ambos os elementos na mesma página.

Como eu faço isso? Será que eu tenho que usar camadas ao invés de tabelas??

Obrigado!

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Po cara... num sei se entendi direito... mas me permitam ousar responder...

Tipo... acho que pode fazer tanto com tabela como com div... mas acho div sempre mais negócio... (opinião pessoal)... de qualquer. forma acho que da pra resolver isso sem usar nenhum dos dois... tipo tenta colocar isso aqui na tag onde tu quiseres que o texto "contorne":

style="float: left"

não sei se era isso que tu queria... mas é um palpite pelo que eu entendi da tua explicação...

qualquer. coisa posta aí denovo!

[]'s Notax

Link to comment
Share on other sites

  • 0

Notax acho que é isso mesmo ele quer:

Exemplo do Notax aplicado:

<style>
#conteudo{
width:600px;
background:#f0f0f0;
height:auto;
display:table;
}
#conteudo p{
margin:5px;
padding:0px;
text-align:justify;
}
.classes{
margin:10px;
float:right;
}
</style>
<div id="conteudo">
<img src="banner.jpg" alt="titulo" class="classes"/>
<p>
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
 </p>
</div>

o <img> é o banner vocÊ pode aplicar tambem a Animações em flash

tanto quantos outros elementos

;)

Edited by hipnos na area
Link to comment
Share on other sites

  • 0

João,

O alinhamento de tabelas pode ser feito na própria tag TABLE. Definir um alinhamento à esquerda, por exemplo, fará a tabela ficar à esquerda e o texto a seu redor. Os valores aceitos são left | center | right

<table align="left"> ... </table>
Agora pra definir precisamente (a seu gosto) a distancia do texto até a tabela você deve usar CSS. Mais especificamente a propriedade margin. Se você olhar o código da FolhaOnline você verá que foi exatamente isso que eles fizeram. Veja que eles definiram que a distancia do texto até a parte de baixo da tabela deve ser de 10px, o mesmo acontece para a distância do texto até a lateral direita da tabela.:
<table class="fe330"> ... imagem e legenda ... </table>


#articleNew table.fe330 {
   width: 330px;
   margin: 0 10px 10px 0;
   float: left;
   border-collapse: collapse;
   border-spacing: 0 0;
}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152k
    • Total Posts
      651.6k
×
×
  • Create New...