Центрирование блока меню

ykero · June 6, 2011

Доброго времени суток!

Подскажите, пожалуйста, как сделать данное меню по центру или растянуть по ширине ячейки.

<link rel="stylesheet" type="text/css" href="../CSS/cssmenustyles.css">
<table width="850" border="0" align="center">
  <tr align="center">
    <td align="center"><ul id="cssmenu">
        <li><a href="#">Текст1</a>
  </li>
        <li><a href="#">Текст2</a>
        </li>
        <li><a href="#">Текст3</a>
        </li>
<li><a href="#">Текст4</a>
                <ul>
                        <li><a href="#">Текст5</a></li>
                        <li><a href="#">Текст6</a></li>
                        <li><a href="#">Текст7</a></li>
                </ul>
                <li><a href="#">Текст8</a>
                <ul>
                        <li><a href="#">Текст9</a></li>
                        <li><a href="#">Текст10</a></li>
                        <li><a href="#">Текст11</a></li>
                        <li><a href="#">Текст12</a></li>
                </ul>
        </li>
        <li><a href="#">Текст13</a>
        </li>
        <li><a href="#">Текст14</a>
        </li>
</ul></td>
  </tr>
</table>

@charset "utf-8";
/* CSS Document */

ul#cssmenu {
	width: 850px; /* ширина всего блока меню */
	margin: 0px auto;
	border: 0 none;
	padding: 0;
  	list-style: none;
	background: #5875A1;
  	height: 30px;
	font: bold 12px/28px Verdana, Arial;
	border-left:#5875A1 1px solid;
}

ul#cssmenu li {
	margin: 0;
	border: 0 none;
	padding: 0;
	float: left;
	display: inline; /* ? */
	list-style: none;
	position: relative;
	height: 30px;
}

ul#cssmenu ul {
	margin: 0;
	border: 0 none;
	padding: 0;
	width: 160px;
	list-style: none;
	display: none;
	position: absolute;
	top: 30px;
	left: 0;
}

ul#cssmenu ul:after {
	clear: both;
	display: block;
	font: 1px/0px serif;
	content: ".";
	height: 0;
	visibility: hidden;
}

ul#cssmenu ul li {
	width: 190px; /* ширина выпадающей части */
	float: left;
	display: block !important;
	display: inline;
}

/* Main Menu */
ul#cssmenu a {
	border: 0px;
	padding: 0 10px;
	float: none !important;
	float: left;
	display: block;
	background: #5875A1;
	color: #FFFFFF;
	font: bold 12px/28px Verdana, Arial;
	text-decoration: none;
	height: auto !important;
	height: 1%;
}

/* Main Menu Hover */
ul#cssmenu a:hover,
ul#cssmenu li:hover a,
ul#cssmenu li.iehover a {
	background: #FFFFFF;
	color:#5875A1;
	border-top:#5875A1 1px solid;
}

/* Second Menu */
ul#cssmenu li:hover li a,
ul#cssmenu li.iehover li a {
	border-top: 2px solid #FFFFFF;
	float: none;
	background: #5875A1;
	color: #FFFFFF;
}

/* Second Menu Hover */
ul#cssmenu li:hover li a:hover,
ul#cssmenu li:hover li:hover a,
ul#cssmenu li.iehover li a:hover,
ul#cssmenu li.iehover li.iehover a {
	border-top: 2px solid #FFFFFF;
	background: #FFFFFF;
	color:#5875A1;
	border:#5875A1 1px solid;
}

ul#cssmenu ul ul {
	display: none;
	position: absolute;
	top: 0;
	left: 170px;
}

ul#cssmenu li:hover ul ul,
ul#cssmenu li.iehover ul ul {
	display: none;
}

ul#cssmenu li:hover ul,
ul#cssmenu ul li:hover ul,
ul#cssmenu li.iehover ul,
ul#cssmenu ul li.iehover ul {
	display: block;
}

psywalker · June 6, 2011

Что значит растянуть по ширине и сделать по середине? Покажи конечный скрин.

Softlink · June 6, 2011

я так понял, что надо его в центре застолбить. Т.е. чтобы все пункты были в центре.

