Форум русской поддержки Joomla!® CMS
03.12.2016, 08:38:59 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Не отображаются картинки в CSS меню(не главного)

 (Прочитано 6943 раз)
0 Пользователей и 1 Гость смотрят эту тему.
frito
Новичок
*

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 9



« : 08.02.2012, 17:49:13 »

Доброго времени суток. Я в Joomla новичек. Столкнулся с такой проблемой. Хочу вставить на главную страницу CSS список(меню). Меню вставляется,css прогружается, но картинок кнопок меню нет!
На страницу через модуль "Произвольный HTML-код" добавляю текст меню, пример
Код:
<div id="menu2">
<ul>
<li><a href="#1" title="текст1">текст1</a></li>
<li><a href="#2" title="текст2">текст2</a></li>
<li><a href="#3" title="текст3">текст3</a></li>
<li><a href="#4" title="текст4">текст4</a></li>
<li><a href="#5" title="текст5">текст5</a></li>
<li><a href="#5" title="текст6">текст6</a></li>
</ul>
</div>

Получается такой список


Далее в index.php подгружаю файл CSS
Код:
<link rel="stylesheet" href="<?php echo $LiveSiteUrl ?>libraries/menu_video.css" type="text/css" />
Код файла следующий
Код:
#menu2 {
width: 200px;
border-style: solid solid none solid;
border-color: #677D92;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu2 li a {
height: 32px;
   voice-family: "\"}\"";
   voice-family: inherit;
   height: 24px;
text-decoration: none;
}

#menu2 li a:link, #menu2 li a:visited {
color: #fff;
display: block;
background: url(libraries/images/menu2.gif);
padding: 8px 0 0 10px;
}

#menu2 li a:hover {
color: #283A50;
background: url(libraries/images/menu2.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#menu2 li a:active {
color: #283A50;
background: url(libraries/images/menu2.gif) 0 -64px;
padding: 8px 0 0 10px;
}


На странице появляется список, всё как надо, текст списка при наведении подсвечивается,  то есть CSS прогрузилась, но картинок кнопок нет!

 

Ломаю голову уже долго. Путь до картинок правильный. В index.php стирал весь код и вставлял код файла index.htm, который скачал в архиве с меню, все работало, то есть картинки отображались
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Бесплатные Вертикальные меню CSS - shebeko.com</title>
  <meta http-equiv="Content-Type" content="text/html; charset=win 1251" />
  <meta name="description" content="CSS меню для всех" />
  <meta name="keywords" content="CSS, CSS, CSS vty., CSS дизайн, CSS design, CSS меню" />
  <style type="text/css">

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #F3FAFF;
}

a:link {
color: #76B0D5;
text-decoration: none;
}

a:visited {
color: #7B878F;
text-decoration: none;
}

a:hover, a:active {
color: #2399E5;
}

#container {
width: 760px;
}

#header {
color: #76B0D5;
background: #C5E7FD;
border-bottom: 3px solid #76B0D5;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 3em;
padding: 10px;
}

#content {
margin: 10px;
color: #555;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

p {
font-size: .9em;
}


#firstcol {
float: left;
}

#secondcol {
float: left;
}

#thirdcol {
padding-top: 10px;
margin-right: 106px;
margin-bottom: 10px;
float: right;
}

/* =-=-=-=-=-=-=-[Menu One]-=-=-=-=-=-=-=- */

#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu li a {
height: 32px;
   voice-family: "\"}\"";
   voice-family: inherit;
   height: 24px;
text-decoration: none;
}

#menu li a:link, #menu li a:visited {
color: #5E7830;
display: block;
background: url(images/menu1.gif);
padding: 8px 0 0 10px;
}

#menu li a:hover {
color: #26370A;
background: url(images/menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#menu li a:active {
color: #26370A;
background: url(images/menu1.gif) 0 -64px;
padding: 8px 0 0 10px;
}

/* =-=-=-=-=-=-=-[Menu Two]-=-=-=-=-=-=-=- */

#menu2 {
width: 200px;
border-style: solid solid none solid;
border-color: #677D92;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu2 li a {
height: 32px;
   voice-family: "\"}\"";
   voice-family: inherit;
   height: 24px;
