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


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

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

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

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

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

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

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

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

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

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

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

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

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

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

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

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

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

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

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

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

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


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

#1 Вячеслав

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

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

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

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

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как выравнить всплывающее окно?
  2. Расположение картинок
  3. Центрирование текста на странице
  4. Проверьте код. Правильно ли центрирован google adsense
  5. Подскажите как избавиться от align='center'

#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