Jump to content
Sign in to follow this  
mistika

замена бэкграунда меню категорий

Recommended Posts

Друзья! доброго времени суток. Помогите пожалуйста разобраться, я уже головой об стол бьюсь. Очень жалко мебель)) 

Есть горизонтальное меню категорий в дефолтной теме) обычное такое меню, у всех есть наверное)

есть в сиэсэс файле

 

#menu > ul > li:hover > a {
background: url('..image/menu_bg.png') repeat-x 0 bottom;   я же правильно понимаю, выделить при наведении пункт меню?
Так вот, в папке лежит файл menu_bg.png  и браузер его в упор не видит, однако если написать, например red после бэкграунд, то работает вполне корректно.
при наведении пункт меню выделяется красным цветом.
При этом, пункт меню второго уровня этот бэкграунд видит
#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 5px;
background: url('../image/menu_bg.png');
 
и все корректно работает.  :cry:  а мне очень нужно, чтобы первый уровень меню видел этот бэкграунд. При просмотре кода элемента, первый уровень меню выдает ошибку( при попытке открыть в новом окне картинки выкидывает на страницу денвера, с ругательствами 
Not Found The requested URL /catalog/view/theme/default/stylesheet/..image/menu_bg.png was not found on this server.

 

Подсказка Денвера

Вы ошиблись при наборе URL в браузере. Вероятнее всего, сервер пытается найти файл Z:/home/open/www/catalog/view/theme/default/stylesheet/..image/menu_bg.png, которого не существует.

В случае использования CGI-скриптов, корректные пути к CGI-директориям следующие:

 

почему у меня такая печаль происходит? и вообще кто нибудь бэкграунд не циферками а картинками засовывал туда? циферками я хз как сделать он у меня двухцветный(( Помогите кто чем может, сама я не местная, беженец с казахстана  :ugeek:  Opencart в руках держу вторые сутки, до этого на симпле магазины делала.. 

Share this post


Link to post
Share on other sites

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

#menu {
	
	border-bottom: 1px solid #E5E5E5;
	height: 55px;
	margin-bottom: 15px;
	
}
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#menu > ul > li {
	position: relative;
	float: left;
	z-index: 20;
	padding: 6px 5px 5px 0px;
}

#menu > ul > li > a {
	font-size: 13px;
	color: #3A3A3A;
	line-height: 52px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold !important;
padding: 0 20px 1px 20px;
margin: 0 0 -1px 0;
}
#menu > ul > li:hover > a {
	background: url('..image/menu_bg.png') repeat-x 0 bottom;
	
}
#menu > ul > li > div {
	display: none;
	background: #FFFFFF;
	position: absolute;
	z-index: 5;
	background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
	display: table;
}
#menu > ul > li > div > ul {
	display: table-cell;
}

#menu > ul > li ul > li > a {
	text-decoration: none;
	padding: 4px;
	color: #A2A2A2;
	display: block;
	white-space: nowrap;
	min-width: 120px;border-bottom: 1px solid #A2A2A2;}

#menu > ul > li > div > ul > li > a {padding:10px;
	color: #A2A2A2;
}
#menu > ul > li > div > ul > li > a:hover {
	color: #FFF;
}

Share this post


Link to post
Share on other sites

А в какую папку вы картинки положили?

Share this post


Link to post
Share on other sites

вопрос хороший)

Я пробовала картинки ложить в разные папки. Изначально я их кидала в папку C:\WebServers\home\open\www\catalog\view\theme\default\image

 

потом image в корневик - результат тот же, Это уже кстати второй случай, когда оно не видит картинки. С кнопкой поиска бэкграундом тоже самое было, я отчаялась и сделала её одноцветную css) 

 

Но!))) второй уровень меню видит этот фон из этой же папки  C:\WebServers\home\open\www\catalog\view\theme\default\image   :)) я вместо меню.пнг прописывала menu_bg.png и второй уровень отображался 2 цветами))  

 

з.ы. а в какой папке должны лежать картинки в оупене? (подозрительно так прищурившись)

 

