| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > Вёрстка веб-сайтов > div с закругленными границами |
| Автор: GRIENDERS 3.3.2008, 23:30 |
| Чтобы по краям были закруглены. Как такой сверстать? Примерчик плиз набросайте. Я пробовал вставить картинку по краям, но все равно ничего не получилось. з.ы. - я знаю что нет ничего проще, чем взять и посмотреть исходный код, но в нем содержаться ссылки на всякие таблицы стилей и их нужно все просматривать... |
| Автор: Се ля ви 3.3.2008, 23:56 |
| Я обычно делал так - ставил в слой таблицу, в которой в уголках ставил картинки закруглённых краёв и чуть-чуть смещал их так: position: relative; left: -1px; top: -1px; Если ещё и засунуть их во внутренний слой с position: absolute, то они и места на странице занимать не будут и соответственно не будут смещать текст |
| Автор: GRIENDERS 4.3.2008, 08:55 |
| Се ля ви, набросайка код. |
| Автор: SelenIT 4.3.2008, 09:27 |
| Вариантов на самом деле масса: 1) Стандартный - свойство border-radius (CSS3). К сожалению, на сегодня поддерживается лишь в Gecko (в виде -moz-border-radius). 2) Традиционный - табличка 3×3: в угловых ячейках картинки с закруглениями (можно как фон), в крайних - соответственно, фон с границей, в центральной - сам контент. Смещать картинки, как предложил Се ля ви, имхо, совсем не обязательно. Плюс: поддерживается везде. Минус: много бессмысленного кода. 3) CSS+картинки. Метод основан на технике http://cssing.org.ua/2006/06/08/css-sliding-doors/ - левый уголок рисуется как фон внешнего контейнера, правый - как фон внутреннего (или наоборот, по ситуации). Плюс - более аккуратный и осмысленный код, поддерживается всеми современными браузерами. Минус - лишний контейнер все равно нужен. 4) Картинки, отпозиционированные абсолютно по углам дива с position:relative (у верхней левой - top:0;left:0; у правой нижней - bottom:0; right: 0; и т.д.). Плюс - наглядность. Минус - опять же несемантичный код (как и в случае таблицы, хотя и гораздо меньше), возможные небольшие глюки в IE (иногда картинки отстают на 1px от правой и нижней границы). 5) http://www.html.it/articoli/niftycube/index.html. Минус - извратная (хоть и по-своему красивая) идея в основе. Плюс - работает при отключенных картинках, есть готовые JS-библиотеки для наложения эффекта на что угодно (разумеется, требуется включенный JS). 6) VML (http://blogs.msdn.com/ie/archive/2005/06/23/431980.aspx#438394). Поддерживается только в IE (зато в нем рисуется красиво!). |
| Автор: GRIENDERS 4.3.2008, 17:44 |
| всем спасибо, разобрался |