Перейти к содержанию
rassigor

Как поставить фоновое изображение в шапку и как сделать Картинку со ссылками

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

Привет, с PHP только начинаю работать, до этого 1С программистом 10 лет проработал. Возникают глупые вопросы)) 

1) Как поставить фоновое изображение в шапку, где корзина?

 

2)Хочу на главное странице после горизонтального меню, сделать Картинку, на которой будут ссылки, на меню. Подскажите как это сделать можно?

Типа как вот здесь http://mennen.ru/, только у меня будет и левое и верхнее меню, а картинка просто в середине. 

 

Снимок.JPG

222.JPG

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


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

Для первой задачи добавить в хидер свой дивчик,в стилях прикрутить к нему бэкграунд.А по второй думаю обычный банер не подойтёт.Здесь ,как вариант вывести это модулем HTML (тот что в опенкарте по-умолчанию).

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


Ссылка на сообщение
Поделиться на другие сайты
6 минут назад, Tom сказал:

Для первой задачи добавить в хидер свой дивчик,в стилях прикрутить к нему бэкграунд.А по второй думаю обычный банер не подойтёт.Здесь ,как вариант вывести это модулем HTML (тот что в опенкарте по-умолчанию).

 

у меня шаблон Unishop 

 

header {
 background: url(image/catalog/images/grass-346644_640.png) no-repeat top center;
}

Вот так сделал 

 

Однако картинка не там где надо, как ее выше поднять? 

 

Снимок.JPG

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


Ссылка на сообщение
Поделиться на другие сайты
7 минут назад, Tom сказал:

Для первой задачи добавить в хидер свой дивчик,в стилях прикрутить к нему бэкграунд.А по второй думаю обычный банер не подойтёт.Здесь ,как вариант вывести это модулем HTML (тот что в опенкарте по-умолчанию).

 

Можешь дать наметки куда копать? как это сделать примерно?

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


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

Картинка на скрине ниже блока меню расположена.А нужно див этот выше блока в котором лого,поиск и корзина....

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


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

 

header .container:first-of-type {
  1. background: green;
}

 

Что-то типа того. Бэкграунд для примера.

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


Ссылка на сообщение
Поделиться на другие сайты
7 минут назад, jaffagold сказал:
 
  Скрыть контент

 

header .container:first-of-type {
  1. background: green;
}

 

Что-то типа того. Бэкграунд для примера.

Беграунд сработал, а картинку как вставить? за место беграунда - УРЛ подставить?

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


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

header .container:first-of-type {
  background-image: url(image/catalog/images/grass-346644_640.png);
}

 

Вот так не прокатило, нечего не вывел

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


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

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

Скрытый текст

green-grass.thumb.jpg.3867c223bc285b9b68957b76c2b4f2fa.jpg

 

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

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


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

 

Фон встал, теперь надо с картинкой сделать.

Снимок.JPG

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

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


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

green-grass-2.thumb.jpg.553e9018dc67ddb285c007dbf4908044.jpg

Но только путь к вашей картинке, мне на демку пришлось из интернета тянуть

и, скорее всего, надо вставить в начале url  / 

url(/image/catalog/

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

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


Ссылка на сообщение
Поделиться на другие сайты
15 минут назад, jaffagold сказал:
  Скрыть контент

green-grass-2.thumb.jpg.553e9018dc67ddb285c007dbf4908044.jpg

Но только путь к вашей картинке, мне на демку пришлось из интернета тянуть

и, скорее всего, надо вставить в начале url  / 

url(/image/catalog/

Как ты это сделал? 

Дай код, это то что надо.

 

Картинка это для примера, но может и ее оставлю

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


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

Раз первая задача частично реализовалась, давай посмотрим как вот такой сделать

 

http://mennen.ru/

 

Как я вижу

1)Нарисовать цельную картинку, вставить в блок HTML, в котором для каждой области сделать свою ссылку - когда будет нажиматься ссылка будет переход на другую страницу.  - Минусы - возможно она будет большая и будет грузить канал

2)Сделать на HTML - коде - незнаю как

3)Сделать типо презентации в Prezi или power point и встроить ее в Html 

http://www.ispring.ru/articles/how-to-insert-your-html5-presentation-into-a-website-or-blog-ru.html

 

И вопрос по эффекту как в Прези - когда на сайте нажимаешь сразу переход на другую часть, это спомощью скриптов? ламер как я в Дримвивере такое сможет сделать?

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

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


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

Не, брат, извини, за тебя эту тему я пилить не буду.

Тот код, что я писал- виден на картинке в нижней секции правой стороне 

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


Ссылка на сообщение
Поделиться на другие сайты
Только что, jaffagold сказал:

Не, брат, извини, за тебя эту тему я пилить не буду.

Тот код, что я писал- виден на картинке в нижней секции правой стороне 

Лан спасиб на этом, далее сам. 

 

А насчет сайта менен? Пока нашел прикольную библиотеку  Reveal.js.

которое многое что позволяет делать в плане оформления

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


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

Не, брат, извини, за тебя эту тему я пилить не буду.

Тот код, что я писал- виден на картинке в нижней секции правой стороне 

Какие то странности творятся.

Кеш обновлял несколько раз. 

на самой странице не вижу картинку, нажимаю показать код вижу, пробовал на других браузерах и других компах тоже самое

вот мой код 

 

header .container:first-of-type {
 background: url(image/catalog/images/grass-346644_640.png) ;
}

 

Снимок.JPG

Снимок3.JPG

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

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


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

Вот файлик скачал. По идее можно дернуть код из странички Index и вствить в Мой Код Html, только я не совсем понел в какую папку ложить это все папки? Код Html он из какой запускается? как пути настроить?

Презентация.rar

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


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.