хнык.. (( никто не знает да? (( 

Share this post


Link to post
Share on other sites

Автор catalog\view\theme\default\image вот туда кидаем картинки

читать так много может ссылку все же?

если не видит картинку то либо:

1.неверный путь к файлу который background: url('..image/menu_bg.png')

2.размеры задайте для картинки вашей height width

3.быть может он menu_bg.png.png а не  menu_bg.png к примеру

Share this post


Link to post
Share on other sites

совершенно верно) каталог именно такой.

Ссылки к сожалению нет, все рубилово происходит на локалке (

1. а как проверить верный путь к файлу или нет?))   и почему на меню второго уровня, на выпадающих вкладках этот же самый бэкграунд работает? 

если подставить вот сюда background: url('..image/menu_bg.png')

#menu > ul > li > div {
	display: none;
	position: absolute;
	z-index: 5;
	background:#3A3A3A;

то все отображается и работает, а если вот сюда

 

#menu > ul > li:hover >  то просто белая область) и ничего не происходит) а если написать где бэкграунд - red или любой другой цвет, то бэкграунд видится и отображается и в первом уровне, при наведении) 
А вы так делали, чтобы не цветом а картинкой hover? на меню категорий? все работает?
 
один в один ситуация с кнопкой поиска, пришлось сделать цветом, потому что 
header.button-search :hover {
background: url('../image/top-search-submit.gif') repeat-x 0 bottom;
color: #f48b47 !important;}

вот это не видится ни в какую, хотя файл такой есть и лежит где надо )) 

Я понимаю, что я вероятно рукопоп, и не так давно этим занимаюсь, но блин тут на первый взгляд все просто, и я впервые столкнулась с таким, чтобы не подставлялось выделение(((  

Share this post


Link to post
Share on other sites

три раза написал адрес до картинки, мог бы уже и сам понять:свою ошибку
что вот это?!!!!

#menu > ul > li:hover > a {
	background: url('..image/menu_bg.png') repeat-x 0 bottom;
	
}

нет такого пути и никогда не найдется, так как после точек (которые определяют уровень вложенности папки обязательно должен быть слэш
то есть так

background: url('../image/menu_bg.png')

этот адрес указывает в опенкарте что картинка помещена в папке /theme/ВАША ТЕМА/image
это: /theme/ВАША ТЕМА как раз и заменяется двумя точками (1 уровень - одна точка)

  • +1 1

Share this post


Link to post
Share on other sites

не кричите на меня)))  я девочка и тупая))  :wub:

 

Павел, огромное вам спасибо. Чертова невнимательность) Вы меня не просто спасли (выкидывает в окно бутыльки пустырника, валерианки, валокордина) вы внесли в мою жизнь новые краски)) + 1000 вам в карму и побольше богатых заказчиков!

ыыыыыыыы работает. (прыгаю до потолка вместе с креслом) 

Share this post


Link to post
Share on other sites

этот адрес указывает в опенкарте что картинка помещена в папке /theme/ВАША ТЕМА/image

это: /theme/ВАША ТЕМА как раз и заменяется двумя точками (1 уровень - одна точка)

 

Вы уверены что точки именно это и заменяют? Или Вы чтоб не вдаваться в подроности? Они вроде всегда обозначали "уровень вверх"..

 

Share this post


Link to post
Share on other sites

Fesky

Ваше сообщение к чему?
 
"Стакан наполовину полон? Или наполовину пуст?"

1.Ты своим постом решили оказать помощь?

2.Показать свою осведомленность в построении абсолютных и относительных ссылок?

3.Показать мою профессиональную непригодность и абсолютное дилетанство в сайтостроении?

 

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

Чтоб мы, неразумные поняли, куда это вверх? и зачем нам вверх? если нам нужно "зрить внутрь"
Пишу без абсолютной иронии, коль ты решил "ткнуть мордой в грязь" то будь ласков расскажи все как надо, дабы не иметь бледный вид перед сообществом... 

P.S. кстати ознакомился со всеми твоими сообщениями на форуме, профессионализм и опыт на лицо...

Не смог бы ты мне дать пару уроков по верстке за естественно адекватное вознаграждение. Спасибо. Буду рад прочитать по настоящему профессиональный ответ на вопрос ТС

Share this post


Link to post
Share on other sites

Fesky

Ваше сообщение к чему?

 

"Стакан наполовину полон? Или наполовину пуст?"

1.Ты своим постом решили оказать помощь?

2.Показать свою осведомленность в построении абсолютных и относительных ссылок?

3.Показать мою профессиональную непригодность и абсолютное дилетанство в сайтостроении?

 

Что то ответа на решение данной проблемки у тебя не нашлось, судя по теме, а на реплики не по делу вполне хватило времени.

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

Чтоб мы, неразумные поняли, куда это вверх? и зачем нам вверх? если нам нужно "зрить внутрь"

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

P.S. кстати ознакомился со всеми твоими сообщениями на форуме, профессионализм и опыт на лицо...

Не смог бы ты мне дать пару уроков по верстке за естественно адекватное вознаграждение. Спасибо. Буду рад прочитать по настоящему профессиональный ответ на вопрос ТС

