верстка горизонтального меню списка. пункты меню падают вниз

Тема в разделе "Вопросы по работе с меню", создана пользователем Robotwerder, 09.10.2009.

  1. Offline

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

    Регистрация:
    06.06.2008
    Сообщения:
    78
    Симпатии:
    0
    Пол:
    Мужской
    сайт beta.openvpn.ru . версия joomla 1.5.13

    при сужении окна браузера пункты горизонт меню падают вниз.:(

    зафиксировал меню по ширине выставив содержащему его контейнеру правый и левый margin: auto

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

    сейчас это выглядит так
    Код (html):
    1. <!-- MENU -->
    2. <table class="menubg" width="100%" height="33px" align="center" border="0" cellpadding="0" cellspacing="0" background"menu_bg_.jpg">
    3.    <td> <div id="top" align="center">   <table cellpadding="0" cellspacing="0" class="moduletable">
    4.             <tr>
    5.             <td>
    6.  
    7.                
    8. <ul class="menu-nav" id="top">
    9.     <li id="current" class="active item1">
    10.         <a href="http://beta.openvpn.ru/">
    11.             <span>Главная</span>
    12.         </a>
    13.     </li>
    14.     <li class="item59">
    15.         <a href="/index.php?option=com_content&amp;view=article&amp;id=69&amp;Itemid=59&amp;lang=ru">
    16.  
    17.             <span>Технологии</span>
    18.         </a>
    19.     </li>
    20.     <li class="item18">
    21.         <a href="/index.php?option=com_content&amp;view=category&amp;id=39&amp;Itemid=18&amp;lang=ru">
    22.             <span>Настройка и помощь</span>
    23.         </a>
    24.     </li>
    25.  
    26.     <li class="item29">
    27.         <a href="/index.php?option=com_content&amp;view=article&amp;id=67&amp;Itemid=29&amp;lang=ru">
    28.             <span>Цены</span>
    29.         </a>
    30.     </li>


    css

    Код (CODE):
    1. #top
    2.    {
    3.     position: relative;
    4.     right: 35px;
    5.     FLOAT: left;
    6.     padding: 0px;
    7.     height: 20px;
    8.     margin-top: 0px;
    9.     margin-right: auto;
    10.     margin-bottom: 0px;
    11.     margin-left: auto;
    12.    }
    13.    
    14.     ul.menu-nav
    15.     {
    16.     list-style-type: none;
    17.  
    18.     }    
    19.     ul.menu-nav li
    20.     {
    21.     display: inline;
    22.     padding-left: 112px;
    23.     margin: 0px;
    24.     FLOAT: left;
    25.     POSITION: relative
    26.     }
    27.     ul.menu-nav li a
    28.     {
    29.     color: #FFFFFF;
    30.     font-size: 14px;
    31.     text-decoration: none;
    32.     DISPLAY: block;
    33.     }
    34.     ul.menu-nav li a:hover
    35.     {
    36.     color: #FFFFFF;
    37.     font-size: 14px;
    38.     text-decoration: underline;
    39.     }
    40.     ul.menu-nav li a:visited
    41.     {
    42.     color: #FFFFFF;
    43.     font-size: 14px;
    44.     text-decoration: none;
    45.     }
    46.     ul.menu-nav li.item28
    47.     {
    48.     background-image: url(../images/dev.jpg);
    49.     background-repeat: no-repeat;
    50.     color:#FFFFFF;
    51.     background-position: 50px center;
    52.     display: inline;
    53.     }
    54.     ul.menu-nav li.item29
    55.     {
    56.     background-image: url(../images/dev.jpg);
    57.     background-repeat: no-repeat;
    58.     color:#FFFFFF;
    59.     background-position: 50px center;
    60.     display: inline;
    61.     }
    62.     ul.menu-nav li.item18
    63.     {
    64.     background-image: url(../images/dev.jpg);
    65.     background-repeat: no-repeat;
    66.     color:#FFFFFF;
    67.     background-position: 50px center;
    68.     display: inline;
    69.     }


    подскажите как быть?! решение наверняка типичное, но поиски не к чему не привели к сожалению..
     
  2.  
  3. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    1. Забытый способ - вставить прозрачную картинку-распорку, указав у неё ширину = размеру меню.
    2. Использовать CSS-свойство nowrap
     
  4. Offline

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

    Регистрация:
    06.06.2008
    Сообщения:
    78
    Симпатии:
    0
    Пол:
    Мужской
    т е картинка распорка будет равна ширине пункта меню? или ширине всего меню?!
    просто не делал ничего подобного ранее ..
    впрочем и свойство nowarp тоже не использовал ..
     
  5. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    ширине всего меню
     

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

Загрузка...