• 0
Dizred

Верстка шаблона

Вопрос

Добрый день! Помогите с такой проблемой:

Есть шаблон с общим фоном:

5a3bb5200cace_2.PNG.568788e756c011a8f4c562f19a6e6895.PNG

Для понятности разметки поменял на другой цвет:

5a3bb593a43c4_.PNG.44f6282b7cef538621f52b0a71661c0a.PNG

Суть вопроса: надо где черный квадрат и цифра 1, вставить изображение прозрачное в самый угол, ну типо ленточки георгиевской и всё остальное залить фоном:

georgievskaya-lentochka.png.5da623693f20e1918d94dee8efb4ffa0.png

Вот css:

html{background-color:#5d1338;}
body{background:url(../images/purple/bg.jpg) no-repeat top center;}
a.read_more{background-color:#ff9694;}
.button_divider{border-bottom:1px #6a2146 solid; border-top:1px #6a2146 solid;}

a{color:#ff9694;}
h1 span, h2 span, h3 span, h4 span, h1 strong, h2 strong, h3 strong, h4 strong{color:#ff9694;}
ul#main_menu li a.selected {color:#ff9694;}
ul#main_menu li a:hover, ul#main_menu li.current-menu-item a{color:#ff9694;}
ul#main_menu ul li a {color:#ff9694;}
ul#main_menu ul li ul li a {color:#ff9694;}
.footer_menu ul li.selected a{ color:#ff9694;}
.footer_menu ul li a:hover{ color:#ff9694; }
.post_date, .post_date_nothumb, .service_pricespecial, input#searchsubmit, ul.filter_portfolio li.selected a, ul.filter_portfolio li a:hover, input.form_submit, a.icon_link_img{ background-color:#ff9694;}
.footer_text a:hover{ border-bottom:1px dotted #ff9694;}

ul#main_menu ul, ul#main_menu ul li ul, .flex-caption {background-color:#5d1338;}

a.more, .left13 ul li, .entry ul li, .sidebar ul li{ background:url(../images/purple/bullet.png) no-repeat left;}
.home_underslider{ background:url(../images/purple/home_underslider.jpg) no-repeat center top;}
.slide_frame{background:url(../images/purple/slider_frame.png) no-repeat center;}

.footer{background-color:#460d29;}
.footer_text, .footer_menu ul li a{color:#b05877;}

@media screen and (max-width: 1024px) {
.show_menu, .hide_menu, ul#main_menu, ul#main_menu ul{ background-color:#5d1338;}
ul.filter_portfolio li.selected a, ul.filter_portfolio li a:hover{background-color:#5d1338;}
ul.filter_portfolio li a{color:#ff9694;}
}

 

Помогите пожалуйста это сделать :( 

Вроде получилось подробно описать суть вопроса...

Изменено пользователем Dizred

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

21 ответ на этот вопрос

Рекомендованные сообщения

  • 0

after должен к элементу добавляться какому либо. 

#main_container{width:960px;margin:auto;}

#main_container:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Нужно просто создать псевдоэлемент с параметрами картинки и разместить его в левом верхнем углу поверх фона.

Попробуй добавить к стилям  вот такой кусок: 

body {
	position: relative;
}

body:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: ШИРИНА КАРТИНКИ пх
	height: ВЫСОТА КАРТИНКИ
	background-image: url('ССЫЛКА НА КАРТИНКУ');
	background-repeat: no-repeat;
}

Такую простыню кода без разметки (да и с разметкой тоже) вряд ли кто-то читать будет, лучше давать ссылку на сайт.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
1 час назад, Tilonorrinco сказал:

Нужно просто создать псевдоэлемент с параметрами картинки и разместить его в левом верхнем углу поверх фона.

Попробуй добавить к стилям  вот такой кусок: 


body {
	position: relative;
}

body:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: ШИРИНА КАРТИНКИ пх
	height: ВЫСОТА КАРТИНКИ
	background-image: url('ССЫЛКА НА КАРТИНКУ');
	background-repeat: no-repeat;
}

Такую простыню кода без разметки (да и с разметкой тоже) вряд ли кто-то читать будет, лучше давать ссылку на сайт.

Добавил в стили:

body {
	position: relative;
}

body:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 300px;
	height: 300px;
	background-image: url('http://zak.hol.es/wp-content/uploads/2017/12/Top.png');
	background-repeat: no-repeat;
}

Но ничего не изменилось...((

Вот ссылка на сайт: http://zak.hol.es/

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Почему не изменилось? Появился псевдоэлемент с картинкой. Осталось только поработать с изображением в редакторе.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

(тестовый домен): Сайт

Ребята, в продолжение вопроса...

Добавил фоновое изображение на левую и правую сторону страницы, вот с помощью такого кода (вставил в боди):

	url(http://test1.ru/wp-content/uploads/2018/01/bam1-1.png) no-repeat,   
	url(http://test1.ru/wp-content/uploads/2018/01/bamboo.png) repeat-y,  
	url(http://test1.ru/wp-content/uploads/2018/01/bam2-2.png) 100% 0 no-repeat,    
	url(http://test1.ru/wp-content/uploads/2018/01/bamboo.png) 100% 0 repeat-y;}

Но до конца оно (изображение) не идет :( Подскажите пожалуйста, возможно код не в том месте? Подскажите пожалуйста...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

У вас имя домена zak.hol.es,  а url для фоновых картинок начинаются  с test1.ru 
Только для для одной правильно указан. 

Переносили сайт с локального сервера через Duplicator? 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
13 часов назад, prophet_07 сказал:

У вас имя домена zak.hol.es,  а url для фоновых картинок начинаются  с test1.ru 
Только для для одной правильно указан. 

Переносили сайт с локального сервера через Duplicator? 

Извиняюсь, поправил:

body {background: url(http://zak.hol.es/wp-content/uploads/2018/01/bam1-1-1.png) no-repeat,
				  url(http://zak.hol.es/wp-content/uploads/2018/01/bamboo.png) repeat-y,
				  url(http://zak.hol.es/wp-content/uploads/2018/01/bam2-2.png) 100% 0 no-repeat,
				  url(http://zak.hol.es/wp-content/uploads/2018/01/bamboo.png) 100% 0 repeat-y;}

 

13 часов назад, Vic-Tor сказал:

А к чему тут колорадская ленточка??? Я понимаю еще политическая тема была?!?!?!...

Ленточка была просто как пример картинки в угол...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

У вас внутри #main_container есть блоки с нулевой высотой. 
Например, .home_bottom. Внутри  три "плавающих" блока и поэтому родитель "схлопнулся".

Самое простое для #main_container добавить "overflow: hidden;"
Но лучше добавить псевдокласс для очистки потока. 
Например, такой: 
#main_container:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
В 12.01.2018 в 16:59, prophet_07 сказал:

У вас внутри #main_container есть блоки с нулевой высотой. 
Например, .home_bottom. Внутри  три "плавающих" блока и поэтому родитель "схлопнулся".

Вроде добавил, как Вы сказали, но ничего не изменилось. Вот что получилось:

#main_container{width:960px;margin:auto;}
.header{ text-align:center; height:auto; padding:40px 0 60px 0;}
.logo{padding:10px 0 10px 0px;display:inline-block; margin:auto;}
.logo_image{ float:left; padding:0 10px 0 0;}
.logo h1{font-size:45px; margin:0px; padding:0px; float:left; clear:none;}
.logo h1 a{font-family: 'OpenSans', sans-serif;letter-spacing:-1px;} 
after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
16 минут назад, prophet_07 сказал:

after должен к элементу добавляться какому либо. 

#main_container{width:960px;margin:auto;}

#main_container:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

Спасибо большое! Ещё один вопросик пожалуйста, можно ли сделать так, чтобы в мобильной версии этот фон не был виден (скрывался как бы)?  Получается он накладывается под текст и блоки - выглядит не ахти...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
3 часа назад, Dizred сказал:

Спасибо большое! Ещё один вопросик пожалуйста, можно ли сделать так, чтобы в мобильной версии этот фон не был виден (скрывался как бы)?  Получается он накладывается под текст и блоки - выглядит не ахти...

Его можно просто убрать/ заменить на нужном разрешении. 
Например: 

@media screen and (max-width: 991px) {
    background: none;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
3 часа назад, prophet_07 сказал:

@media screen and (max-width: 991px) {
    background: none;
}

А это необходимо в какую часть вставить? точно @ перед media?

И этот код просто уберёт эти фоновые картинки, если разрешение экрана будет менее 991px?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
3 часа назад, Dizred сказал:

А это необходимо в какую часть вставить? точно @ перед media?

И этот код просто уберёт эти фоновые картинки, если разрешение экрана будет менее 991px?

Посмотрите где у вас медиа запросы начинаются, там добавьте. 
Не обязательно "991px", у вас может быть другая точка излома. 
При этом разрешении и меньше просто будет перезапись свойств body. 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
14 часов назад, prophet_07 сказал:

Посмотрите где у вас медиа запросы начинаются, там добавьте. 
Не обязательно "991px", у вас может быть другая точка излома. 
При этом разрешении и меньше просто будет перезапись свойств body. 

Нашел:

@media screen and (max-width: 1024px) {
	background: none;
#main_container{width:100%;}
.header{ text-align:center; height:auto; padding:30px 0 20px 0;}
.logo h1{font-size:35px;}
.left_full, .left13, .left23, .left12, .left14{ width:90%; float:left; margin:40px 0 0 5%;}

и 

@media screen and (max-width: 480px) {
	background: none;
.logo img{ width:90%; display:inline-block; margin:auto; }
}

Добавил туда background: none; , но что-то не пропадает фон в мобильном виде:( (только наоборот сайт поехал в моб.вер., если Вы посмотрите)

Изменено пользователем Dizred

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
1 час назад, Dizred сказал:

@media screen and (max-width: 480px) { background: none; .logo img{ width:90%; display:inline-block; margin:auto; } }

Ошибка, немного неправильно я написал . Нужно body добавить. 

@media screen and (max-width: 1024px) {

body{ background: none; }

#main_container{width:100%;}
.header{ text-align:center; height:auto; padding:30px 0 20px 0;}
.logo h1{font-size:35px;}
.left_full, .left13, .left23, .left12, .left14{ width:90%; float:left; margin:40px 0 0 5%;}

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Я надеюсь последний вопрос... Перенес на другой хоситнг сайт, всё прошло успешно. Вытащил css потом с фтп и изменил, как выше в теме. Переношу css обратно на фтп, смотрю сайт-изменений нет... Смотрю код страницы в консоле браузера css код не поменялся, хотя если через движок cms редактор css изменен и всё есть...Что может быть? 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
38 минут назад, klierik сказал:

Кеш браузера, как вариант

На других устройствах всё тоже самое. Думаю как вариант /style.css?ver=4.9.2 убрать и оставить /style.css или не в этом дело?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
1 час назад, Dizred сказал:

На других устройствах всё тоже самое. Думаю как вариант /style.css?ver=4.9.2 убрать и оставить /style.css или не в этом дело?

Скорее не в этом. Если по прямому пути к файлу в нём нет внесённых изменений то — это значит что этих изменений в данном конкретном файле нет.

Могу допустить что или файл не был перезаписан на сервере или перезаписан другой, не тот что выводится посетителю.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Проблемы продолжаются... Перенес сайт на другой хостинг и через неделю начался редирект и не корректное отображение сайта. Теперь имею один сайт (на одном хостинге  чуть больше доделан, на другом чуть меньше) на двух разных хостингах, на старом всё нормально, а на новом вот проблемы. Вход на FTP и т.д. производился с одной машины, т.е. вирусы с пк исключены. После проверки rescan вот результат Отчет , судя по отчету проблема с jquery.js. Подскажите, есть ли вероятность этого вируса от нового хостинга? И как убить этот вирус с редиректом и т.д. ( замена здоровым jquery.js не помогла):(

До переноса сайт (без вируса)

После переноса сайт (Бывает редирект и не корректное отображение)

Изменено пользователем Dizred
Дополнил ссылками

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • -4

А к чему тут колорадская ленточка??? Я понимаю еще политическая тема была?!?!?!...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас


  • Похожие публикации

    • Автор: Алексей2802
      Здравствуйте!
      Есть блок шириной 390px и высотой 100px, который является ссылкой.
      .div { background-image: url(bg_1.png); height: 100px; width: 390px; } .div:hover { background-image: url(bg_hover.png); } <div class="div"> <a href="#">Текст</a> </div> <div class="div"> <a href="#">Текст</a> </div> Можно ли сделать так, чтобы при наведении на блок
             
      фон менялся на bg_hover.png

      и при этом стрелка слева картинки выходила за пределы блока??
    • Автор: Libiros
      Друзья, возникла задача построения ряда блоков. Блоки располагаются один под другим. В каждом есть изображение, которое должно обрезаться снизу. Однако сам div нестандартный. Смотрим картинку
       
      Какие у меня были варианты решения:
      Использовать overflow: hidden; Но идея потерпела крах, потому что он обрезает не по линии, а по горизонтали. Использовать clip; Тоже крах, потому что теряется адаптивность и каждый раз рассчитывать clip даже с помощью js тяжело Разные варианты совмещения. Например, взять из макета дугу и картинку, сохранить как PNG и установить в основном слое как background-position: bottom; Пока это самая лучшая идея, но она не универсальна. Необходимо сделать так, чтобы работало с любой картинкой, не только с выбранной из макета. То есть было бы странно сначала закидывать любую картинку в макет, там вырезать ее вместе с дугой и вставлять как background
      Как строить такие блоки с обрезкой картинок на нижней границе?

    • Автор: nikif
      backgorund не стакается с верхним краем 
      css
      body { background-color: #fff; margin: 0; } div.ferst{ height: 700px; width: 100%; background-position:21.5%; background:#0A0905 url(../img/IMGP4333.png)100% 100% no-repeat; } h1{ margin: 0; padding-left: 250px; padding-top: 59px; } html
      <!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>Whitesquare</title> <link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="stylesheet" href="wtf" type="text/css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="ferst"> <h1>kek</h1> </div> </body> </html>  

      https://yadi.sk/i/0lstBB273Jm9me болие наглядное фото