Overdoze.Ru
Запомнить авторизацию  [?] | Забыли пароль? | Регистрация
Сегодня: 19 января 2018 г., 06:55:48  
Актуальные версии AVE CMS:   AVE CMS 3.0RC | AVE.CMS 2.09RC2 svn | AVE CMS 2.08 original

раскрутка сайтов
Добро пожаловать Гость!
Мы рады приветствовать вас на наших форумах. Вы должны зарегистрироваться, чтобы оставлять сообщения. Если вы уже зарегистрированы, то просто войдите используя форму для входа.
 
Пароль
Забыли пароль? | Зарегистрироваться

Форумы Пользователи Поиск по форумам Активные темы за последние 24 часа

Форумы
 cpengine 2.0 BETA // Модуль Навигация
        Горинознатльное меню

<< 1 2 3 > >>

 
Горинознатльное меню

Четверг 20.03.2008, 17:17

vtonya



Пользователь
Прохожий

Всего сообщений: 3
Зарегистрировался: 18.03.2008
Ребята, только поставила ангину впервые...

Очень нравится, только вот не могу понять как сделать горизонтальное меню как тут например http://novosibstroy.ru/



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


Подсткажите, пож-ста, как это сделать,очень нужно, на форуме не нашла!

Заранее огромное спасибо!
Прикрепленный(е) файл(ы)
angina.jpg   (618 Просмотров | 31,6 KB)
Вне сети Вне сети
 

Четверг 20.03.2008, 20:52

Yesvik



Администратор
Профессионал

Всего сообщений: 2820
Зарегистрировался: 08.12.2007
Порядок действий:
Идём в админку, раздел "Меню навигации" и копируем существующее "Основное меню навигации".
Новое меню скорее всего будет с системным тэгом [cp_navi:2], нажимаем на иконку "Редактирование шаблона меню".
Обязательно выбираем "Группы пользователей, которым будет доступно меню".
После этого редактируем "Шаблон оформления для главного (первого) уровня пунктов меню":
Code
Начальный HTML код: <ul><li class="browse_category">Выберите раздел сайта:</li>
Оформление активной ссылки: <li class="active">[cp:linkname]</li>

Сохраняем сделанные изменения и переходим к редактированию пунтов меню.
Все пункты меню создаём только в первом уровне.
С меню навигации закончили.

Наглым образом тырим картинку bar.gif и сохраняем в папке images нашего шаблона.

Таким-же наглым образом тырим кусок CSS и слегка его правим до следующего вида:
Code
.bar {clear:both; font-size:0.9em; font-family:Tahoma, sans-serif; height:30px; color:#FFF; margin:0 0 0 0px; background-color:#ff9000; border-top:2px solid #ddd}
.bar ul {margin:0; padding:0; list-style:none}
.bar li {margin:0; padding:7px 12px 5px 12px; color:#FFEADC; background:#ff9000; float:left}
.bar li.active {background:#ff3000 url(../images/bar.gif) no-repeat center top; color:#fff; font-weight:bold; padding:7px 10px 6px 10px}
.bar li a {font-weight:bold; color:#FFF; background:inherit; text-decoration:none}
.browse_category {font-size:0.9em; width:160px; color:#FFF; background:inherit}

Этот кусок CSS вставляем в конец файла style.css

Теперь осталось изменить "Стандартный шаблон".
Code
В шаблоне ищем строки
<!-- ************* ВЕРХНЯЯ ПЛАНКА ************* -->
<div id="topbar">[cp:quickfinder]</div>

вместо <div id="topbar">[cp:quickfinder]</div>
вставляем <div class="bar">[cp_navi:2]</div>
сохраняем шаблон и наслаждаемся красивым горизонтальным меню как на сайте http://novosibstroy.ru/



__________________________________________________
Вне сети Вне сети
 

Четверг 20.03.2008, 22:31

vtonya



Пользователь
Прохожий

Всего сообщений: 3
Зарегистрировался: 18.03.2008
Спасибо большое за Ваш труд, сделала все как Вы написали... но не получилось...

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

Пятница 21.03.2008, 08:17

Repellent



Пользователь
Профессионал

Всего сообщений: 559
Зарегистрировался: 04.11.2007
1. В админке Находим в шаблоне

<div id="topheader">
<a href="/"><img src="[cp:mediapath]images/logo.gif" alt="На главную" border="0" /></a>
</div>


2. После это строчки вносим <div id="navtop">[cp_navi:1]</div> и сохраняемся.


3.Путь templatescpcssв style.css изменяемого шаблона вносим в раздел SEITEN-KOPF следующее:
#navtop {display:;;height:22px;text-align:left; background-color:#85816e /*position:absolute;top:8px;left:200px;z-index:400
;*/}
#navtopcontents {display:;;height:22px;text-align:left; background-color:#85816e /*position:absolute;top:8px;left:200px;z-index:400
;*/}

#navtop ul {display:inline}
#navtop li {display:inline;}
#navtop a:link,#navtop a:visited {
padding:10px;
padding-left:0px;
padding-bottom:5px;
margin-top:5px;
margin-right:23px;
margin-left:-5px;
border-right:0px solid #b2afa5;
color:#d9d5c8;
text-decoration:none;
text-transform:lowercase;
font-size:14px;
line-height:2.1em
}
#navtop a:hover{
padding:10px;
padding-left:0px;
padding-bottom:5px;
margin-top:5px;
margin-top:5px;
margin-right:23px;
border-right:0px solid #b2afa5;
color:#fff;
text-decoration:none;
text-transform:lowercase;
font-size:14px;
line-height:2.1em
}
получаем горизонтальное меню ........
Вне сети Вне сети
 

Понедельник 09.06.2008, 06:54

delphi



Пользователь
Активист

Всего сообщений: 187
Зарегистрировался: 14.11.2007
Zitat
Писал: repellent
1. В админке Находим в шаблоне

<div id="topheader">
<a href="/"><img src="[cp:mediapath]images/logo.gif" alt="На главную" border="0" /></a>
</div>


2. После это строчки вносим <div id="navtop">[cp_navi:1]</div> и сохраняемся.


3.Путь templatescpcssв style.css изменяемого шаблона вносим в раздел SEITEN-KOPF следующее:
#navtop {display:;;height:22px;text-align:left; background-color:#85816e /*position:absolute;top:8px;left:200px;z-index:400
;*/}
#navtopcontents {display:;;height:22px;text-align:left; background-color:#85816e /*position:absolute;top:8px;left:200px;z-index:400
;*/}

