[X] Помощник

[toorr2p Topic Starter]

Всем привет!
Подскажите кто знает как решить такую задачу:

Имеется блок с фиксированной шириной 1004px, в котором блок с меню, задача центровать блок меню в родителе, тоесть ширина меню может увеличиватся или уменьшатся в зависимости от добавления или удаления пунктов меню.
Из-за этого для блока с меню я не могу сделать вот так margin:0 auto; как выйти из ситуации?
Спасибо!

[Гость_0_*]

Я иногда пользуюсь пещерным методом:

<center></center>

[toorr2p Topic Starter]

Да но у UL menu стоит float:left; иначе оно растягивается на всю ширину.

<div id="cont">
<div id="menu">
<div class="moduletable">
<ul class="menu">
<li></li>
...
</ul>
</div>
</div>
</div>

#cont {
    background: url("../images/grad.png") no-repeat scroll center bottom transparent;
    margin: 0 auto;
    width: 1004px;
}
#menu {
    background: url("../images/menu_back.png") no-repeat scroll center bottom transparent;
    height: 56px;
    margin: 335px auto 0;
    overflow: hidden;
}
#menu ul {
    background: url("../images/menu-ul.png") no-repeat scroll right bottom transparent;
    display: block;
    height: 56px;
}

Неужели только Javascript

[panika]

в чем собственно проблема и что что у ul стоит float:left он же позиционируеться относительно родителя коим являеться <div class="moduletable">

#menu ul {
    background: url("../images/menu-ul.png") no-repeat scroll right bottom transparent;
    display: block;
    height: 56px;
}

Это вообще ересь, ul и есть #menu, тогда уж так ul#menu

так как moduletable div он по умолчанию принимает 100% ширины родителя, поэтому если ul обтекается справа или слева нужно блочный элемент в котором он находиться уменьшить на ширину списка меню и не забывать кроссбразерность.

.moduletable {
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
}

*display:inline; - почти не пользовался таким хаком для internet explorer - поэтому гарантии на счет него не даю

Если не сработает то можно другим способом

.moduletable {
    display:-moz-inline-stack;
    display:inline-block;
}

/*for internet explorer 6 \*/
* html .moduletable {
    zoom:1;
    display:inline;
}
/*\*/

[toorr2p Topic Starter]

Это вообще ересь, ul и есть #menu, тогда уж так ul#menu

Здесь вы не правы, посмотрите листинг HTML и внимательно посмотрите атрибуты у UL нет id, там класс и это разные вещи.

Сделал с вашим CSS получилось вот так:

#menu {
    background: url("../images/menu_back.png") no-repeat scroll center bottom transparent;
    height: 56px;
    margin: 335px auto 0;
    overflow: hidden;
}
#menu .moduletable{
    display:block;
    background:url(../images/menu-moduletable.png) left bottom no-repeat;
    height: 56px;
    
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
}
#menu ul {
    background: url("../images/menu-ul.png") no-repeat scroll right bottom transparent;
    display: block;
    float: left;
    height: 56px;
}

Но блок так и не отцентровался.

[panika]

А да, ошибся. Смотрел просто в спешке показалось id/

Кроме того нужно же центрировать .moduletable

#menu .moduletable{
    background:url(../images/menu-moduletable.png) left bottom no-repeat;
    height: 56px;
    margin:0px auto;
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
}

добавил отступы слева и справа автоматически должно помочь.
можно еще добавить для обьекта #menu text-align:center; это эквивалентно align='center'

[toorr2p Topic Starter]

Все равно не выравниват даже так:

#menu {
    height: 56px;
    background: url(../images/menu_back.png) no-repeat bottom center;
    margin:335px auto 0 auto;
    overflow:hidden;
    width:100%;
}
#menu .moduletable{
    display:block;
    background:url(../images/menu-moduletable.png) left bottom no-repeat;
    height: 56px;
    margin:0 auto !important;
    float:none !important;
    clear:both !important;
    
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
}
#menu ul{
    display:block;
    background:url(../images/menu-ul.png) right bottom no-repeat;
    height:56px;
    float:left;
}

[ZiTosS]

Вячеслав, сделай скрин с подписями или дай тестовую страницу, так будем долго гадать на кофейной гуще

[panika]

#menu {
    height: 56px;
    background: url(../images/menu_back.png) no-repeat bottom center;
    margin:335px auto 0 auto;
    overflow:hidden;
    width:100%;
    text-align:center;
}
#menu .moduletable{
    display:block;
    background:url(../images/menu-moduletable.png) left bottom no-repeat;
    height: 56px;
    margin:0 auto !important;
    float:none !important;
    clear:both !important;
    
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
}
#menu ul{
    display:block;
    background:url(../images/menu-ul.png) right bottom no-repeat;
    height:56px;
    float:left;
}

Так сделайте. Я тут сижу и не вкуриваю зачем вам для ul обтекание?

[toorr2p Topic Starter]

Left для того что бы UL не растягивался во всю ширину, но даже если убрать left, все равно не отцентровывается - вот линк http://пающиетрусы.рф

P.S в данный момент центруется через JS вот так:

var marginLeft = ($conf('#cont').width()-$conf('#menu ul')[0].clientWidth)/2;
var Menu = $conf('#menu');
Menu[0].style.margin = '335px auto 0 '+marginLeft+'px';