Convertendo Tabela Esquema Para Div

Question

Estou implementando um comentário controle que utiliza um ASP.Repeater para exibir cada comentário. O comentário em si está sendo exibida atualmente usando uma tabela para dividir algumas imagens para exibir o comentário em uma bolha.

Eu sei que tabelas são suposto ser o epítome do mal para o layout do design, e muito caro para ser exibido para o navegador, mas eu não sei exatamente como colocar meus cantos arredondados no local correto e certificar-se de linhas de tudo -se.

Alguém tem alguma sugestão, exemplos, hacks para o HTML / CSS necessário, ou devo ficar com mesas e esperar o melhor?

Answer 1

O melhor recurso que eu vi para criar cantos arredondados usando elementos DIV era um artigo sobre "A List Apart" - veja http://alistapart.com/articles/customcorners/ . Se você estiver olhando para usar elementos DIV para o layout de todo o seu site, existem vários outros artigos relevantes nesse site. Veja:

http://alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/
http://www.alistapart.com/articles/negativemargins/

Answer 2

Existem algumas maneiras diferentes de fazer cantos arredondados em CSS

Eu prefiro usar CSS para tabelas sempre que possível, só porque eu encontrar o código para ser muito mais fácil de manter, e isso soa como um projeto com o escopo perfeito para obter seus pés molhados.

Answer 3

Em suma, você iria querer algo parecido com isto:

<style>
  .start { background-image: url("topofbubble.png"); height: <heightofimage>; }
  .end { background-image: url("bottomofbubble.png"); height: <heightofimage>; }
  .body {background-image: url("sliceofbubblemiddle.png"); }
</style>

...

<div class="comment">
  <span class="start"></span>
  <span class="body">I would like to say that div layouts are far better than table layouts.</span>
  <span class="end"></style>
</div>

Isso deve começar. Eu não experimentar o código especificamente e pode fazer um exemplo completo, se necessário.

Answer 4

Se você está disposto a apresentar os usuários do IE com cantos afiados, cantos arredondados são trivialmente solucionável com a propriedade border-radius CSS. Nenhum navegador atualmente implementa-lo como uma propriedade de base, mas várias tarefas como uma propriedade pré-fixada. Por exemplo, para usá-lo no Firefox, você usaria o -moz-border-radius propriedade, para o Safari, o uso -webkit-border-radius, etc.