Найти на сайте
  2. Форумы
  3. МАСТЕРСКАЯ
  4. Дизайн / Графика / Искусство
  5. Изображение рамки поверх страницы

Изображение рамки поверх страницы

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 2.X
#16 20 сентября 2017 в 00:34
на вашем примере он должен был бы встать после
в шаблоне
<div id="layout">

причем первый <div из моего предложенного кода брать не надо в вашем коде его роль уже выполняет <div id="layout">
соответственно последний закрывающий </div> брать тоже не надо из моего примера

но

1.я так понимаю, что вы хотите иметь зафиксированную т.е. без прокрутки рамку над контентом, типа окно.
position:absolute; нужно менять на position:fixed

и в этом случае мой код без первого <div и закрывающего </div> можно в принципе вообще вставить вконец шаблона перед </body>

2. в своём примере я исходил из ширины 1000 px у вас там другая ширина, нужно подгонять размеры.
используйте режим разработчика в браузере что бы сразу видеть результат




3. у вас адаптивный дизайн, и на маленьких экранах, вся эта конструкция будет смотреться странно, когда основной шаблон сожмется под экран.

Возможно вам стоит оставить идею наложения рамки именно НАД страницей, и использовать просто рамку с фоном вокруг основного блока над страницей, используя то что предлагает Ris, т.е. border-image.
0
#17 20 сентября 2017 в 02:28

Сайт для детского сада… ну сами понимаете, бесплатно делается, так что прошу никуда ни к кому за денежку не посылать.

vikont
1. Решение засовывать такую картинку в виде рамки или еще как — плохое "шаблонное" решение.
Надо отталкиваться от назначения сайта. Его будут смотреть дети? Не думаю. Скорее всего родители при посещении будут хотеть найти какую либо полезную информацию. И им подобная картинка будет мешать и раздражать. Надо интерфейс делать так чтобы он помогал найти ту информацию за которой люди будут посещать этот сайт. Это НЕ значит что сайт должен выглядеть строго, серо и скучно.

