Доброго времени суток. Я в 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. Помогите пожалуйста !