Мне кажется все дело вот здесь:

ul#cssmenu {
        width: 850px; /* ширина всего блока меню */
        margin: 0px auto;
        border: 0 none;
        padding: 0;
        list-style: none;
        background: #5875A1;
        height: 30px;
        font: bold 12px/28px Verdana, Arial;
        border-left:#5875A1 1px solid;
}

ul#cssmenu li {
        margin: 0;
        border: 0 none;
        padding: 0;
        float: left;
        display: inline; /* ? */
        list-style: none;
        position: relative;
        height: 30px;
}

т.е. примерно так. Убрать ширину у таблицы, меню завернуть в див и ему выставить


width: 850px;
margin: 0px auto;

вместо float для пунктов использовать display:inline

Edited June 6, 2011 by Softlink

ykero · June 6, 2011

Что значит растянуть по ширине и сделать по середине? Покажи конечный скрин.

Или так или растянуть по ширине, чтобы справа и слева было прижато к краям.

psywalker · June 6, 2011

Что значит растянуть по ширине и сделать по середине? Покажи конечный скрин.
Или так или растянуть по ширине, чтобы справа и слева было прижато к краям.

Давай "или так". Тебе нужно inline-block; и text-align: center; у родителя.

Softlink · June 6, 2011

у меня вот что получилось. Ссылка

ykero · June 6, 2011

Softlink

Спасибо! То что нужно!

А как бы еще вот так сделать?

(немножко криво нарисовал, простите, но думаю смысл понятен)

Softlink · June 6, 2011

Softlink
Спасибо! То что нужно!
А как бы еще вот так сделать?
(немножко криво нарисовал, простите, но думаю смысл понятен)

на здоровье!

По второму.

Я бы решил это заданием ширины для пункта в процентах.

Т.е. примерно так:

ul#cssmenu li {
        margin: 0;
        border: 0 none;
        padding: 0;
        display: inline-block; 
        list-style: none;
        position: relative;
        height: 30px;
		width:13%;
}

в зависимости от кол-ва выбирайте размер каждого. Меню поправил с учетом второго вопроса. Посмотреть можно по той же ссылке.

Edited June 6, 2011 by Softlink

psywalker · June 6, 2011

Softlink

1. Почему не сделал для ИЕ своё решение несколькими постами выше?

2.

По второму.
Я бы решил это заданием ширины для пункта в процентах.
Т.е.
примерно так:

Нет, неверный подход к делу, такое решается другими способами совершенно. Вот таким например http://forum.htmlbook.ru/index.php?showtopic=20735

czp · June 6, 2011

это то что и я хотел походу сделать, ТС уточни плиз, тебе нало что бы БЛОК был по средине экрана(ну типа с отступами п окраям), и при этом принимал максимальную ширину??

Softlink · June 6, 2011

Softlink
1. Почему не сделал для ИЕ своё решение несколькими постами выше?
2.
По второму.
Я бы решил это заданием ширины для пункта в процентах.
Т.е.
примерно так:
Нет, неверный подход к делу, такое решается другими способами совершенно. Вот таким например http://forum.htmlbook.ru/index.php?showtopic=20735

1) не понял о чем ты

2) видел этот приемчик, ага, но позабыл про него.

Даже не то что забыл. А хотел попробовать на какой-нибудь своей верстке. Когда в коде нормально ориентируешься. А здесь уже сверстанное меню.

3) а почему проценты не подходят?)) Все везде корректно работает. По мере добавления\убавления пунктов пропорционально меняем ширину.

Edited June 6, 2011 by Softlink

psywalker · June 6, 2011

Softlink
1. Почему не сделал для ИЕ своё решение несколькими постами выше?
2.
По второму.
Я бы решил это заданием ширины для пункта в процентах.
Т.е.
примерно так:
Нет, неверный подход к делу, такое решается другими способами совершенно. Вот таким например http://forum.htmlbook.ru/index.php?showtopic=20735
1) не понял о чем ты
2) видел этот приемчик, ага, но позабыл про него.
3) а почему проценты не подходят?)) Все везде корректно работает. По мере добавления\убавления пунктов пропорционально меняем ширину.

