Jump to content
  • 0

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


ykero
 Share

Question

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

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

4c330b66062c.jpg

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

Link to comment
Share on other sites

Recommended Posts

  • 0

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

ykero

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

Короче то же самое что и было.. Может мне тоже отдохнуть денек другой :)

Мини пример

А при чём тут вообще display: inline;, речь шла о display: inline-block; Давай переделывай живо. :)

Link to comment
Share on other sites

  • 0

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

ykero

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

Короче то же самое что и было.. Может мне тоже отдохнуть денек другой :)

Мини пример

А при чём тут вообще display: inline;, речь шла о display: inline-block; Давай переделывай живо. :)

Исправил, но видимо опять не там...

Блин, ну не понимаю логику почему меню не растягивается по ширине, хоть убейте меня!

Link to comment
Share on other sites

  • 0

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

ykero

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

Короче то же самое что и было.. Может мне тоже отдохнуть денек другой :)

Мини пример

А при чём тут вообще display: inline;, речь шла о display: inline-block; Давай переделывай живо. :)

Исправил, но видимо опять не там...

Блин, ну не понимаю логику почему меню не растягивается по ширине, хоть убейте меня!

Потому что тебе нужен дополнительный элемент в конце, который будет растягиваться на 100%

Link to comment
Share on other sites

  • 0

какой .helper? вы ту тему полностью прочли?

Вот что должно было получится у вас, если бы вы полностью прочли тот топик.

Ну если судить по факту, то вот это и есть так называемый псевдо-хелпер:

.menu:after {
display: inline-block;
vertical-align: top;
width: 100%;
font-size: 0;
line-height: 0;
overflow: hidden;
content: '\00a0';
}

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

Link to comment
Share on other sites

  • 0

Не ругайтесь, отцы! :) Когда-нибудь и я стану таким же умным как и вы)) ;)

Вопрос: а в таблице это дело не работает? Пример

Если убираю табличные теги, то нормально растягивается по ширине

таблица всегда вам поможет. Это же таблица!!))

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy