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

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

  • ilma55

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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