2. Вот вариант (добавьте в любой файл стилей). Вешаете картинку фоном и настраиваете ее внешний вид:
  1. body:before {
  2.     content: "";
  3.     display: block;
  4.     position: fixed;
  5.     width: 100%;
  6.     height: 100%;
  7.     background: transparent url(https://s49e.storage.yandex.net/rdisk/2d00e051f394f3909ac681e857e16bc5a87b8db9ad132a72b1cafc1e14cd73d5/59c1d9e0/tMnXN6uzv2n2g1YA3zVto05wriTQr1PGvKRpfsgaRek5Ucmw90zE7NLyDJ5DEQTjGtANRgFOOis5GIOj3QIlfw==?uid=0&filename=ramka1.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&fsize=1372820&hid=612452a149402ab1d056ef3bc5131f52&media_type=image&tknv=v2&etag=e0cda069e899b8216cfd9092c18d2fec&rtoken=UVI4fFVRvfY1&force_default=no&ycrid=na-1a7bf61af6540520b69cd9692ca6833e-downloader13h&ts=559962ec23800&s=a796b5179f4cfb65dcfc933315849436b568612061bf92ee0bc0b8f70dc9bd65&pb=U2FsdGVkX182GC2638fzQNHK6QjCynns6hVJV9FEEqv_jWjHxYOXEvm1Ub6SLWpuknogRN8xyCftKjXohVQ37cUi9od0fLysM1Qvrl3zxfo=) top;
  8.     background-size: cover; /* contain */
  9.     background-repeat: no-repeat;
  10.     z-index: 100;
  11.     pointer-events: none;
  12. }
поиграйте со свойством background-size (cover / contain ) и положением картинки background… center / top / bottom

3. Картинка квадратная, мониторы обычно прямоугольные. Т.е. при сохранении пропорций часть изображения будет не видно, или же растягивать не пропорционально, что еще хуже.
Лучшим вариантом (если не рассматриваем пункт 1) будет разбить картинку на составляющие (солнце, попугай, енот и т.д.) и расставлять их отдельными изображениями, а уже затем нарисовать рамку. Тогда получится более менее вменяемое решение.
0
#18 20 сентября 2017 в 09:40

Картинка квадратная, мониторы обычно прямоугольные.

Val
Я еще помню, когда все мониторы были только квадратные… наверно старый уже… laugh

Спасибо всем, много дельных и подробных предложений! Особенно Нилу и Val!
Val, я понимаю ваши доводы, все что можно было сделать фотошопом и редактором GIFов сделано и вставлено фоном… рамка сейчас моргает вместе со звездами smile
Внешний вид сайта проходит утверждение заведующей и консультируются с сотрудниками… рамки и картинки дают они и как то хотелось бы самому хоть немного разбавить полученный квадратный дизайн, поэтому завелся наложить рамку сверху, но как оказалось все не так просто...
Но с вашей помощью уже что то стало получаться и видимо получится сборный вариант. Буду накладывать уголочки, верх и низ… Возможно дойду и до вырезания фигурок — это не проблема, просто долго и муторно...
Еще раз всем спасибо, тему пока не закрываю, если кто то что то захочет еще предложить, пожалуйста высказывайтесь. Думаю эта тема интересна не только мне.
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
#19 22 сентября 2017 в 02:13

на вашем примере он должен был бы встать после
в шаблоне
<div id="layout">

Нил™
Поигрался от души, но максимум что получил:
Это с кодом:
  1.     <!--kontent div -->
  2.  
  3. <!-- верхняя часть рамки--->
  4. <div style="width:1290px; height:72px; opacity:0.5; background:#009933 url(images/ramka/top_head1060.png) repeat-x; position:absolute; top:0; left:50%; margin-left:-500px; z-index:1000;"></div>
  5. <!-- нижняя часть рамки--->
  6. <div style="width:1290px; height:202px; opacity:0.5; background:#009933 url(images/ramka/foot.png) repeat-x; position:absolute; bottom:0; left:50%; margin-left:-500px; z-index:1000;"></div>
  7.  
  8. <!-- углы лево верх, право верх, лево низ, право низ--->
  9. <div style="width:260px; height:430px;  opacity:0.5;background:#FFFF00 url(images/ramka/left_head260x430.png) no-repeat; position:absolute; left:0; top:0; z-index:1001;"></div>
  10. <div style="width:233px; height:430px; opacity:0.5; background:#FFFF00 url(images/ramka/right_head1060.png) no-repeat; position:absolute; right:0; top:0; z-index:1001;"></div>
  11. <div style="width:233px; height:370px; opacity:0.5; background:#FFFF00 url(images/ramka/left_foot.png) no-repeat; position:absolute; left:0; bottom:0; z-index:1001;"></div>
  12. <div style="width:255px; height:396px;opacity:0.5; background:#FFFF00 url(images/ramka/right_foot.png) no-repeat; position:absolute; right:0; bottom:0; z-index:1001;"></div>
  13. <!----конец основного дива с контентом--->
  14.  
  15. </head>
Без вашей первой строки, без левой и правой боковых кусков рамки.
И помещен в head, потому, что моя рамка это часть фона! Если ставить в шаблон layout, тогда картинки позиционируются строго на странице.
Если ставить вашу первую строку, то страница смещается в низ...

Самое главное, что куда бы я не ставил код не работает смещение в лево и право, а так же не могу отключить фон картинок, так как тогда они пропадают.
Что подскажите?
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
#20 22 сентября 2017 в 03:19

что моя рамка это часть фона! Если ставить в шаблон layout, тогда картинки позиционируются строго на странице.

vikont

из этого

рамку на страницу сайта, так чтобы частично рамка перекрывала страницу с контентом

vikont


я понял так, что вы хотите положить рамку сверху страницы что бы она частично перекрывала её с прозрачностью.

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

Поэтому указал position:absolute (рамка лежит поверх основного блога (layout) и вращается со страницей) и сказал что можно поменять на position:fixed (рамка неподвижна).

Сейчас я плохо понимаю, что именно вы задумали, но судя по тому что вижу на вашем сайте, вариант с фиксированное рамкой поверх страницы.
Просто поменяйте absolute на fixed везде
Как я понимаю при нормальном размере экрана ваш размер 1180 px

Относительно этого размера, насколько я понимаю, ваш полёт фантазии))

  1. <!-- верхняя часть рамки--->
  2. <div style="width:1180px; height:60px; opacity:0.9; background:#009933 url(top.jpg) repeat-x; position:fixed; top:0; left:50%; margin-left:-590px; z-index:1000;"></div>
  3. <!-- нижняя часть рамки--->
  4. <div style="width:1180px; height:60px; opacity:0.9; background:#009933 url(bottom.jpg) repeat-x; position:fixed; bottom:0; left:50%; margin-left:-590px; z-index:1000;"></div>
  5. <!-- левая часть рамки--->
  6. <div style="width:60px; opacity:0.9; background: #CC0000 url(left.jpg) repeat-x; position:fixed; display:block; height:100%;  min-height:100%; top:0;  left:50%; margin-left:-590px; z-index:1000;"></div>
  7. <!-- правая часть рамки--->
  8. <div style="width:60px; opacity:0.9; background: #CC0000 url(left.jpg) repeat-x; position:fixed; display:block; height:100%;  min-height:100%; top:0;  right:50%; margin-right:-590px; z-index:1000;"></div>
  9. <!-- углы лево верх, право верх, лево низ, право низ--->
  10. <div style="width:60px; height:60px;  opacity:0.9;background:#FFFF00 url(lefttop.jpg) no-repeat; position:fixed; left:50%; margin-left:-590px; top:0; z-index:1001;"></div>
  11. <div style="width:60px; height:60px; opacity:0.9; background:#FFFF00 url(righttop.jpg) no-repeat; position:fixed; right:50%; margin-right:-590px; top:0; z-index:1001;"></div>
  12. <div style="width:60px; height:60px; opacity:0.9; background:#FFFF00 url(leftbottom.jpg) no-repeat; position:fixed; left:50%; margin-left:-590px; bottom:0; z-index:1001;"></div>
  13. <div style="width:60px; height:60px;opacity:0.9; background:#FFFF00 url(rightbottom.jpg) no-repeat; position:fixed; right:50%; margin-right:-590px; bottom:0; z-index:1001;"></div>



