Показано с 1 по 8 из 8

Тема: Изображения в рамке с закругленными углами

  1. #1

    Регистрация
    06.05.2010
    Адрес
    Веллингтон
    Сообщений
    5
    Доброго времени суток!

    Собственно нахожусь на стадии обучения верстке.
    Хотелось бы обратиться с вопросом к профессионалу.

    В третьем макете в своей "карьере верстальщика" столкнулся с проблемой.
    В одной из внутренних страниц а также в новостных блоках в сайдбаре используются изображения в рамке с округленными углами.
    [Только зарегистрированные пользователи могут видеть ссылки. ]

    Вопрос: Возможно ли посредством HTM+CSS или же js (здесь я полный дуб) добиться поставленной задачи?
    Т.е. чтобы изображения определенной ширины и высоты обводились рамкой и округлялись углы и естественно чтобы это дело было кроссбраузерно.

    Благодарю за внимание.


  2. #2

    Регистрация
    22.01.2010
    Сообщений
    5
    Код:
    <div>Тут картинка на которую наложится рамка
    <div id="тут фоном прописать рамку в формате gif с прозрачностью в центре"></div>
    </div>

  3. #3

    Регистрация
    06.05.2010
    Адрес
    Веллингтон
    Сообщений
    5
    mason1387, Спасибо Вам.

    Собственно рамку сделал .png, ибо .gif не понял, что такое закругленные углы.
    Дальше задал position: relative, распределил слои z-index&#39;ами и поднял рамку отрицательным margin&#39;ом.
    Все конечно супер, и .png фикс стоит под IE6, только вот изображения должны быть под ссылками, а рамка получается и сcылки накрывает...

    Ну что ж, еще раз благодарю и пойду думать над задачкой...)

  4. #4

    Регистрация
    31.05.2010
    Адрес
    Новосиб
    Сообщений
    59
    Если я просто кину пример, вы разберетесь?
    [Только зарегистрированные пользователи могут видеть ссылки. ]

    Еще я видел вариант, правда не знаю на сколько он валидный.
    (ссылка)(картинка "пнг с прозрачной серединой" стиль="фон: целевая картинка"/) (/ссылка)

    Хотя раз стиль прописан в самом коде, то доктайп придется переходным сделать

  5. #5

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Хотя раз стиль прописан в самом коде, то доктайп придется переходным сделать
    Это с какого перепугу?)

  6. #6

    Регистрация
    31.05.2010
    Адрес
    Новосиб
    Сообщений
    59
    Это с какого перепугу?
    Такая мысль пришла после прочтения данной статьи.
    [Только зарегистрированные пользователи могут видеть ссылки. ]

    а точнее
    HTML 4.01 Strict — Не разрешает презентационной (оформительской) разметки, аргументируя тем, что этоим должен заниматься CSS.
    Transitional DTD позволяет некоторые устаревшие аттрибуты и элементы

  7. #7

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Такая мысль пришла после прочтения данной статьи.
    Увы, к вам пришла неправильная мысль. Элемент <style>...</style>, хоть в нем и нет ничего хорошего, официально нерекомендуемым или устаревшим [Только зарегистрированные пользователи могут видеть ссылки. ] и, как следствие, совершенно не противоречит ни одному DTD.

  8. #8

    Регистрация
    31.05.2010
    Адрес
    Новосиб
    Сообщений
    59
    Ну значит, если не считать последнего предложения, мой совет можно расценить, как правильный и полезный.

Похожие темы

  1. Изменяемые изображения
    от Garic в разделе Вёрстка сайта
    Ответов: 6
    Последнее сообщение: 11.05.2008, 23:22
  2. Обработка изображения
    от pancho в разделе Растровая графика
    Ответов: 4
    Последнее сообщение: 26.12.2007, 13:45
  3. TAB'ы с закругленными краями ?
    от misfit в разделе Вёрстка сайта
    Ответов: 4
    Последнее сообщение: 09.03.2007, 16:41
  4. TAB'ы с закругленными краями ?
    от misfit в разделе Веб-программирование
    Ответов: 1
    Последнее сообщение: 09.03.2007, 15:40
  5. Выделение изображения ???
    от Alekse-y в разделе Растровая графика
    Ответов: 8
    Последнее сообщение: 05.12.2005, 22:46

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •