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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> углы, верстка + яс 
:(
    Опции темы
Ctulhy
Дата 21.11.2008, 13:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 137
Регистрация: 2.8.2008
Где: Россия, Курск

Репутация: 2
Всего: 2
есть резиновая рамка, обтекающая картинки.
Нужно сделать так, чтобы она не обтекала картинки, а накладывалась на их края, при этом сама картинка не должна быть бэкграундом. Долго думал, ничего так и не придумал. Может кто подскажет как это реально реализовать? впринципе можно налажить блок сверху, при помощи, к примеру абсолютного позиционирования, но.. размеры фотографий различные.
--------------------
скучно в Москве и дождливо в Крыму.
PM MAIL ICQ Skype   Вверх
ksnk
Дата 21.11.2008, 18:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
как-нибудь так
Код

<style>
.line ,.corner {position:absolute;width:20px;height:20px; overflow:hidden; z-index:2;}
.corner {z-index:3;}
</style>
<div style="position:relative;width:600px;height:400px;">

<img width="100%" height="100%" src="IMAGE.gif" alt="Картинко!">

<div class="corner " style="top:0;left:0;background:url(TOP-LEFT-CORNER.gif) no-repeat;"></div>
<div class="corner " style="top:0;right:0;background:url(TOP-RIGHT-CORNER.gif) no-repeat;"></div>
<div class="corner " style="bottom:0;left:0;background:url(BOTTOM-LEFT-CORNER.gif) no-repeat;"></div>
<div class="corner " style="bottom:0;right:0;background:url(BOTTOM-RIGHT-CORNER.gif) no-repeat;"></div>

<div class="line" style="width:100%;top:0;left:0:;background:url(TOP-LINE.gif) repeat-x;"></div>
<div class="line" style="height:100%;top:0;right:0;background:url(RIGHT-LINE.gif) repeat-y;"></div>
<div class="line" style="width:100%;bottom:0;left:0;background:url(BOTTOM-LINE.gif) repeat-x;"></div>
<div class="line" style="height:100%;top:0;left:0;background:url(LEFT-LINE.gif) repeat-y;"></div>
</div>



--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Ctulhy
Дата 21.11.2008, 19:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 137
Регистрация: 2.8.2008
Где: Россия, Курск

Репутация: 2
Всего: 2
не работает, во вложении пример того, что получается

Это сообщение отредактировал(а) Ctulhy - 21.11.2008, 19:14

Присоединённый файл ( Кол-во скачиваний: 5 )
Присоединённый файл  files.rar 3,04 Kb
--------------------
скучно в Москве и дождливо в Крыму.
PM MAIL ICQ Skype   Вверх
ksnk
Дата 21.11.2008, 19:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
Картинки линий-то так явно путать не надо!
Да и гифки неплохо бы прозрачные...




--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Ctulhy
Дата 21.11.2008, 19:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 137
Регистрация: 2.8.2008
Где: Россия, Курск

Репутация: 2
Всего: 2
не, ну может я и туговат, не спорю, но.. см. вложение smile

Присоединённый файл ( Кол-во скачиваний: 3 )
Присоединённый файл  Untitled_4.rar 3,02 Kb
--------------------
скучно в Москве и дождливо в Крыму.
PM MAIL ICQ Skype   Вверх
ksnk
Дата 21.11.2008, 19:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
См вложение... smile

Присоединённый файл ( Кол-во скачиваний: 8 )
Присоединённый файл  test5.rar 17,53 Kb


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Ctulhy
Дата 21.11.2008, 19:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 137
Регистрация: 2.8.2008
Где: Россия, Курск

Репутация: 2
Всего: 2
не кроссбраузерно, в ИЕ6 верхняя линия уезжает за пределы блока, без всяких видимых причин, справа фото на 1 пиксель выходит за рамку оО
а так, пасиб огромное за помощь smile
--------------------
скучно в Москве и дождливо в Крыму.
PM MAIL ICQ Skype   Вверх
ksnk
Дата 21.11.2008, 20:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
У меня там ошибка-опечатка, но это уже как-нибудь сам  smile


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Slazen12
Дата 22.11.2008, 01:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




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


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

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