Остапа понесло)))

Извини, незнал что ты такой закомплексованый! Прости, если вдруг нанес тебе травмы и вызвал приступ истерики))

"Сообщества", "бледный вид", "мордой в грязь" - у тебя странная реальность, мой друг. В жизни всё несколько проще и банальней))

Перечитай мои сообщения ещё раз, детектив недоучка, и покажи мне где я написал что я профессионал или что-то в этом духе?!

 

Лечи нервы, дорогой, поверь мне они ещё никого до добра не доводили!

 

А сообщение было к тому - что это раздел для новичков, я здесь читаю и частенько нахожу новое для себя. А в данном случае - твоё высказывание противоречит с имеющейся у меня информацией, хотел узнать мож я неправильно знаю! И если б ты был адекватным человеком, то мог нормально объяснить и мне и ТС, а не петушиться здесь тем что ты крутой и прочее! Дошло до тебя хоть что-то "я знайка супер профи Pascha"?

Share this post


Link to post
Share on other sites

Ну почитал я про относительные пути ещё раз...

с одного из сайтов, таких много стоит лишь погуглить:

 

Как раз эта последовательность символов ../ и служит для перехода на одну директорию(уровень) выше в иерархии каталогов....

...

Если ../ означает переход на одну директорию(уровень) выше в иерархии каталогов, то символ / обозначает переход на один уровень ниже.
Последовательность символов ../ можно использовать в пути неоднократно.... переместить в три директории вложенные в друг друга, то нужно будет использовать следующий код:


<img src="../../../images/products.png">

Толи я чего непонимаю, толи Pascha воду мутит и путает меня.

Share this post


Link to post
Share on other sites

1.

Если ../ означает переход на одну директорию(уровень) выше в иерархии каталогов,

так как после точек (которые определяют уровень вложенности папки....


2.

то символ / обозначает переход на один уровень ниже.

...обязательно должен быть слэш

....куда это вверх? и зачем нам вверх? если нам нужно "зрить внутрь"

 
3.

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

<img src="../../../images/products.png">
background: url('../image/menu_bg.png')
этот адрес указывает в опенкарте что картинка помещена в папке /theme/ВАША ТЕМА/image

означает переход на одну директорию(уровень) выше

 


это: /theme/ВАША ТЕМА как раз и заменяется двумя точками(1 уровень - одна точка)

 

P.S.

это раздел для новичков, я здесь читаю и частенько нахожу новое для себя

Поздравляю, у тебя сегодня день открытий чудных, в том числе теперь ты осведомлен о многообразии богатого и могучего русского языка (одно и то же можно сказать по разному, либо своими словами, либо нагуглить в интернете.

Share this post


Link to post
Share on other sites

Остапа понесло)))

Извини, незнал что ты такой закомплексованый! Прости, если вдруг нанес тебе травмы и вызвал приступ истерики))

"Сообщества", "бледный вид", "мордой в грязь" - у тебя странная реальность, мой друг. В жизни всё несколько проще и банальней))

Перечитай мои сообщения ещё раз, детектив недоучка, и покажи мне где я написал что я профессионал или что-то в этом духе?!

 

Лечи нервы, дорогой, поверь мне они ещё никого до добра не доводили!

 

А сообщение было к тому - что это раздел для новичков, я здесь читаю и частенько нахожу новое для себя. А в данном случае - твоё высказывание противоречит с имеющейся у меня информацией, хотел узнать мож я неправильно знаю! И если б ты был адекватным человеком, то мог нормально объяснить и мне и ТС, а не петушиться здесь тем что ты крутой и прочее! Дошло до тебя хоть что-то "я знайка супер профи Pascha"?

Если есть желание помочь,то нужно на 100 процентов быть уверенным в своих словах(я вот  проверяю у себя на тестовых сайтах). А ляпнуть  и обижаться на замечания,это не здесь,дома можно с родными и близкими.На форуме  инфа хранится годами,мало ли кто это прочтёт и решит что именно так правильно.

Share this post


Link to post
Share on other sites

1.

2.

 

3.

P.S.

Поздравляю, у тебя сегодня день открытий чудных, в том числе теперь ты осведомлен о многообразии богатого и могучего русского языка (одно и то же можно сказать по разному, либо своими словами, либо нагуглить в интернете.

На счёт "это: /theme/ВАША ТЕМА как раз и заменяется двумя точками (1 уровень - одна точка)"  Я всё равно не понял.. Ок, соглашусь, похоже действитеьно одно и тоже разными словами)

