ФорумРазработкаКлиентская сторонаВерстка и оформление → выравнивание подменю по центру

выравнивание подменю по центру

  • ilma55

    Сообщения: ? Репутация: N Группа: Кто попало

    Spritz 20 сентября 2010 г. 4:38

    Добрых суток!

    мне нужна помощь… имеется горизонтальное подменю http://www.business-plan.md/

    как мне выровнять подменю по центру? уже не могу… глаза друг друга посылают…

    вот код CSS:
    #menu
    {
    margin: 0 auto;
    padding: 0px;
    position:relative;
    float:right; right:50%; width:auto;
    }
    ul#tophornav{
    /*border:1px solid red; /**/
    height:30px; /* высота списка */
    list-style:none; /* отменяем маркер для списка */
    margin:0 auto; /* выравниваем меню на странице */
    padding:0px; /* обнуление полей */
    position:relative;
    float:none!important; float:left; right:-50%;
    }
    ul#tophornav li{
    display:block;
    float:left;
    }
    ul#tophornav li a{
    color:#61696F; /* цвет текста */
    display:block; /* меняем тип отображения */
    float:left; /* обтекание */
    font:normal 16px arial; /* описываем шрифт */
    height:16px; /* задаем высоту для элемента */
    margin:0px;
    padding:5px 30px 0px 30px;
    text-align:center; /* текст в ячейке "по центру" */
    text-decoration:none; /* отмена декораций */

    }
    ul#tophornav li.active a, ul#tophornav li.active a:hover, ul#tophornav li:hover a { color: #6AABDC; }
    ul#tophornav li a:hover { color:#61696F; }

    ul#tophornav li ul{
    display:none; /* скрываем второй уровень */
    list-style:none;
    margin: 0 auto;
    position:absolute; /* задаем абсолютное позиционирование */
    top:15px; /* отступ сверху */
    left:0px;
    }
    ul#tophornav li.active ul{
    /*border:1px solid red;*/
    display:inline-block;
    float:none;
    margin:0px auto;
    padding:0px;
    /*width:900px;*/

    }

    ul#tophornav li.active ul li a{

    border:0;
    color:#61696F;
    display:inline;
    font-size:12px;
    font-weight:normal;
    height:30px;
    line-height:30px;
    padding:0px;
    margin:0 auto;
    text-align:center;
    white-space:nowrap;
    padding:5px 30px 0px 30px;
    }
    ul#tophornav li.parent ul li a:hover{
    color:#61696F;
    }

    ul#tophornav li.active ul li#current a {color: #6AABDC;}


    а вот HTML:
    <div id=&quot;menu&quot;>
    <ul class=&quot;menu-nav&quot; id=&quot;tophornav&quot;>
    <li class=&quot;item38&quot;><a href=&quot;/&quot;><span>О проекте</span></a></li>
    <li class=&quot;parent item3&quot;><a href=&quot;/razrabotati/elaborate&quot;><span>Разработать</span></a>
    <ul>
    <li class=&quot;item4&quot;><a href=&quot;/razrabotati/basic-planing&quot;><span>Основы планирования</span></a></li>
    <li class=&quot;item5&quot;><a href=&quot;/razrabotati/standarts&quot;><span>Стандарты</span></a></li>
    <li class=&quot;item36&quot;><a href=&quot;/razrabotati/mistakes&quot;><span>Ошибки</span></a></li>
    <li class=&quot;item6&quot;><a href=&quot;/razrabotati/bible&quot;><span>Библиотека</span></a></li>
    <li class=&quot;item7&quot;><a href=&quot;/razrabotati/help&quot;><span>Помощь</span></a></li>
    </ul>
    </li>
    <li class=&quot;parent item8&quot;><a href=&quot;/zakazati/order&quot;><span>Заказать</span></a>
    <ul>
    <li class=&quot;item9&quot;><a href=&quot;/zakazati/bizplan&quot;><span>Бизнес план</span></a></li>
    <li class=&quot;item10&quot;><a href=&quot;/zakazati/teo&quot;><span>Т Э О</span></a></li>
    <li class=&quot;item11&quot;><a href=&quot;/zakazati/fin-plan&quot;><span>Финансовый план</span></a></li>
    <li class=&quot;item34&quot;><a href=&quot;/zakazati/bystro-plan&quot;><span>Быстроплан</span></a></li>
    </ul>
    </li>
    <li class=&quot;item12&quot;><a href=&quot;/bez-plana/business-without-plan&quot;><span>Бизнес без плана</span></a></li>
    <li class=&quot;parent item13&quot;><a href=&quot;/partneri/partners&quot;><span>Партнёры</span></a>
    <ul>
    <li class=&quot;item15&quot;><a href=&quot;/partneri/donors&quot;><span>Доноры</span></a></li>
    <li class=&quot;item16&quot;><a href=&quot;/under-construction&quot;><span>Консультанты</span></a></li>
    <li class=&quot;item14&quot;><a href=&quot;/partneri/creditors&quot;><span>Кредитные организации</span></a></li>
    </ul>
    </li>
    <li class=&quot;item17&quot;><a href=&quot;/kontakti/contacts&quot;><span>Контакты</span></a></li>
    </ul>
    </div>
  • Givi

    Сообщения: ? Репутация: N Группа: Адекваты

    Spritz 20 сентября 2010 г. 5:39, спустя 1 час 1 минуту 27 секунд

    ilma55, ну раз это отдельное подменю, то сделай его отдельным совсем, окружи блоками и выравнивай уже известными способами центровки. Просто так, по той хрене что у тебя уже есть в ХТМле ты не сделаешь &quot;динамическую&quot; (неизвестна ширина каждого меню + неизвестно их количество) и кроссбраузерную центровку.
  • ilma55

    Сообщения: ? Репутация: N Группа: Кто попало

    Spritz 20 сентября 2010 г. 5:46, спустя 6 минут 17 секунд

    а если я буду знать длину каждого подпункта. скажем так она не превышает 100px, то можно как то?
  • Givi

    Сообщения: ? Репутация: N Группа: Адекваты

    Spritz 20 сентября 2010 г. 7:05, спустя 1 час 19 минут 31 секунду

    элементарно: если есть 4 пункта по 100 пикселей. то значит общий список будет шириной 400 пикселей. Вот значит ты четко ему указываешь 400 пикселей + margin: 0 auto;
  • ilma55

    Сообщения: ? Репутация: N Группа: Кто попало

    Spritz 20 сентября 2010 г. 7:14, спустя 8 минут 39 секунд

    а если 3 ?
    надо как-то чтоб автоматом высчитывалось
  • Givi

    Сообщения: ? Репутация: N Группа: Адекваты

    Spritz 20 сентября 2010 г. 7:54, спустя 40 минут 17 секунд

    ilma55, никак. Ну или пыхой считать общую длину и подставлять прямо в шаблон, что в целом уебанство.
  • ilma55

    Сообщения: ? Репутация: N Группа: Кто попало

    Spritz 20 сентября 2010 г. 7:59, спустя 5 минут 6 секунд

    мда… меня тож это меню за.е.б.а.ло
  • technobulka

    Сообщения: 4552 Репутация: N Группа: Джедаи

    Spritz 20 сентября 2010 г. 9:03, спустя 1 час 3 минуты 25 секунд

    чет я не втыкнул, а в чем проблема была?) или уже решили?)
    Высокоуровневое абстрактное говно
  • ilma55

    Сообщения: ? Репутация: N Группа: Кто попало

    Spritz 20 сентября 2010 г. 11:34, спустя 2 часа 31 минуту 15 секунд

    проблема в выравнивании подменю по центру…

    в данном коде оно выравнивается относительно левой части экрана, а мне надо центр!

Пожалуйста, авторизуйтесь, чтобы написать комментарий!