#navtop ul {display:inline}
#navtop li {display:inline;}
#navtop a:link,#navtop a:visited {
padding:10px;
padding-left:0px;
padding-bottom:5px;
margin-top:5px;
margin-right:23px;
margin-left:-5px;
border-right:0px solid #b2afa5;
color:#d9d5c8;
text-decoration:none;
text-transform:lowercase;
font-size:14px;
line-height:2.1em
}
#navtop a:hover{
padding:10px;
padding-left:0px;
padding-bottom:5px;
margin-top:5px;
margin-top:5px;
margin-right:23px;
border-right:0px solid #b2afa5;
color:#fff;
text-decoration:none;
text-transform:lowercase;
font-size:14px;
line-height:2.1em
}
получаем горизонтальное меню ........


Сделал гор.меню используя этот метод. , Все получилось, спасибо! Но все названия в меню идут маленькими буквами, Хотя в админке каждая рубрика с первой буквы прописана большой(т.е. типа - Главная - Контакты...).

Где что можно исправить???
Вне сети Вне сети
 

Понедельник 09.06.2008, 07:09

Repellent



Пользователь
Профессионал

Всего сообщений: 559
Зарегистрировался: 04.11.2007
а вот же стоит преобразование - text-transform:lowercase; - если его не надо - просто убеои эти строчки.
Вне сети Вне сети
 

Вторник 10.06.2008, 16:24

delphi



Пользователь
Активист

Всего сообщений: 187
Зарегистрировался: 14.11.2007
Zitat
Писал: repellent
а вот же стоит преобразование - text-transform:lowercase; - если его не надо - просто убеои эти строчки.



Спасибо, буду знать(подозревал именно этот момент, но не знал этот атрибут).

А подскажи правильный код, чтобы текст выводился посередине блока по соотношению высоты.
Ситуация такая- верхний блок под logo. По правому краю - картинка(150x150px). остальное поле замощенно картинкой background. Нужно чтобы в этом поле(во втором)текст(типа название сайта) отображался по центру(по ширине - понятно, а по высоте - не получается).
Спасибо.

Editiert: 10.06.2008, 16:41:51
Вне сети Вне сети
 

Вторник 10.06.2008, 16:28

delphi



Пользователь
Активист

Всего сообщений: 187
Зарегистрировался: 14.11.2007
Zitat
Писал: vtonya
Спасибо большое за Ваш труд, сделала все как Вы написали... но не получилось...

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


Сделал все как описал Yesvik.- Все работает!!!
Ясное дело, в стилях цвета изменял на нужные мне, и только..........

Вне сети Вне сети
 

Вторник 10.06.2008, 19:34

Repellent



Пользователь
Профессионал

Всего сообщений: 559
Зарегистрировался: 04.11.2007
Zitat
Писал: delphi

Нужно чтобы в этом поле(во втором)текст(типа название сайта) отображался по центру(по ширине - понятно, а по высоте - не получается).
Спасибо.



делай на margin, ну например:

margin-bottom: 5px; - величина нижнего отступа 5 пикселей
margin-top: 5px; - верх отсуп

Вне сети Вне сети
 

Среда 11.06.2008, 11:17

HamZa1977



Пользователь
Прохожий

Всего сообщений: 9
Зарегистрировался: 29.05.2008
У меня тоже все получилось, только одно не могу понять, у меня все кнопки раздельно идут. А как бы сделать чтоб они сплошной полосой шли?
Вне сети Вне сети
 

Среда 11.06.2008, 11:34

Repellent



Пользователь
Профессионал

Всего сообщений: 559
Зарегистрировался: 04.11.2007
не, значит гдето стиль не прописал - они в один ряд и должны все выстроиться, вечером
выложу горизонтальное меню с кнопками уже сделанными.

