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

Тема в разделе "Изменение шаблона (кастомизация)", создана пользователем antobarto, 16.03.2008.

  1. Offline

    antobarto Недавно здесь

    Регистрация:
    16.03.2008
    Сообщения:
    23
    Симпатии:
    0
    Здравствуйте! Мне нужно чтобы при наведении курсора вылелялась вся область, а не только текст, то есть не видно было границ сверху и снизу, как на второй картинке.

    вот фрагмент стиля:
    Код (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. }


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

    Вложения:

    • help.jpg
      help.jpg
      Размер файла:
      3.4 КБ
      Просмотров:
      11
    • help2.jpg
      help2.jpg
      Размер файла:
      2.6 КБ
      Просмотров:
      110
    Последнее редактирование модератором: 16.03.2008
  2.  
  3. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Помогите настроить вид горизонтального меню

    Внутрь описания селекторов ссылок попробуйте вписать блочный тип отображения:
    Код (CODE):
    1. a.mainlevel {
    2.   display: block;
    3. }
     
  4. Offline

    antobarto Недавно здесь

    Регистрация:
    16.03.2008
    Сообщения:
    23
    Симпатии:
    0
    Ответ: Помогите настроить вид горизонтального меню

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

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

    я сделал так:

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

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

    Вложения:

    • help3.jpg
      help3.jpg
      Размер файла:
      2.5 КБ
      Просмотров:
      113
    • template_css.txt
      Размер файла:
      4.4 КБ
      Просмотров:
      3
    Последнее редактирование: 16.03.2008
  5. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Помогите настроить вид горизонтального меню

    Понятно. Тогда, думаю, самым верным решением в этой ситуации будет использование в настройках модуля стиля вывода меню "Плоский список" в сочетании с описанными ниже стилями селекторов, которые Вы можете модифицировать под свои нужды:
    Код (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. }

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

    antobarto Недавно здесь

    Регистрация:
    16.03.2008
    Сообщения:
    23
    Симпатии:
    0
    Ответ: Помогите настроить вид горизонтального меню

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

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

    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 пикс, а по краям (в начале первого и в конце последнего) чуть уже. Как это можно исправить?

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

    Вложения:

    • help4.jpg
      help4.jpg
      Размер файла:
      10.1 КБ
      Просмотров:
      16
    Последнее редактирование модератором: 17.03.2008
  7. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Помогите настроить вид горизонтального меню

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

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

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

    antobarto Недавно здесь

    Регистрация:
    16.03.2008
    Сообщения:
    23
    Симпатии:
    0
    Ответ: Помогите настроить вид горизонтального меню

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

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

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

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

    Спасибо.
     
  9. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Помогите настроить вид горизонтального меню

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

    antobarto Недавно здесь

    Регистрация:
    16.03.2008
    Сообщения:
    23
    Симпатии:
    0
    Ответ: Помогите настроить вид горизонтального меню

    Здравствуйте, 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>

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

    Вложения:

    • 1.jpg
      1.jpg
      Размер файла:
      10.4 КБ
      Просмотров:
      13

Поделиться этой страницей

Загрузка...