Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> div с закругленными границами 
:(
    Опции темы
GRIENDERS
Дата 3.3.2008, 23:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 86
Регистрация: 19.2.2007

Репутация: нет
Всего: 1



Чтобы по краям были закруглены. Как такой сверстать? Примерчик плиз набросайте.
Я пробовал вставить картинку по краям, но все равно ничего не получилось.


з.ы. - я знаю что нет ничего проще, чем взять и посмотреть исходный код, но в нем содержаться ссылки на всякие таблицы стилей  и их нужно все просматривать...
PM MAIL   Вверх
Се ля ви
Дата 3.3.2008, 23:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Java/SOAрхитектор
****


Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 1
Всего: 127



Я обычно делал так - ставил в слой таблицу, в которой в уголках ставил картинки закруглённых краёв и чуть-чуть смещал их так:
position: relative; left: -1px; top: -1px; Если ещё и засунуть их во внутренний слой с position: absolute, то они и места на странице занимать не будут и соответственно не будут смещать текст


--------------------
  )
 (
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...
PM MAIL WWW Skype GTalk   Вверх
GRIENDERS
Дата 4.3.2008, 08:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 86
Регистрация: 19.2.2007

Репутация: нет
Всего: 1



Се ля ви, набросайка код.
PM MAIL   Вверх
SelenIT
Дата 4.3.2008, 09:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 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 (зато в нем рисуется красиво!).



--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
GRIENDERS
Дата 4.3.2008, 17:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 86
Регистрация: 19.2.2007

Репутация: нет
Всего: 1



всем спасибо, разобрался
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0771 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.