0 Пользователей и 1 Гость просматривают эту тему.
  • 15 Ответов
  • 8027 Просмотров
*

frito

  • Новичок
  • 9
  • 0
Доброго времени суток. Я в 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

  • Новичок
  • 9
  • 0
Ну помогите же ктонибудь............. :(
*

frito

  • Новичок
  • 9
  • 0
Спасибо, хороший форум, отзывчивые  люди.
*

dron

  • Живу я здесь
  • 1129
  • 2
поставь FireBug и проверь. Или хоть линку дай на сайт.
*

frito

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

dron

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

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

frito

  • Новичок
  • 9
  • 0
по ссылке открывает браузер картинку, путь правильный получается  что ж нетак?.. непойму.
« Последнее редактирование: 11.02.2012, 14:45:17 от frito »
*

frito

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

dron

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

dron

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

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

Успехов!
*

frito

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

frito

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

dron

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

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

frito

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

dron

  • Живу я здесь
  • 1129
  • 2
да вот в том то и дело, что CSS - должны лежать в папке CSS, а картинки - в папке images. тогда проблем никаких и не будет.
*

mr_denisters

  • Осваиваюсь на форуме
  • 128
  • 6
  • Очередной Вебмастер
Пол дня провтыкал в файрбаге все ок, пути относительные ок, в браузере открывается а на сайте нету, пока не открыл сайт через Chrome и там изображение было на сайте.
И тут меня осенило что я использую адблок для Firefox, отключил ребутнул страничку и изображение появилось.
Получается FireBug не победил адблок и ввел меня в заблуждение.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

как сделать пункт меню не кликабельным?

Автор qweqweqwe

Ответов: 13
Просмотров: 5227
Последний ответ 07.09.2017, 01:45:49
от forzi
Сдвинуть пункты меню в левое положение

Автор wectra

Ответов: 6
Просмотров: 299
Последний ответ 12.07.2017, 21:09:01
от wectra
Не отображаются пункты в меню

Автор physic

Ответов: 16
Просмотров: 15298
Последний ответ 27.05.2017, 00:10:15
от OutLaw1
Nextend Accordion Menu можно ли сделать открытым только первый пункт меню?

Автор tmpnikl

Ответов: 0
Просмотров: 134
Последний ответ 26.05.2017, 09:59:09
от tmpnikl
В K3 меню сайта меняется на английское

Автор nautilus.lg

Ответов: 0
Просмотров: 174
Последний ответ 25.05.2017, 11:09:20
от nautilus.lg