text-decoration: none;
}

#menu2 li a:link, #menu2 li a:visited {
color: #fff;
display: block;
background: url(images/menu2.gif);
padding: 8px 0 0 10px;
}

#menu2 li a:hover {
color: #283A50;
background: url(images/menu2.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#menu2 li a:active {
color: #283A50;
background: url(images/menu2.gif) 0 -64px;
padding: 8px 0 0 10px;
}

/* =-=-=-=-=-=-=-[Menu Three]-=-=-=-=-=-=-=- */

#menu3 {
width: 200px;
border: 1px solid #ccc;
margin: 10px;
}

#menu3 li a {
   height: 32px;
   voice-family: "\"}\"";
   voice-family: inherit;
   height: 24px;
text-decoration: none;
}

#menu3 li a:link, #menu3 li a:visited {
color: #888;
display: block;
background: url(images/menu3.gif);
padding: 8px 0 0 30px;
}

#menu3 li a:hover, #menu3 li a:active {
color: #283A50;
background: url(images/menu3.gif) 0 -32px;
padding: 8px 0 0 30px;
}

/* =-=-=-=-=-=-=-[Menu Four]-=-=-=-=-=-=-=- */

#menu4 {
width: 200px;
border-style: solid solid none solid;
border-color: #D76100;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu4 li a {
   height: 32px;
   voice-family: "\"}\"";
   voice-family: inherit;
   height: 24px;
text-decoration: none;
}

#menu4 li a:link, #menu4 li a:visited {
color: #9E3C02;
display: block;
background: url(images/menu4.gif);
padding: 8px 0 0 30px;
}

#menu4 li a:hover {
color: #fff;
background: url(images/menu4.gif) 0 -32px;
padding: 8px 0 0 30px;
}

#menu4 li a:active {
color: #fff;
background: url(images/menu4.gif) 0 -64px;
padding: 8px 0 0 30px;
}

/* =-=-=-=-=-=-=-[Menu Five]-=-=-=-=-=-=-=- */

#menu5 {
width: 200px;
border-style: none solid none solid;
border-color: #D0D0D0;
border-width: 1px;
margin: 10px;
}

#menu5 li a {
   height: 32px;
   voice-family: "\"}\"";
   voice-family: inherit;
   height: 24px;
text-decoration: none;
}

#menu5 li a:link, #menu5 li a:visited {
color: #777;
display: block;
background: url(images/menu5.gif);
padding: 8px 25px 0 10px;
text-align: right;
}

#menu5 li a:hover {
color: #fff;
background: url(images/menu5.gif) 0 -32px;
padding: 8px 25px 0 10px;
text-align: right;
}

#menu5 li a:active {
color: #fff;
background: url(images/menu5.gif) 0 -64px;
padding: 8px 25px 0 10px;
text-align: right;
}

/* =-=-=-=-=-=-=-[Menu Six]-=-=-=-=-=-=-=- */

#menu6 {
width: 200px;
margin: 10px;
}

#menu6 li a {
   height: 32px;
   voice-family: "\"}\"";
   voice-family: inherit;
   height: 24px;
text-decoration: none;
}


#menu6 li a:link, #menu6 li a:visited {
color: #8D9179;
display: block;
background: url(images/menu6.gif);
padding: 8px 0 0 10px;
}

#menu6 li a:hover, #menu6 li a:active {
color: #6C7250;
background: url(images/menu6.gif) 0 -32px;
padding: 8px 0 0 10px;
}

/* =-=-=-=-=-=-=-[Menu Seven]-=-=-=-=-=-=-=- */

#menu7 {
width: 200px;
border-style: none dashed dashed dashed;
border-color: #608FB5;
border-width: 1px;
}

#menu7 li a {
   height: 32px;
   voice-family: "\"}\"";
   voice-family: inherit;
   height: 22px;
text-decoration: none;
}

#menu7 li a:link, #menu7 li a:visited {
color: #1D537F;
display: block;
background: url(images/menu7.gif) repeat-x;
padding: 10px 0 0 10px;
}

#menu7 li a:hover {
color: #fff;
background: url(images/menu7.gif) repeat-x 0 -32px;
padding: 10px 0 0 10px;
}

