Форум Сайтостроение Веб-строительство

как при помощи css растянуть меню

[Удален]
3628

Здравствуйте!

Подскажите пожалуйста...

Как сделать так, чтобы меню было растянуто на ширину шапки?

вот сайт http://front.pllaneta.ru/

D
На сайте с 29.06.2011
Offline
2
Diplodok
#1

В класс ul.pureCssMenum0 добавь: 


background-image: url(/wp-content/themes/detachable/images/btn3.jpg);

background-repeat: repeat-x;

width: 960px;
[Удален]
#2

Огромное спасибо, получилось. Только вот меню не по центру и рубрика "Громадьське життя життя" не растянулось.

Посоветуйте что дописать...

D
На сайте с 29.06.2011
Offline
2
Diplodok
#3

По высоте лучше будет перерисовать кнопки. Они тогда сами и растянут. Cоответственно и background тоже подправить.

Вот для примера добавь в класс a.pureCssMenui0

background-size: 150px 30px;

Это не выход, но зато видно какие кнопки нужны.

Расположение фона страницы Как правильно растянуть по Зафиксировать фоновое изображение
[Удален]
#4

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

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

D
На сайте с 29.06.2011
Offline
2
Diplodok
#5

В одну строчку перерисовываем кнопки в ширину до 130 - 140 пикселей. Потом указываем и ширину каждого блока меню по размеру кнопки. Надпись сама вытянется в строку.

Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#6

для li.pureCssMenui0 назначит ширину:

width:auto;

min-width:100px;

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

[Удален]
#7

Простите, я еще плохо разбираюсь.

1. Нарисовал кнопку 180х30 пикселей.

2. Перезалил на хостинг.

3. изменил

для li.pureCssMenui0

width:auto;

min-width:100px;

НИЧЕГО НЕ ПОМЕНЯЛОСЬ, ВОТ КОД

#Menu {

width:860px; /* ширина меню */

margin:0 auto;

}

#pcm{display:none;}

ul.pureCssMenu ul{display:none} /* прячет выпадающее меню до наведения */

ul.pureCssMenu li:hover>ul{display:block} /* отображает впадение блока при наведении */

ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}

ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;} /* выкидывает в сторону выпадающее меню 3 уровня */

ul.pureCssMenu,ul.pureCssMenu ul {

margin:0px;

list-style:none;

padding:0px 2px 2px 0px;

background-color:#lll;

background-repeat:repeat;

border-color:#808080;

border-width:1px;

border-style:solid;

}

ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {

display:table;

zoom:1;

height:21px;

float: left;

}

ul.pureCssMenu ul{

width:133.35px;/* ширина всплывающего окна */

}

ul.pureCssMenu li{

display:block;

margin:2px 0px 0px 2px;

font-size:0px;

}

ul.pureCssMenu a:active, ul.pureCssMenu a:focus {

outline-style:none;

}

ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {

display:block;

vertical-align:middle;

background-color:#000;

border-width:1px;

border-color:#FF0000;

border-style:solid;

text-align:center;

text-decoration:none;

padding:2px 5px 5px 10px;

_padding-left:0;

font:normal 11px Tahoma;

color: #fff;

text-decoration:none;

cursor:default;

}

ul.pureCssMenu span{

overflow:hidden;

}

ul.pureCssMenu li {

float:left;

}

ul.pureCssMenu ul li {

float:none;

}

ul.pureCssMenu ul a {

text-align:left;

white-space:nowrap;

}

ul.pureCssMenu li.sep{

text-align:left;

padding:0px;

line-height:0;

height:100%;

}

ul.pureCssMenu li.sep span{

float:none; padding-right:0;

width:3px;

height:100%;

display:inline-block;

background-color:#808080; background-image:none;}

ul.pureCssMenu ul li.sep span{

width:100%;

height:3px;

}

ul.pureCssMenu li:hover{

position:relative;

}

ul.pureCssMenu li:hover>a{

background-color:#DBF0F9;

border-color:#45ADE4;

border-style:solid;

font:normal 11px Tahoma;

color: #444;

text-decoration:none;

}

ul.pureCssMenu li a:hover{

position:relative;

background-color:#DBF0F9;

border-color:#45ADE4;

border-style:solid;

font:normal 11px Tahoma;

color: #444;

text-decoration:none;

}

ul.pureCssMenu li.dis a {

color: #557D4F !important;

}

ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;

height:16px;

}

ul.pureCssMenu ul img {width:16px;

height:16px;

}

ul.pureCssMenu img.over{display:none}

ul.pureCssMenu li.dis a:hover img.over{display:none !important}

ul.pureCssMenu li.dis a:hover img.def {display:inline !important}

ul.pureCssMenu li:hover > a img.def {display:none}

ul.pureCssMenu li:hover > a img.over {display:inline}

ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}

ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}

ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}

ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}

ul.pureCssMenu span{

display:block;

background-image:url(./images/arrv_white.gif);

background-position:right center;

background-repeat: no-repeat;

padding-right:9px;}

ul.pureCssMenu ul span{background-image:url(./images/arr_black.gif)}

ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white.gif);}

ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span,ul.pureCssMenu table a:hover a:hover a:hover span{background-image:url(./images/arr_white.gif)}

ul.pureCssMenu table a:hover table span,ul.pureCssMenu table a:hover a:hover table span{background-image:url(./images/arr_black.gif)}

ul.pureCssMenu li.pureCssMenui0 {

width:110px;

height:23px;

}

ul.pureCssMenu li a.pureCssMenui0{

height:100%;

background-image:url(./images/btn3.jpg);

border-width:0px;

font:normal 11px Tahoma;

color:#ccc;

}

ul.pureCssMenu li a.pureCssMenui0:hover{

background-image:url(./images/btn4.jpg);

font:normal 11px Tahoma;

color:#eee;

}

ul.pureCssMenum0 {

background-color:transparent;

border-width:0px;

padding:0px 0px 0px 0px;

background-image: url(/wp-content/themes/detachable/images/btn3.jpg);

background-repeat: repeat-x;

width:auto;

min-width:100px;

}

ul.pureCssMenum0>li>a {

padding:8px 10px 0px 10px;

}

ul.pureCssMenum0 a {

padding:8px 10px 0px 10px;

}

ul.pureCssMenum0 ul a {

padding:2px 5px 5px 10px;

}

ul.pureCssMenum0>li {

margin:0px 0px 0px 0px;

}

ul.pureCssMenum0 li {

margin:0px 0px 0px 0px;

}

ul.pureCssMenum0 li li {

margin:2px 0px 0px 2px;

}

Как при помощи css Выпадашка и ИЕ 6 Не работает меню joomla!
Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#8

для:

ul.pureCssMenum0 - width:100%

для:

ul.pureCssMenu li.pureCssMenui0 - width:auto;min-width:100px;

[Удален]
#9

Все, теперь работает! Спасибо дружище.

Единственно проблема при отображении в мазиле, черная полосочка после "Громадське життя життя" немного уже. А в Гугле все нормально. Не знаешь, случайно, как это исправить.

Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#10

У элемента ul.pureCssMenu li.pureCssMenui0 уберите высоту: height:23px; - она там не нужна.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий