Помогите настроить вид горизонтального меню

Здравствуйте! Мне нужно чтобы при наведении курсора вылелялась вся область, а не только текст, то есть не видно было границ сверху и снизу, как на второй картинке.

вот фрагмент стиля:

Код (CODE):

1. .mainlevel
2. {
3.    
4. }
5.  
6. a.mainlevel:link, a.mainlevel:visited
7.  {
8.    font-size: 11px;
9.    color: Black;
10.    text-decoration : none;
11.    font-family : verdana;
12.    padding : 20;
13.    font-weight : bolder;
14. }
15.  
16. a.mainlevel:hover
17.  {
18.    font-size: 11px;
19.    color: #26116C;
20.    background-color : #B5CF0A;
21. }
22.  
23. a.mainlevel#active_menu {
24.  
25. background: #B5CF0A;
26.  
27. text-decoration: none;
28.  
29. }

Подскажите, пожалуйста, где править? Заранее спасибо.

 

Ответ: Помогите настроить вид горизонтального меню

Внутрь описания селекторов ссылок попробуйте вписать блочный тип отображения:

Код (CODE):

1. a.mainlevel {
2.   display: block;
3. }

 

Ответ: Помогите настроить вид горизонтального меню

Делал тогда меню превращается в вертикальное!

Я тут копаюсь и докапался вот до чего:

я сделал так:

в коде пхп убрал фоновый цвет, а в цсс его вставил. Тогда впринципе, функционально получается то что я хочу, но опять же возникает проблема: верхняя и нижняя части таблицы меню 35 пикселей, а средняя (где сам модуль) 30 пикселей. Должно быть так, а теперь средняя часть гораздо уже стала. Я заметил, что эта "средняя" часть НЕ! варьируется от размера шрифта.

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

 

Ответ: Помогите настроить вид горизонтального меню

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

Код (CODE):

1. ul#mainlevel {
2.   float: left;
3.   list-style-type: none;
4.   margin: 0;
5.   padding: 0;
6. }
7.  
8. ul#mainlevel li {
9.   float: left;
10.   display: inline;
11. }
12.  
13. ul#mainlevel li a {
14.   float: left;
15.   background: url(../images/menuDivider.gif) no-repeat right top;
16.   text-decoration: none;
17.   padding: 9px 12px 10px 10px;
18. }

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

 

Ответ: Помогите настроить вид горизонтального меню

Огромное спасибо! Теперь всё работает так как я задумывал, и корректно отображается как в ИЕ, так и в Опере.

Если можно, то ещё помогите с такими вопросами:

1. Мне нужно, чтобы блоки с сылками были равной величины, например по 70 пикселей. Пробовал задавать width: 70px, блоки растягиваются по высоте .

2. Расстояние между блоками должно быть одинаковым, например, по 1 пикселю. Я сделал так:

Код (CODE):

1. ul#mainlevel li {
2.     float: left;
3.     display: inline;
4.     margin: 0;
5.     padding-left : 1px;
6.     padding-right : 1px;
7.     background-color : #B5CF0A;
8. }

И теперь расстояние между внутренними блоками стало 1 пикс, а по краям (в начале первого и в конце последнего) чуть уже. Как это можно исправить?

Огромное спасибо за помощь!

 

Ответ: Помогите настроить вид горизонтального меню

По первому вопросу: атрибут "width" задает ширину блока, "height" - его высоту. Если Вы не хотите иметь проблем с оптимизацией меню под различные версии Интернет-браузеров, я не советую сочетать их задание с заданием отступов "margin" и "padding". Задавайте что-то одно...

Что касается второго вопроса: используйте внешние ("margin"), а не внутренние ("padding") отступы - при соприкосновении друг с другом они "склеиваются", а суммарный отступ в итоге равняется максимальному из двух "склеиваемых. Есть еще вариант не менять ничего в описании стилей элементов списка, добавив необходимые отступы в описание самого списка, то есть в просто "ul#mainlevel".

З.Ы. Любые листинги в сообщениях приводятся с использованием соответствующих BB-кодов!

 

Ответ: Помогите настроить вид горизонтального меню

Здравствуйте, AmmiAk.

С меню я разобрался. Теперь столкнулся с такой проблемой. Структура сайта достаточно простая: 5 страниц. У каждой из страниц будет свой шаблон. Не меняется только стиль верхнего меню. И надо, чтобы на главной странице активная ссылка меню не была выделена. Я посмотрел на форуме в темах, отнесённых к структуре, почти всё попробовал, но как мне надо, не получилось.

Последний раз делал так: это меню сделал "top_menu", а в "mainmenu" создал ссылку не опубликовывая её. Придал ей те же параметры что и для "top_menu", и как везде говорится это должно было бы сработать. Но увы, ничего опять не вышло .

Надеюсь, вы мне сможете помочь.

Спасибо.

 

Ответ: Помогите настроить вид горизонтального меню

Если страниц на сайте всего пять, включая главную, и для каждой из них с системе управления сайтом задан свой собственный шаблон, значит, и стилей верхнего меню Вами описано тоже пять (по одному набору на каждый шаблон). Нужно "внести изменения" в главную - правьте шаблон главной страницы. За выделение активного пункта меню отвечает идентификатор "#active_menu", с ним Вам и предстоит разбираться в ближайшее время.

 

Ответ: Помогите настроить вид горизонтального меню

Здравствуйте, Ammiak!
Немного переделываю шаблон и столкнулся со странной проблемой:
Когда генерируется страница - модуль меню выводится с отступом, в моём случае отступ 83 пикселя. Не могу понять, откуда это берётся:
Уже для поиска причины упростил всё, но понять не могу

php:

Код (html):

1. <body>
2. <center>
3. <table border="1" width="1000">
4.     <tr>
5.         <td align="left">
6.  
7. <div id="menu"><?php mosLoadModules ( 'menu' ); ?></div>
8.  
9.         </td>
10.     </tr>
11. </table>
12. </body>

css:

Код (html):

1. #menu{
2.     width: 1000px;
3.     float: left;
4.     background-color: Aqua;
5. }ul#mainlevel {
6.     float: left;
7.     list-style-type: none;
8. }
9.  
10. ul#mainlevel li {
11.     float: left;
12.     display: inline;
13. }
14.  
15. ul#mainlevel li a {
16.     float: left;
17.     }
18.  
19.  
20. .mainlevel
21. {
22.     width: 165px;
23.     text-align: center;
24.     text-decoration: underline;
25. }
26.  
27. a.mainlevel:link, a.mainlevel:visited
28.  {
29.     font-size: 14px;
30.     color: White;
31.     text-decoration: underline;
32.     font-family: verdana;
33.     background-color: #444750;
34.     line-height: 30px;
35. }
36.  
37. a.mainlevel:hover
38.  {
39.     font-size: 16px;
40.     color: White;
41.     background-color: #6F6F77;
42. }
43.  
44. a.mainlevel#active_menu {
45.  
46. background: #6F6F77;
47. text-decoration: none;
48. }

код страницы:

Код (html):

1. <body>
2. <center>
3. <table border="1" width="1000">
4.     <tr>
5.         <td align="left">
6.  
7. <div id="menu">     <table cellpadding="0" cellspacing="0" class="moduletable">
8.                 <tr>
9.             <td>
10.                 <ul id="mainlevel"><li><a href="http://m.kz/index.php?option=com_frontpage&amp;Itemid=1" class="mainlevel" id="active_menu">Главная</a></li><li><a href="http://m.kz/qqq.ru" class="mainlevel" >qqq</a></li><li><a href="http://m.kz/qqq.ru" class="mainlevel" >qqq</a></li><li><a href="http://m.kz/qqq.ru" class="mainlevel" >qqq</a></li><li><a href="http://m.kz/qqq.ru" class="mainlevel" >qqq</a></li><li><a href="http://m.kz/qqq.ru" class="mainlevel" >qqq</a></li></ul>            </td>
11.         </tr>
12.         </table>
13.         </div>
14.  
15.         </td>
16.     </tr>
17. </table>
18. </body>

С нетерпением жду ответа. Буду очень благодарен за помощь.