p/s/ - еще - padding:10px - регулирует пространство возле обьекта.....то бишь кнопочки
Editiert: 11.06.2008, 11:37:10
Вне сети Вне сети
 

Среда 11.06.2008, 12:08

Mad Den



Пользователь
Эксперт

Всего сообщений: 440
Зарегистрировался: 05.11.2007
Оффтоп.
Сколько же сайтов в инете на стандартном шаблоне ангины.......жесть
Неужелеи людям лень нарисовать свое собственное...
Вне сети Вне сети
 

Среда 11.06.2008, 16:14

Repellent



Пользователь
Профессионал

Всего сообщений: 559
Зарегистрировался: 04.11.2007
to mad_den. да ладно тебе:)))) кто то штампует наверное ....кто то для себя старается - тогда ляпоту наводят...
Вне сети Вне сети
 

Среда 11.06.2008, 16:49

Repellent



Пользователь
Профессионал

Всего сообщений: 559
Зарегистрировался: 04.11.2007
тогда с начала
1. В админке Находим в шаблоне (стандартном):

<div id="topheader">
<a href="/"><img src="[cp:mediapath]images/logo.gif" alt="На главную" border="0" /></a>
</div>
2. После это строчки вносим <div id="navtop">[cp_navi:1]</div> и сохраняемся.

в файле style.css добавляем:

#navtop {display:;;height:22px; text-align:left; background:#fff url(/templates/cp/images/header.gifs) repeat-x right 0;/*position:absolute;top:8px;left:200px;z-index:4
00
;*/}
#navtopcontents {display:;;height:22px;text-align:left; background:#fff url(/templates/cp/images/header.gifs) repeat-x right 0; /*position:absolute;top:8px;left:200px;z-index:400
;*/}

#navtop ul {display:inline;margin-left:-1px;}
#navtop li {display:inline;margin-left:-1px;}
#navtop a:link,#navtop a:visited {
padding:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:8px;
margin-top:0px;
margin-right:0px;
margin-left:0px;
border-right:0px solid #fff;
border-left:0px solid #fff;
color:#000;
background:#fff url(/templates/cp/images/1.gif) repeat-x right 0; height:50px;
text-decoration:none;
text-transform:lowercase;
font-size:16px;
line-height:2.1em
}
#navtop a:hover{
padding:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:8px;
margin-top:0px;
margin-right:0px;
margin-left:00px;
border-right:0px solid #fff;
border-left:0px solid #fff;
color:#f18e00;
background:#fff url(/templates/cp/images/2.gif) repeat-x right 0; height:50px;
text-decoration:none;
text-transform:lowercase;
font-size:16px;
line-height:2.1em
}

в папку templatescpimages скопируем два файлика 1.gif и 2.gif

получаем меню - скриншот и файл с кнопками ниже.
общие координаты по горизонтали
#navtop ul {display:inline;margin-left:-1px;}
#navtop li {display:inline;margin-left:-1px;}
вот сейчас - это самый левый - поменяйте значение и все меню сместиться куда захотите



Прикрепленный(е) файл(ы)
screen.jpg   (623 Просмотров | 25,5 KB)
css.rar   (500 Просмотров | 8,3 KB)
Вне сети Вне сети
 

Среда 11.06.2008, 17:34

delphi



Пользователь
Активист

Всего сообщений: 187
Зарегистрировался: 14.11.2007
Zitat
Писал: repellent
Zitat
Писал: delphi

Нужно чтобы в этом поле(во втором)текст(типа название сайта) отображался по центру(по ширине - понятно, а по высоте - не получается).
Спасибо.



делай на margin, ну например:

margin-bottom: 5px; - величина нижнего отступа 5 пикселей
margin-top: 5px; - верх отсуп



repellent - спасибо за помощь!

margin-top:20px;- этот атрибут ставил в первую очередь, но передвигается не слово, а полностью вся шапка.
Пишу код куда что поставил + стиль-
------------------------
<body>
<div id="body">

<div id="topheader">
<div id="topheader1">Какое то Название</div>
<a href="/"><img src="[cp:mediapath]images/logo.jpg" alt="На главную" border="0" /></a>
</div>
-------------------------

Стиль:
-----------
#topheader {background:#fff url(/templates/cp/images/header.gif) repeat-x right 0; height:200px; margin-top:0px; margin-bottom:0px;}

#topheader1 { height:0px; padding:0px; text-align:center; font-size:18px; color:#fff; margin-top:20px}
-----------

Сие -<div id="topheader1">Какое то Название</div> куда только не ставил)))))))))))
Увы, в нужное место не попал)))))))))

Editiert: 11.06.2008, 17:35:42
Вне сети Вне сети
 

Печатать тему |  « Предыдущая тема |  Следующая тема »
Показать
<< 1 2 3 > >>  

 

Печать страницы | Рекомендовать Сайт


рублей Яндекс.Деньгами
на счёт 41001130616963 (Разработки Overdoze.Ru)

Сибавтомастер: техобслуживание и ремонт японских автомобилей
Количство запросов к БД: 404шт. | Время генерации страницы: 0,2289