Это фиксированная рамка поверх контента которая стоит на месте когда страница крутится. Контент внутри рамки доступен: текст можно выделить, ссылки кликабельны.

Цвета рамкам я задал, только для наглядности, что бы видеть где из каких блоков становится.

что бы убрать цвета нужно из этого background:#FFFF00 удалить это #FFFF00 и так далее.
Я почти убрал прозрачность, она регулируется через "opacity"

позиционирование блока относительно центра страницы
left:50%, marging-left:- (ширина блока относительно которого хотите сдвинуть влево поделенная на 2)
на право
right:50%, marging-right:- (ширина блока относительно которого хотите сдвинуть влево поделенная на 2)


снизу и сверзу просто прилепливается к низу и к верху bottom:0, top:0.
Делать также с левым и правым не стоит потому что при другом размере монтира может выглядеть не так как вы ожидаете, поэтому левый и правый относительно центра как написано выше.
0
#21 22 сентября 2017 в 04:16
Супер! Теперь получил вот это doy134.dsdnr.ru
Осталось нижние картинки опустить вниз
От боковых отказался и все хорошо смотрится.
Код сейчас такой:
  1. <!--kontent div -->
  2. <div style="width:100%; min-height:100%; display:block; position:absolute; margin:0; padding:0; background:">
  3. <!-- верхняя часть рамки--->
  4. <div style="width:1180px; height:72px; opacity:0.9; background: url(images/ramka/top_head1060.png) repeat-x; position:absolute; top:0; left:50%; margin-left:-590px; z-index:1000;"></div>
  5. <!-- нижняя часть рамки--->
  6. <div style="width:1180px; height:202px; opacity:0.9; background: url(images/ramka/foot.png) repeat-x; position:absolute; bottom:0; left:50%; margin-left:-590px; z-index:1000;"></div>
  7. <!-- левая часть рамки--->
  8.  
  9. <!-- углы лево верх, право верх, лево низ, право низ--->
  10. <div style="width:260px; height:430px;  opacity:0.9;background: url(images/ramka/left_head260x430.png) no-repeat; position:absolute; left:47%; margin-left:-590px; top:0; z-index:1001;"></div>
  11. <div style="width:233px; height:430px; opacity:0.9; background: url(images/ramka/right_head1060.png) no-repeat; position:absolute; right:47%; margin-right:-590px; top:0; z-index:1001;"></div>
  12. <div style="width:233px; height:370px; opacity:0.5; background: url(images/ramka/left_foot.png) no-repeat; position:absolute; left:47%; margin-left:-590px; bottom:0; z-index:1001;"></div>
  13. <div style="width:255px; height:396px;opacity:0.5; background: url(images/ramka/right_foot.png) no-repeat; position:absolute; right:47%; margin-right:-590px; bottom:0; z-index:1001;"></div>
Как опустить вниз? Что то опять ничего не двигается… видимо ошибся с кодом.
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
#22 22 сентября 2017 в 07:11

Как опустить вниз? Что то опять ничего не двигается

vikont
Опустить вниз что? Блок с кротом и енотом у меня внизу, появляются при прокрутке страницы.

Блок с солнцем слева вверху.
Вы его выставили через

left: 47%;
margin-left: -590px;

На моём экране это смотрится с 2D эффектом



А так

left: 50%;
margin-left: -645px;

нормально.
0
#23 22 сентября 2017 в 10:19
vikont, дело, конечно не моё. Но прислушайтесь к человеческому совету: откажитесь от текущего оформления сайта.
Украинский для инстант
0
#24 22 сентября 2017 в 11:37

Опустить вниз что? Блок с кротом и енотом у меня внизу, появляются при прокрутке страницы.

Нил™
Да, не смог опустить ниже блок с енотом.

