Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Отдельная рамка над фото

Обсуждение темы Отдельная рамка над фото в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Здравствуйте. Хочется сделать на страницах сайта почти все фото в рамочки. Делать в фотошопе не хочу, потому как сами фото будут часто менятся, ...


Закрытая тема
 
Опции темы
Старый 14.04.2009, 01:13   #1
Здравствуйте. Хочется сделать на страницах сайта почти все фото в рамочки. Делать в фотошопе не хочу, потому как сами фото будут часто менятся, а прогонять каждую новую фото через фотошоп-муторно.
Подумал что можно сделать прозрачную всередине рамку и как то с помощью CSS накладывать её на нужные фото. Вот только не соображу как на одно место поставить два IMG....
 
Старый 14.04.2009, 01:13
Ссылки
Старый 14.04.2009, 01:38   #2
Поставить одно изображение фоном.

Использовать position:absolute.
 
Старый 14.04.2009, 01:39   #3
img {
border: 1px;
border-color: #000000;
}
 
Старый 14.04.2009, 01:58   #4
Цитата:
Сообщение от Aldes Посмотреть сообщение
img {
border: 1px;
border-color: #000000;
}
Нет я хочу не просто обвести, а раму старинного зеркала на все фото поставить.

Добавлено через 6 минут

Цитата:
Сообщение от kost Посмотреть сообщение
Поставить одно изображение фоном.

Использовать position:absolute.
Тогда для каждой фото надо будет делать контейнер?

Последний раз редактировалось Fobus; 14.04.2009 в 01:58.. Причина: Добавлено сообщение
 
Старый 14.04.2009, 03:50   #5
Цитата:
Сообщение от Fobus Посмотреть сообщение
Тогда для каждой фото надо будет делать контейнер?
Да.
 
Старый 14.04.2009, 09:31   #6
Если есть возможность использовать PHP, то удобнее всего будет воспользоваться библиотекой GD
 
Старый 14.04.2009, 11:34   #7
Цитата:
Сообщение от kost Посмотреть сообщение
Да.
Сделал контейнер на странице
Код:
<div class="ramka"></div>
в таблице стилей сделал
Код:
.ramka { 
        width: 700px;
        height: 300px;
        background-image: url('zerkalo2.gif')
}
zerkalo2.gif - это файл рамки с прозрачной серединой. И рамка теперь лежит ниже фото. Это и правильно я ведь её сделал как фон.......Но нужно чтобы она была наверху. Тоесть получается что я должен каждую фото заносить в таблицу стилей, а на каждой странице вставлять одну и туже рамку 10 раз? Это ещё хуже чем фотки отдельно в фотошопе рамкой украшать...........
 
Старый 14.04.2009, 16:14   #8
Цитата:
Сообщение от Fobus Посмотреть сообщение
Тоесть получается что я должен каждую фото заносить в таблицу стилей, а на каждой странице вставлять одну и туже рамку 10 раз?
Если картинки — это контент, а не декоративное оформление, то идея, вообще, плохая — класть их фоном. Но если очень хочется, то можно пописывать в inline-стилях.

Код HTML:
<div class="ramka" style="background-image: url(image.jpg)">
<img src="zerkalo2.gif" alt="" />
</div>
Это был вариант с background.

Добавлено через 6 минут

Вариант с абсолютным позиционированием.

Код HTML:
<div class="framed-image">
  <img src="image.jpg" alt="Фото" />
  <div class="frame"></div>
</div>
Все картинки, как я понимаю, одинакового размера.

CSS:
Код:
.framed-image {
  position:relative;
  width: 700px;
  height: 300px;
}

.frame {
  position:absolute;
  top:0;
  left:0;
  width: 700px;
  height: 300px;
  background: url('zerkalo2.gif') 0 0 no-repeat;
}

.framed-image img {
  display:block;
}

Последний раз редактировалось kost; 14.04.2009 в 16:14.. Причина: Добавлено сообщение
 
Этот пользователь сказал спасибо kost за это полезное сообщение:
Silver (15.04.2009)
Старый 14.04.2009, 16:14
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Неровная рамка genius HTML, CSS, JavaScript 16 03.04.2010 13:11
Рамка с круглыми углами jangot HTML, CSS, JavaScript 3 10.09.2007 19:23
рамка вокруг текста 100tik HTML, CSS, JavaScript 2 04.12.2006 00:30
рамка у flash'ки в IE zephs HTML, CSS, JavaScript 0 21.07.2006 18:46
Рамка таблицы Денисон HTML, CSS, JavaScript 2 01.08.2003 19:55


Текущее время: 19:48. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум