Преобразование макета таблицы в Div

Question

Я реализую элемент управления комментариями, который использует ASP.Repeater для отображения каждого комментария. Сам комментарий в настоящее время отображается с использованием таблицы, чтобы разделить некоторые изображения для отображения комментария в виде пузырька.

Я знаю, что таблицы, как предполагается, являются воплощением зла для верстки дизайна и действительно дорогие для отображения в браузере, но я не совсем уверен, как поставить мои закругленные углы в правильном месте и убедиться, что все линии до.

У кого-нибудь есть какие-либо предложения, примеры, хаки для требуемого HTML / CSS или я должен просто придерживаться таблиц и надеяться на лучшее?

Answer 1

Лучшим ресурсом, который я видел для создания закругленных углов с использованием элементов DIV, была статья «A List Apart» - см. http://alistapart.com/articles/customcorners/. Если вы хотите использовать элементы DIV для разметки всего сайта, есть Есть несколько других соответствующих статей на этом сайте. См:

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

Answer 2

Есть несколько разных способов сделать закругленные углы в CSS

Я предпочитаю использовать CSS для таблиц всякий раз, когда это возможно, просто потому, что я считаю, что код гораздо проще поддерживать, и это звучит как проект с идеальной областью, чтобы вымочить ноги.

Answer 3

Если вы хотите представить пользователям IE острые углы, закругленные углы можно легко решить с помощью свойства CSS border-radius. Ни один браузер в настоящее время не реализует его как базовое свойство, но некоторые используют его как префиксное свойство. Например, чтобы использовать его в Firefox, вы должны использовать свойство -moz-border-radius, для Safari - -webkit-border-radius и т. Д.

Answer 4

Короче говоря, вы бы хотели что-то вроде этого:

<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>

Это должно начать вас. Я специально не пробовал код и могу сделать полный пример при необходимости.