1) В ИЕ6-7 твоё решение НЕ пашет.

2) Нельзя забывать такие вещи.

3) Потому что пункты могут убавляться и прибавляться, а меню должно всегда растягиваться по ширине + заметь, как выглядят первый и последние пункты. По картинке сразу видна задача и пути её решения, проценты туда точно не входят.

Softlink · June 6, 2011

Softlink
1. Почему не сделал для ИЕ своё решение несколькими постами выше?
2.
По второму.
Я бы решил это заданием ширины для пункта в процентах.
Т.е.
примерно так:
Нет, неверный подход к делу, такое решается другими способами совершенно. Вот таким например http://forum.htmlbook.ru/index.php?showtopic=20735
1) не понял о чем ты
2) видел этот приемчик, ага, но позабыл про него.
3) а почему проценты не подходят?)) Все везде корректно работает. По мере добавления\убавления пунктов пропорционально меняем ширину.
1) В ИЕ6-7 твоё решение НЕ пашет.
2) Нельзя забывать такие вещи.
3) Потому что пункты могут убавляться и прибавляться, а меню должно всегда растягиваться по ширине + заметь, как выглядят первый и последние пункты. По картинке сразу видна задача и пути её решения, проценты туда точно не входят.

не пашет именно растяжение меню? Так-то оно должно центрироваться, я правильно понял?

И меню по-моему не должно растягиваться по ширине, там же стоит фикс на 850px

Edited June 6, 2011 by Softlink

psywalker · June 6, 2011

Softlink
1. Почему не сделал для ИЕ своё решение несколькими постами выше?
2.
По второму.
Я бы решил это заданием ширины для пункта в процентах.
Т.е.
примерно так:
Нет, неверный подход к делу, такое решается другими способами совершенно. Вот таким например http://forum.htmlbook.ru/index.php?showtopic=20735
1) не понял о чем ты
2) видел этот приемчик, ага, но позабыл про него.
3) а почему проценты не подходят?)) Все везде корректно работает. По мере добавления\убавления пунктов пропорционально меняем ширину.
1) В ИЕ6-7 твоё решение НЕ пашет.
2) Нельзя забывать такие вещи.
3) Потому что пункты могут убавляться и прибавляться, а меню должно всегда растягиваться по ширине + заметь, как выглядят первый и последние пункты. По картинке сразу видна задача и пути её решения, проценты туда точно не входят.
не пашет именно растяжение меню? Так-то оно должно центрироваться, я правильно понял?
И меню по-моему не должно растягиваться по ширине, там же стоит фикс на 850px

1. Открой ИЕ6-7 и сравни.

2. Фикс, не фикс, это неважно.

Softlink · June 6, 2011

1. Открой ИЕ6-7 и сравни.

у меня его нету, я с ними поругался.

Но сейчас посмотрю где-нибудь.

psywalker · June 6, 2011

1. Открой ИЕ6-7 и сравни.
у меня его нету, я с ними поругался.
Но сейчас посмотрю где-нибудь.

Установи ИЕ тестер.

ykero · June 6, 2011

Мда, в IE6 и IE7 некорректно отображается, сразу не посмотрел..

Я так понимаю должен подойти 4 метод отсюда?

Попробовал к своему коду применить данный способ, но выпадающее меню стало вообще отдельно показываться в левом верхнем меню.

Помогите до ума довести, эти блоки уже 2 недели снятся!

Edited June 6, 2011 by ykero

psywalker · June 6, 2011

Мда, в IE6 и IE7 некорректно отображается, сразу не посмотрел..
Я так понимаю должен подойти 4 метод отсюда?
Попробовал к своему коду применить данный способ, но выпадающее меню стало вообще отдельно показываться в левом верхнем меню.
Помогите до ума довести, эти блоки уже 2 недели снятся!

Да нет, забудь про этот вариант по ссылке. Я тебе привёл ссылку выше, сделай по ней.

Softlink · June 6, 2011

