![]() |
|
Модераторы: Illuminaty |
![]()
|
|
| GRIENDERS |
|
|||
|
Шустрый ![]() Профиль Группа: Участник Сообщений: 86 Регистрация: 19.2.2007 Репутация: нет Всего: 1 |
Чтобы по краям были закруглены. Как такой сверстать? Примерчик плиз набросайте.
Я пробовал вставить картинку по краям, но все равно ничего не получилось. з.ы. - я знаю что нет ничего проще, чем взять и посмотреть исходный код, но в нем содержаться ссылки на всякие таблицы стилей и их нужно все просматривать... |
|||
|
||||
| Се ля ви |
|
|||
![]() Java/SOAрхитектор ![]() ![]() ![]() ![]() Профиль Группа: Модератор Сообщений: 2016 Регистрация: 5.6.2004 Где: place without tim e and space Репутация: 1 Всего: 127 |
Я обычно делал так - ставил в слой таблицу, в которой в уголках ставил картинки закруглённых краёв и чуть-чуть смещал их так:
position: relative; left: -1px; top: -1px; Если ещё и засунуть их во внутренний слой с position: absolute, то они и места на странице занимать не будут и соответственно не будут смещать текст -------------------- |
|||
|
||||
| GRIENDERS |
|
|||
|
Шустрый ![]() Профиль Группа: Участник Сообщений: 86 Регистрация: 19.2.2007 Репутация: нет Всего: 1 |
Се ля ви, набросайка код.
|
|||
|
||||
| SelenIT |
|
|||
![]() баг форума ![]() ![]() ![]() ![]() Профиль Группа: Завсегдатай Сообщений: 3996 Регистрация: 17.10.2006 Где: Pale Blue Dot Репутация: 97 Всего: 401 |
Вариантов на самом деле масса:
1) Стандартный - свойство border-radius (CSS3). К сожалению, на сегодня поддерживается лишь в Gecko (в виде -moz-border-radius). 2) Традиционный - табличка 3×3: в угловых ячейках картинки с закруглениями (можно как фон), в крайних - соответственно, фон с границей, в центральной - сам контент. Смещать картинки, как предложил Се ля ви, имхо, совсем не обязательно. Плюс: поддерживается везде. Минус: много бессмысленного кода. 3) CSS+картинки. Метод основан на технике "раздвижных дверей" - левый уголок рисуется как фон внешнего контейнера, правый - как фон внутреннего (или наоборот, по ситуации). Плюс - более аккуратный и осмысленный код, поддерживается всеми современными браузерами. Минус - лишний контейнер все равно нужен. 4) Картинки, отпозиционированные абсолютно по углам дива с position:relative (у верхней левой - top:0;left:0; у правой нижней - bottom:0; right: 0; и т.д.). Плюс - наглядность. Минус - опять же несемантичный код (как и в случае таблицы, хотя и гораздо меньше), возможные небольшие глюки в IE (иногда картинки отстают на 1px от правой и нижней границы). 5) Nifty corners. Минус - извратная (хоть и по-своему красивая) идея в основе. Плюс - работает при отключенных картинках, есть готовые JS-библиотеки для наложения эффекта на что угодно (разумеется, требуется включенный JS). 6) VML (пример). Поддерживается только в IE (зато в нем рисуется красиво!). -------------------- Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму! |
|||
|
||||
| GRIENDERS |
|
|||
|
Шустрый ![]() Профиль Группа: Участник Сообщений: 86 Регистрация: 19.2.2007 Репутация: нет Всего: 1 |
всем спасибо, разобрался
|
|||
|
||||
![]()
|
| 0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей) | |
| 0 Пользователей: | |
| « Предыдущая тема | Вёрстка веб-сайтов | Следующая тема » |
|
|
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности Powered by Invision Power Board(R) 1.3 © 2003 IPS, Inc. |