#menu7 li a:active {
color: #fff;
background: url(images/menu7.gif) repeat-x 0 -64px;
padding: 10px 0 0 10px;
}

/* =-=-=-=-=-=-=-[Menu Eight]-=-=-=-=-=-=-=- */

#menu8 {
width: 200px;
margin-top: 10px;
}

#menu8 li a {
text-decoration: none;
height: 32px;
   voice-family: "\"}\"";
   voice-family: inherit;
   height: 24px;
}

#menu8 li a:link, #menu8 li a:visited {
color: #777;
display: block;
background: url(images/menu8.gif);
padding: 8px 0 0 20px;
}

#menu8 li a:hover {
color: #257EB7;
background: url(images/menu8.gif) 0 -32px;
padding: 8px 0 0 25px;
}

#menu8 li a:active {
color: #fff;
background: url(images/menu8.gif) 0 -64px;
padding: 8px 0 0 25px;
}

/* =-=-=-=-=-=-=-[Menu Nine]-=-=-=-=-=-=-=- */

#menu9 {
width: 200px;
margin-top: 10px;
}

#menu9 li a {
   height: 32px;
   voice-family: "\"}\"";
   voice-family: inherit;
   height: 24px;
text-decoration: none;
}


#menu9 li a:link, #menu9 li a:visited {
color: #E5E8D4;
display: block;
background: url(images/menu9.gif);
padding: 8px 0 0 10px;
}

#menu9 li a:hover {
color: #725033;
background: url(images/menu9.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#menu9 li a:active {
color: #fff;
background: url(images/menu9.gif) 0 -64px;
padding: 8px 0 0 10px;
}

</style>
</head>

<body>
<div id="header">Вертикальные меню CSS</div>
<div id="container">
<div id="content">
<p>9 красивых вертикальных меню встроены в одну HTML страницу, для того чтобы узнать код нужного вам меню просто раскройте код. Кстати все эти меню взяты из программы <a href="http://www.highdots.com/css-tab-designer/" target="_blank">CSS Tab Designer</a> программа бесплатная поэтому смело можно ее <a href="http://www.highdots.com/download/css_tab.zip" target="_blank">скачать</a>. В программе соответственно выбор этих меню больше, есть и горизонтальные и вертикальные.</p><br />

<p>А еще больше и красивее выбор меню вот тут: <br /> <a href="http://shebeko.com/krasivye-menyu-dlya-sajta-css-i-ne-tolko.html">http://shebeko.com/krasivye-menyu…css-i-ne-tolko.html</a></p>
</div>
<div id="firstcol">
<div id="menu">
<ul>
<li><a href="#1" title="Главная">Главная</a></li>
<li><a href="#2" title="О проекте">О проекте</a></li>
<li><a href="#3" title="Наш сервис">Наш сервис</a></li>
<li><a href="#4" title="Портфолио">Портфолио</a></li>
<li><a href="#5" title="Магазин">Магазин</a></li>
<li><a href="#5" title="Download">Контакты</a></li>
</ul>
</div>

<div id="menu2">
<ul>
<li><a href="#1" title="Главная">Главная</a></li>
<li><a href="#2" title="О проекте">О проекте</a></li>
<li><a href="#3" title="Наш сервис">Наш сервис</a></li>
<li><a href="#4" title="Портфолио">Портфолио</a></li>
<li><a href="#5" title="Магазин">Магазин</a></li>
<li><a href="#5" title="Download">Контакты</a></li>
</ul>
</div>

<div id="menu3">
<ul>
<li><a href="#1" title="Главная">Главная</a></li>
<li><a href="#2" title="О проекте">О проекте</a></li>
<li><a href="#3" title="Наш сервис">Наш сервис</a></li>
<li><a href="#4" title="Портфолио">Портфолио</a></li>
<li><a href="#5" title="Магазин">Магазин</a></li>
<li><a href="#5" title="Download">Контакты</a></li>
</ul>
</div>
</div>
<div id="secondcol">
<div id="menu4">
<ul>
<li><a href="#1" title="Главная">Главная</a></li>
<li><a href="#2" title="О проекте">О проекте</a></li>
<li><a href="#3" title="Наш сервис">Наш сервис</a></li>
<li><a href="#4" title="Портфолио">Портфолио</a></li>
<li><a href="#5" title="Магазин">Магазин</a></li>
<li><a href="#5" title="Download">Контакты</a></li>
</ul>
</div>