Share this post


Link to post
Share on other sites

Если есть желание помочь,то нужно на 100 процентов быть уверенным в своих словах(я вот  проверяю у себя на тестовых сайтах). А ляпнуть  и обижаться на замечания,это не здесь,дома можно с родными и близкими.На форуме  инфа хранится годами,мало ли кто это прочтёт и решит что именно так правильно.

Да я вроде не обиделся, Вы где это узрели?! Хотя подход(ответ на мой пост) меня немного разозлил, но меня совет на счёт точек запутал, потому и спросил.

Не создавать же мне тему про эти точки?! Вся эта перепалка впустую только из-за недопонимания! ТС потом, в другом случае, если поймет строчки Pascha как я понял, не сможет правильно применить относительный путь! В общем сошлёмся на то, что я не разобрал в сути сказанных Pascha слов, всем остальным всё ясно и закончим на этом!

Share this post


Link to post
Share on other sites

На счёт "это: /theme/ВАША ТЕМА как раз и заменяется двумя точками (1 уровень - одна точка)"  

итак, разбираем путь до картинки  /theme/default/image/картинка.png

итак, если это путь- то задаем команду на действие

1. делать шаги, каждый шаг мы определим точкой "."

2. команда "ищи там" - определяем слэшем "/"

Начинаем командовать: 

а) "делай шаг номер 1!"

получаем: 

 .

б) "делай шаг номер 2"

получаем: 

..

в) "ищи там" папку image

получаем:

../image

г) "ищи там" картинку

получаем:

../image/картинка.png

И вот результат: сделали два шага, нашли папку image. в ней нашли картинку

  • +1 1

Share this post


Link to post
Share on other sites

Я не пойму, то есть в данном случае путь начинался от файла стиля? Я вот так это понимаю. Или путь начинался от родительского каталога для "/theme"? Откуда мы начинаем шаги? Почему точки разделяете на шаги, я думал что это единый символ ".." обозначающий родительскую категорию. Поясните пожалуйста)

Share this post


Link to post
Share on other sites

от файла со стилями начинается путь:(по умолчанию папка stylesheet  )

../ выходим из папки со стилями

images/картинка.jpg заходим в папку с изображением и выбираем изображение

Share this post


Link to post
Share on other sites
от файла со стилями начинается путь :(по умолчанию папка stylesheet  )

 

а точно!!! вот блин..... :-D 

тока вот тогда как насчет этого? 

<img src="/image/cache/data/logo.png"><---/картинка загруженная файловым менеджером --->

где многоточие?  :ugeek:

или папка в корне сайта image (там же admin, catalog и т.д.) находиться в директории с  папкой stylesheet? 

напомню, уважаемые, вот эти слова ТОМа

нужно на 100 процентов быть уверенным в своих словах

 

Papasan4ez уяснил? 

Share this post


Link to post
Share on other sites

а точно!!! вот блин..... :-D 

тока вот тогда как насчет этого? 



<img src="/image/cache/data/logo.png"><---/картинка загруженная файловым менеджером --->

где многоточие?  :ugeek:

или папка в корне сайта image (там же admin, catalog и т.д.) находиться в директории с  папкой stylesheet? 

напомню, уважаемые, вот эти слова ТОМа

Papasan4ez уяснил? 

Вот это я понимаю - это абсолютный путь, он всегда от корневого каталога и задаётся знаком"/". А если поставим "../", две точки перед слэшем, то путь начнется с категории являющейся родительской для той, в которой мы сейчас находимся. Для меня эти две точки как оператор, а  Pascha, наверно, объяснил более подробно, то есть объяснил как это происходит на уровне программы, и как именно программа интерпретирует данный знак! А по скольку я не программирую, я и понял это неправильно! Во! 

Share this post


Link to post
Share on other sites

<img src="/image/cache/data/logo.png"

Pascha

это ты как тэг в css файл вставлять будешь?Я говорил конкретно про бэкграунд

Share this post


Link to post
Share on other sites

Papasan4ez

background: url('/image/cache/data/картинка.png')

?

Share this post


Link to post
Share on other sites

Pascha

background: url('image/cache/data/картинка.png')

 

файл со стилями рядом с папкой image

Share this post


Link to post
Share on other sites
mistika
#menu > ul > li:hover > a {
background: url('..image/menu_bg.png') repeat-x 0 bottom;   я же правильно понимаю, выделить при наведении пункт меню?
 
вот так пробуйте
#menu > ul > li:hover > a {

background: url('../image/menu_bg.png');

это если css файл лежит в папке рядом с папкой image

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.