А так

left: 50%;
margin-left: -645px;

нормально.

Нил™
Наверно так правильнее — это привязка к размерам самой рамки.
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
#25 22 сентября 2017 в 11:39

vikont, дело, конечно не моё. Но прислушайтесь к человеческому совету: откажитесь от текущего оформления сайта.

Олег Васильевич я
Готов прислушаться к любым человеческим советам, тем более к вашему, как автора данного шаблона.
Что именно вы предлагаете? Отказаться от наложения или использования вашего шаблона?
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
#26 22 сентября 2017 в 11:51


Готов прислушаться к любым человеческим советам, тем более к вашему, как автора данного шаблона.
Что именно вы предлагаете? Отказаться от наложения или использования вашего шаблона?

vikont
Отказаться от подобной стилизации. Просто подберите соответствующий фон для страницы. Возможно, используйте разные фоны для разных страниц.
Да и шаблон тут явно попроще можно. Но тут, как вам удобнее.
Украинский для инстант
0
#27 22 сентября 2017 в 12:06

Отказаться от подобной стилизации. Просто подберите соответствующий фон для страницы. Возможно, используйте разные фоны для разных страниц.
Да и шаблон тут явно попроще можно. Но тут, как вам удобнее.

Олег Васильевич я
Если честно, то мне самому не очень… поэтому и завелся с наложением, но тут как говорится "сверху спускают" дизайн… потихоньку боремся...

Сам шаблон тоже не очень подходит, так как просят меню с левого боку, а оно тут не работает. Но на этом шаблоне есть возможность менять фон на любой странице. Это будет необходимо для групп. На каком другом такое есть пока не знаю.
Тяжелое это дело — благотворительность… smile
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
#28 22 сентября 2017 в 15:03
На самом деле дизайн конечно "вырви глаз" получается, но просто бесит когда ищешь какой то ответ по php например, а тупорылый гугл или яндекс дает тебе сверху топа страницы где сидит чувак с аватаркой Карла Маркса и иже с ним и вместо конкретных ответов по решению задачи внушают бедной наивной жертве посмевшей обратиться, какое она ничтожество, и вообще ей нужно совсем другое и вообще гугл есть (который посылает по этому вопросу к вам же *здесь слово матом*), и вообще в школе учиться надо было на 5+ и т. п. те же усилия можно было потратить на составление кусочка правильного кода с комментами. Короче бесят))

Картинка в шапке — плывёт. Лучше всё таки взять файл с разрешением по-больше.

Фон можно сделать по проще. Не знаю какая нибудь детская комната в качестве основного бэкграунда, и если так уж хочется наложений пару клипартов (Без рамки) просто сверху в углу солнце клипарт, снизу какой нибудь плюшевый мишка. Вроде такой вариант предлагал господин Val.

То что сейчас — плохо конечно. Но если это кого то радует, почему бы и нет)

По поводу отдельного фона для каждой страницы. Для каждой страницы клуба можно задать разный фон или для каждого клуба?
0
#29 22 сентября 2017 в 16:23
Гугл — без комментариев...., мной выброшен из поисковиков еще лет… цать назад

Фон нужен будет для каждой группы! О странице писалось как странице виджетов, для каждой группы. В шаблонах Олега Васильевича этот момент решен очень просто, за счет специальной позиции куда вставляешь ссылку на изображение. Очень удобно!

Нил, почему нижние картинки не получается опустить ниже? При попытке отрегулировать botton картинки прыгают вверх при положительных значениях или исчезают с экрана при отрицательных. Чем еще регулировать их положение?
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей
0
#30 22 сентября 2017 в 16:50


вы вставили див который на моем первом примере должен был выполнять роль основного дива. закрывающий тег </div> для него вы удалили а то что выделено красным осталось.

и лучше поместить внутрь layout поскольку position:absolute идет относительно его
0
Как изменить стиль номеров в с
Загрузка изображений(урезает ф

Похожие темы

Неизвестный h4 поверх всех тегов

Разработка дополнений Создана 3 года назад 9 сообщений

Помогите разобраться с размером изображения в списке

Типы контента / статьи / страницы Создана 4 года назад 5 сообщений

Тип контента, комментарии, изображения

Флейм / Флуд / Оффтопик Создана 4 года назад 8 сообщений

OWL-слайдер набора изображений отображение

Релизы 2.X Создана 3 года назад 1 сообщение

[ЕСТЬ РЕШЕНИЕ] Формат WEBP в наборе изображений

Типы контента / статьи / страницы Создана 3 года назад 3 сообщения

[ЕСТЬ РЕШЕНИЕ] Как изменить размер изображения при загрузке

Дизайн / Графика / Искусство Создана 3 года назад 16 сообщений

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.