<div id="menu5">
<ul>
<li><a href="#1" title="Главная">Главная</a></li>
<li><a href="#2" title="О проекте">О проекте</a></li>
<li><a href="#3" title="Наш сервис">Наш сервис</a></li>
<li><a href="#4" title="Портфолио">Портфолио</a></li>
<li><a href="#5" title="Магазин">Магазин</a></li>
<li><a href="#5" title="Download">Контакты</a></li>
</ul>
</div>

<div id="menu6">
<ul>
<li><a href="#1" title="Главная">Главная</a></li>
<li><a href="#2" title="О проекте">О проекте</a></li>
<li><a href="#3" title="Наш сервис">Наш сервис</a></li>
<li><a href="#4" title="Портфолио">Портфолио</a></li>
<li><a href="#5" title="Магазин">Магазин</a></li>
<li><a href="#5" title="Download">Контакты</a></li>
</ul>
</div>
</div>

<div id="thirdcol">
<div id="menu7">
<ul>
<li><a href="#1" title="Главная">Главная</a></li>
<li><a href="#2" title="О проекте">О проекте</a></li>
<li><a href="#3" title="Наш сервис">Наш сервис</a></li>
<li><a href="#4" title="Портфолио">Портфолио</a></li>
<li><a href="#5" title="Магазин">Магазин</a></li>
<li><a href="#5" title="Download">Контакты</a></li>
</ul>
</div>

<div id="menu8">
<ul>
<li><a href="#1" title="Главная">Главная</a></li>
<li><a href="#2" title="О проекте">О проекте</a></li>
<li><a href="#3" title="Наш сервис">Наш сервис</a></li>
<li><a href="#4" title="Портфолио">Портфолио</a></li>
<li><a href="#5" title="Магазин">Магазин</a></li>
<li><a href="#5" title="Download">Контакты</a></li>
</ul>
</div>

<div id="menu9">
<ul>
<li><a href="#1" title="Главная">Главная</a></li>
<li><a href="#2" title="О проекте">О проекте</a></li>
<li><a href="#3" title="Наш сервис">Наш сервис</a></li>
<li><a href="#4" title="Портфолио">Портфолио</a></li>
<li><a href="#5" title="Магазин">Магазин</a></li>
<li><a href="#5" title="Download">Контакты</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>



Может в шаблоне дело? Шаблон я менял. Или код CSS не такой? У меня Joomla 1.5.15. Помогите пожалуйста !
« Последнее редактирование: 11.02.2012, 15:16:31 от frito » Записан
frito
Новичок
*

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 9



« Ответ #1 : 08.02.2012, 19:47:56 »

Ну помогите же ктонибудь............. Sad
Записан
frito
Новичок
*

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 9



« Ответ #2 : 11.02.2012, 13:36:52 »

Спасибо, хороший форум, отзывчивые  люди.
Записан
dron
Живу я здесь
******

Репутация: +11/-9
Offline Offline

Сообщений: 1080


« Ответ #3 : 11.02.2012, 13:42:59 »

поставь FireBug и проверь. Или хоть линку дай на сайт.
Записан
frito
Новичок
*

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 9



« Ответ #4 : 11.02.2012, 14:12:21 »

вот линк http://rp-mania.ru/  Проверил через FireBug пишет что невозможно загрузить указанный url картинки.... почему?...
« Последнее редактирование: 11.02.2012, 14:27:14 от frito » Записан
dron
Живу я здесь
******

Репутация: +11/-9
Offline Offline

Сообщений: 1080


« Ответ #5 : 11.02.2012, 14:19:06 »

ну, как я и говорил, поставь FireBug, и сразу все поймете.

Во-первых, background-image: url("libraries/images/menu2.gif") - не подгружается. Либо структура папок не та, либо нет изображения, либо адрес неправильно прописали.
Во-вторых, код шаблона странный... Куча дивов вложенных, много лишнего...
Записан
frito
Новичок
*

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 9



« Ответ #6 : 11.02.2012, 14:29:13 »

