Преобразование макета таблицы в Div
Я реализую элемент управления комментариями, который использует ASP.Repeater для отображения каждого комментария. Сам комментарий в настоящее время отображается с использованием таблицы для разделения некоторых изображений и отображения комментария в виде пузыря.
Я знаю, что таблицы должны быть воплощением зла для макета дизайна и очень дороги для отображения в браузере, но я не совсем уверен, как разместить закругленные углы в правильном месте и убедиться, что все выровнено.
Есть ли у кого-нибудь предложения, примеры, хаки для необходимого HTML / CSS, или я должен просто придерживаться таблиц и надеяться на лучшее?
Ответы 4
Есть несколько способов сделать закругленные углы в CSS
Я предпочитаю использовать CSS вместо таблиц, когда это возможно, просто потому, что я считаю, что код намного проще поддерживать, и это звучит как проект с идеальной областью, чтобы вы могли намочить ноги.
Короче говоря, вам нужно что-то вроде этого:
<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>
Это должно вас начать. Я специально не пробовал код и при необходимости могу сделать полный пример.
Это хорошее предложение, но не совсем то, что мне нужно, так как ширина плавная, для каждой стороны должна быть центральная линия, которую можно повторять.
Да, ответить на эти вопросы - это всегда хорошая идея. :) Ситуация усложняется, если она плавная, и вам понадобится больше div. Это одна из самых сложных вещей в дизайне CSS, но по большей части это крайний случай.
Лучшим ресурсом, который я видел для создания закругленных углов с использованием элементов 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/
Если вы хотите представить пользователям IE острые углы, закругленные углы легко решить с помощью свойства border-radius CSS. В настоящее время ни один браузер не реализует его как базовое свойство, но некоторые делают это как свойство с префиксом. Например, чтобы использовать его в firefox, вы должны использовать свойство -moz-border-radius, для Safari использовать -webkit-border-radius и т. д.
Таблицы CSS - это своего рода оксюморон. Не в буквальном смысле, а в логическом смысле. Дизайн CSS должен использовать таблицы только для табличных данных, а не для позиционирования контента.