Мда, в IE6 и IE7 некорректно отображается, сразу не посмотрел..
Я так понимаю должен подойти 4 метод отсюда?
Попробовал к своему коду применить данный способ, но выпадающее меню стало вообще отдельно показываться в левом верхнем меню.
Помогите до ума довести, эти блоки уже 2 недели снятся!
Да нет, забудь про этот вариант по ссылке. Я тебе привёл ссылку выше, сделай по ней.

Слушай, ну тогда я наверное туплю. Увидел, что показывается неверно в ие 6-7.

Однако вот в этом проекте у меня такая же конструкция работает.

Можешь как-нибудь коротко, на пальцах, объяснить почему там работает, а здесь нет? Пожалуйста

У меня там правда ссылки еще выстроены в инлайн, но если убрать список, то все становится в столбик. В общем линию строит именно список с инлайном.

psywalker · June 6, 2011

Мда, в IE6 и IE7 некорректно отображается, сразу не посмотрел..
Я так понимаю должен подойти 4 метод отсюда?
Попробовал к своему коду применить данный способ, но выпадающее меню стало вообще отдельно показываться в левом верхнем меню.
Помогите до ума довести, эти блоки уже 2 недели снятся!
Да нет, забудь про этот вариант по ссылке. Я тебе привёл ссылку выше, сделай по ней.
Слушай, ну тогда я наверное туплю. Увидел, что показывается неверно в ие 6-7.
Однако вот в этом проекте у меня такая же конструкция работает.
Можешь как-нибудь коротко, на пальцах, объяснить почему там работает, а здесь нет? Пожалуйста
У меня там правда ссылки еще выстроены в инлайн, но если убрать список, то все становится в столбик. В общем линию строит именно список с инлайном.

Где именно конструкция, покажи на скрине.

Softlink · June 6, 2011

Мда, в IE6 и IE7 некорректно отображается, сразу не посмотрел..
Я так понимаю должен подойти 4 метод отсюда?
Попробовал к своему коду применить данный способ, но выпадающее меню стало вообще отдельно показываться в левом верхнем меню.
Помогите до ума довести, эти блоки уже 2 недели снятся!
Да нет, забудь про этот вариант по ссылке. Я тебе привёл ссылку выше, сделай по ней.
Слушай, ну тогда я наверное туплю. Увидел, что показывается неверно в ие 6-7.
Однако вот в этом проекте у меня такая же конструкция работает.
Можешь как-нибудь коротко, на пальцах, объяснить почему там работает, а здесь нет? Пожалуйста
У меня там правда ссылки еще выстроены в инлайн, но если убрать список, то все становится в столбик. В общем линию строит именно список с инлайном.
Где именно конструкция, покажи на скрине.

psywalker · June 6, 2011

Но там совсем иная ситуация ведь. LI сделаны просто инлайнами. В чём вопрос?

Softlink · June 6, 2011

Но там совсем иная ситуация ведь. LI сделаны просто инлайнами. В чём вопрос?

сегодня мне этого не суждено, видимо, понять. Попробую завтра посидеть подумать.

Просто в этой менюшке если поставить просто инлайн, то они встают в столбик.

В общем я запутался. Ладно, утро вечера мудренее. Главное вектор задан, спасибо)

psywalker · June 6, 2011

Но там совсем иная ситуация ведь. LI сделаны просто инлайнами. В чём вопрос?
сегодня мне этого не суждено, видимо, понять. Попробую завтра посидеть подумать.
Просто в этой менюшке если поставить просто инлайн, то они встают в столбик.
В общем я запутался. Ладно, утро вечера мудренее. Главное вектор задан, спасибо)

Да, отдохни пожалуй)

ykero · June 6, 2011

В общем я запутался.

Аналогично

Да нет, забудь про этот вариант по ссылке. Я тебе привёл ссылку выше, сделай по ней.

psywalker

По данному способу у меня почему-то вообще получается вертикальное меню.

Короче я в своем коде уже запутался :dash:

psywalker · June 6, 2011

Вот вы оба даёте ребята

ykero

Сделай мини пример, чисто меню и выложи ссылку посмотреть.

Sign In

Центрирование блока меню

Question

Link to comment

Share on other sites

36 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information