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


Пользователь месяца
Ixman Ixman 1-й за Октябрь
Очков активности: 693 0 тем, 33 сообщения, 14 баллов репутации
Сайт: o5cat.ru
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 96 Вне конкурса за определение пользователя месяца

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

    yuran (yurbol.ru)
    Очков активности: 81 0 тем, 54 сообщения, 1 балл репутации

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

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

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

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

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

    Mandarin
    Очков активности: 42 0 тем, 28 сообщений, 1 балл репутации

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

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

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

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

  • Фотография алексс
    #8

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

  • Фотография Mariko
    #9

    Mariko
    Очков активности: 16.5 1 тема, 8 сообщений, 1 балл репутации

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

    RosenRot (abuzov.com)
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 31.10.2018
  • Яндекс выдача: 15.11.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

#11 marker

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

Отправлено 13 December 2010 - 16:15

во первых уберите float: left - потому что я не вижу в нем смысла, а код без смысла - это говнокод
далее добавьте к cont свойство align через css
#cont {text-align:center;}

  • 0

#12 ZiTosS

ZiTosS
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 13 December 2010 - 19:59

Вячеслав, не знаю как будет работать в др браузерах, но в FF поможет:
1) Убираем для div c id="menu"
margin: 335px auto 0 164px;
и
float: left;
2) Добавляем для div с id="header"
text-align: center;
Проверил через FireBug на добавление элементов, всё нормально расползается.
  • 0

#13 surfer

surfer
  • Заблокированные
  • 1956 сообщений
  • Репутация: 71

Отправлено 13 December 2010 - 20:15

тута глянь http://htmlbook.ru/l...u-veb-stranitsy
  • 0

#14 ZiTosS

ZiTosS
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 13 December 2010 - 20:37

surfer, размеры меню могут меняться, с отрицательными margin не прокатит.
  • 0

#15 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 16 December 2010 - 09:31

Центрирование резинового блока по горизонтали:
http://www.xiper.net...line-block.html
  • 0

robot

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


Похожие темы

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

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