по ссылке открывает браузер картинку, путь правильный получается http://rp-mania.ru/libraries/images/menu2.gif  что ж нетак?.. непойму.
« Последнее редактирование: 11.02.2012, 14:45:17 от frito » Записан
frito
Новичок
*

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 9



« Ответ #7 : 11.02.2012, 15:02:22 »

Всё, разобрался Yes! Помог Google chrome "просмотр кода элемента" Нажал там по ссылке картинки, выдало 404 и адрес страницы http://rp-mania.ru/libraries/libraries/images/menu2.gif то есть папка libraries 2 раза открывалась, так как файл с CSS лежал в каталоге с libraries нужно было эту папку уже в адресе не прописывать а писать просто /images/menu2.gif  Хотя даже в url писал полный адрес http://rp-mania.ru/libraries/images/menu2.gif не помогало, а стало работать только если images/menu2.gif. Теперь на будущее буду знать, спасибо dron за идею посмотреть код страницы!!
Записан
dron
Живу я здесь
******

Репутация: +11/-9
Offline Offline

Сообщений: 1080


« Ответ #8 : 11.02.2012, 15:03:00 »

1. Попробуй указать прямой путь к картинке или /libraries/images/menu2.gif
2. Вообще-то, изображения для шаблона должны храниться в папке корневая папка/templates/имя шаблона/images. Соответственно, и путь будет таким background: url(../images/имя файла.jpg);
Записан
dron
Живу я здесь
******

Репутация: +11/-9
Offline Offline

Сообщений: 1080


« Ответ #9 : 11.02.2012, 15:05:40 »

вообще, для разработки всегда используй плагины, упрощающие работу с кодом. По мне, так Firefox + FireBug - самый лучший вариант. Хотя FireBug сейчас и для оперы и для хрома есть.

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

Успехов!
Записан
frito
Новичок
*

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 9



« Ответ #10 : 11.02.2012, 15:06:00 »

АААА да всё, точно в папку шаблона надо путь было указать !!  Да они и там как раз валялись, вот по-этому и заработало images/menu2.gif.
« Последнее редактирование: 11.02.2012, 15:12:03 от frito » Записан
frito
Новичок
*

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 9



« Ответ #11 : 11.02.2012, 15:12:27 »

 Хотя нет, щас удалил с libraries/images картинку, перестало отображать, значит всетаки надо указывать путь, с учетом того, где лежит подгружаемый файл CSS !! Потому что в папке шаблона удалил эту картинку, всеравно показывает, а в libraries/images удалил, уже не показывает!! Вот так
Записан
dron
Живу я здесь
******

Репутация: +11/-9
Offline Offline

Сообщений: 1080


« Ответ #12 : 11.02.2012, 15:22:19 »

блин, ну дык это же в CSS файле путь прописан!

background: url(libraries/images/menu2.gif); - вот его код. положи картинку в папку images и сделай путь background: url(../images/menu2.gif)
Записан
frito
Новичок
*

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 9



« Ответ #13 : 11.02.2012, 15:49:21 »

Да я то разобрался, просто говорю что путь еще зависит от того где лежит подгружаемый файл CSS, к примеру если CSS лежит в папке logs а картинки в папке logs/pictures то url в ксс надо писать pictures/kartinka.jpg а не logs/pictures/kartinka.jpg
Записан
dron
Живу я здесь
******

Репутация: +11/-9
Offline Offline

Сообщений: 1080


« Ответ #14 : 11.02.2012, 16:00:58 »

да вот в том то и дело, что CSS - должны лежать в папке CSS, а картинки - в папке images. тогда проблем никаких и не будет.
Записан
mr_denisters
Осваиваюсь на форуме
***

Репутация: +6/-0
Offline Offline

Пол: Мужской
Сообщений: 132


Очередной Вебмастер


« Ответ #15 : 05.02.2016, 01:01:10 »

Пол дня провтыкал в файрбаге все ок, пути относительные ок, в браузере открывается а на сайте нету, пока не открыл сайт через Chrome и там изображение было на сайте.
И тут меня осенило что я использую адблок для Firefox, отключил ребутнул страничку и изображение появилось.
Получается FireBug не победил адблок и ввел меня в заблуждение.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet