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


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 90 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 45 Вне конкурса за определение пользователя месяца

  • Фотография TimurR
    #6

    TimurR
    Очков активности: 42 Вне конкурса за определение пользователя месяца

  • Фотография AnnaYa
    #7

    AnnaYa (topbase.ru)
    Очков активности: 36 2 темы, 6 сообщений, 2 балла репутации

  • Фотография Developer
    #8

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография Алексей111
    #9

    Алексей111
    Очков активности: 33 6 тем, 4 сообщения, 1 балл репутации

  • Фотография fedornabilkin
    #10

    fedornabilkin (zaka4ano.ru)
    Очков активности: 24 0 тем, 4 сообщения, 4 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 26.09.2018
Топ 5 участников по репутации


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

#1 Вячеслав

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

Отправлено 10 December 2010 - 23:25

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

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

 

 

  • 0

#2 admin

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

Отправлено 11 December 2010 - 00:51

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

:)
  • 0

#3 Вячеслав

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

Отправлено 11 December 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 December 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
  • Пользователь
  • 381 сообщений
  • Репутация: 2

Отправлено 11 December 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 December 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
  • Пользователь
  • 381 сообщений
  • Репутация: 2

Отправлено 11 December 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
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 11 December 2010 - 22:41

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

#9 marker

marker
  • Неактивные
  • 52 сообщений
  • Репутация: 0

Отправлено 11 December 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
  • Пользователь
  • 381 сообщений
  • Репутация: 2

Отправлено 13 December 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
  • 2652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

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