Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

Как отцентровать блок с неопределенной шириной

#1 Вячеслав

Вячеслав
  • Пользователь
  • 357 сообщений
  • Репутация: 0
0

Отправлено 10 Декабрь 2010 - 23:25

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

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

 

 

  • 0

#2 admin

admin
  • Пользователь PRO
  • 5 272 сообщений
  • Репутация: 54

Отправлено 11 Декабрь 2010 - 00:51

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

:)
  • 0

Сколько лет прошло, а ссылки всё ещё лучше покупать тут



#3 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 11 Декабрь 2010 - 01:09

Да но у 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
  • 0

#4 marker

marker
  • Пользователь
  • 52 сообщений
  • Репутация: 0

Отправлено 11 Декабрь 2010 - 17:33

в чем собственно проблема и что что у 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;
}
/*\*/

  • 0

#5 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 11 Декабрь 2010 - 17:52

Это вообще ересь, 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;
}
Но блок так и не отцентровался.
  • 0

#6 marker

marker
  • Пользователь
  • 52 сообщений
  • Репутация: 0

Отправлено 11 Декабрь 2010 - 18:15

А да, ошибся. Смотрел просто в спешке показалось 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'
  • 0

#7 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 11 Декабрь 2010 - 22:29

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

#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;
}

  • 0

#8 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 11 Декабрь 2010 - 22:41

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

#9 marker

marker
  • Пользователь
  • 52 сообщений
  • Репутация: 0

Отправлено 11 Декабрь 2010 - 22:42

#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 обтекание?
  • 0

#10 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 13 Декабрь 2010 - 11:24

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';

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru