X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Растянуть горизонтальное меню на всю ширину, Что исправить/добавить в данном коде css?
pulsar21
pulsar21
Topic Starter сообщение 25.12.2013, 12:16; Ответить: pulsar21
Сообщение #1


Бывалый
****

Группа: User
Сообщений: 329
Регистрация: 4.1.2013
Из: Николаев
Поблагодарили: 130 раз
Репутация:   24  


Всем доброго здравия, всех с наступающими празднествами!
Кто подскажет, что нужно сделать, чтобы растянуть менюшку по ширине? Вот код:
ul.menu {
    margin: 0;
    padding: 0;
    display: inline-block;
    background-color: #868585;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#868585), to(#646464));
    background-image: -webkit-linear-gradient(#868585, #646464);
    background-image: -moz-linear-gradient(top, #868585, #646464);
    background-image: -ms-linear-gradient(#868585, #646464);
    background-image: -o-linear-gradient(#868585, #646464);
    background-image: linear-gradient(#868585, #646464);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#868585', endColorstr='#646464', GradientType=0);
    width: 100%;
}

ul.menu li {
    float: left;
    list-style: none;
    border-right: 1px solid #868585;
    position: relative;
}

ul.menu li a {
    color: white;
    display: block;
    font-family: Arial;
    font-size: 13px;
    padding: 8px 20px 10px;
    text-decoration: none;
    border-right: 1px solid #646464;
}

Если необходимо, дам урл пациента в ЛС.


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
zrishat
zrishat
сообщение 25.12.2013, 13:41; Ответить: zrishat
Сообщение #2


Новичок
*

Группа: User
Сообщений: 42
Регистрация: 5.8.2011
Поблагодарили: 4 раза
Репутация:   0  


высоту попробуй указать


--------------------
icq: 601355342
flash\дизайн\верстка\Создание сайтов по низкой цене
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
keikiduke
keikiduke
сообщение 25.12.2013, 14:00; Ответить: keikiduke
Сообщение #3


Новичок
*

Группа: User
Сообщений: 16
Регистрация: 11.3.2013
Поблагодарили: 4 раза
Репутация:   1  


pulsar21,
Чтобы ответить на ваш вопрос, нужен CSS для всех предков менюшки.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pulsar21
pulsar21
Topic Starter сообщение 25.12.2013, 14:05; Ответить: pulsar21
Сообщение #4


Бывалый
****

Группа: User
Сообщений: 329
Регистрация: 4.1.2013
Из: Николаев
Поблагодарили: 130 раз
Репутация:   24  


keikiduke, вот весь код меню (оно у меня в отдельном файле):
Развернуть/Свернуть

/*Горизонтальное выпадающее меню*/
ul.menu {
    margin: 0;
    padding: 0;
    display: inline-block;
    background-color: #868585;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#868585), to(#646464));
    background-image: -webkit-linear-gradient(#868585, #646464);
    background-image: -moz-linear-gradient(top, #868585, #646464);
    background-image: -ms-linear-gradient(#868585, #646464);
    background-image: -o-linear-gradient(#868585, #646464);
    background-image: linear-gradient(#868585, #646464);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#868585', endColorstr='#646464', GradientType=0);
    width: 100%;
}

ul.menu li {
    float: left;
    list-style: none;
    border-right: 1px solid #868585;
    position: relative;
}

ul.menu li a {
    color: white;
    display: block;
    font-family: Arial;
    font-size: 13px;
    padding: 8px 20px 10px;
    text-decoration: none;
    border-right: 1px solid #646464;
}

ul.menu li a:hover {
    background-color: #668B0E;
}

ul.menu li:first-child a:hover {
    border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
}
/*Выпадающее меню*/
ul.menu li ul {
    display: none;
}

ul.menu li:hover ul {
    display: block;
    position: absolute;
    top: 38px;
    background-color: #646464;
    z-index: 1000;
}

ul.menu li:hover ul li {
    float: none;
    width: 200px;
    border-right: none;
}

ul.menu li:hover ul li a {
    border-top: 1px solid #868585;
    border-right: none;
    padding: 6px 20px 8px;
}

ul.menu li:hover ul li a:hover {
    background-color: 668B0E;
    color: #fff;
}

ul.menu li:hover ul li:first-child a:hover {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}



--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
keikiduke
keikiduke
сообщение 25.12.2013, 14:08; Ответить: keikiduke
Сообщение #5


Новичок
*

Группа: User
Сообщений: 16
Регистрация: 11.3.2013
Поблагодарили: 4 раза
Репутация:   1  


pulsar21,
Повторюсь, нужен CSS для всех предков меню. Т. е. CSS для всех блоков, в которых это меню находится. Лучше скиньте адрес в ЛС.

Сообщение отредактировал keikiduke - 25.12.2013, 14:11
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pulsar21
pulsar21
Topic Starter сообщение 25.12.2013, 14:14; Ответить: pulsar21
Сообщение #6


Бывалый
****

Группа: User
Сообщений: 329
Регистрация: 4.1.2013
Из: Николаев
Поблагодарили: 130 раз
Репутация:   24  


keikiduke, там их немало и все в разных файлах. Кинул Вам ссыль на сайт в ЛС.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
keikiduke
keikiduke
сообщение 25.12.2013, 14:35; Ответить: keikiduke
Сообщение #7


Новичок
*

Группа: User
Сообщений: 16
Регистрация: 11.3.2013
Поблагодарили: 4 раза
Репутация:   1  


pulsar21,
Если не нужна поддержка IE7-, то попробуйте так:
.menu {
display: table;
}
.menu > li {
float: left; /*- уберите*/
display: table-cell;
border-right: 1px solid #868585; /*- уберите*/
border-left: 1px solid #868585;
}
.menu > li:first-child {
border-left: none;
}
.menu > li a {
text-align: center;
}

Сообщение отредактировал keikiduke - 25.12.2013, 14:43


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pulsar21
pulsar21
Topic Starter сообщение 26.12.2013, 14:30; Ответить: pulsar21
Сообщение #8


Бывалый
****

Группа: User
Сообщений: 329
Регистрация: 4.1.2013
Из: Николаев
Поблагодарили: 130 раз
Репутация:   24  


keikiduke, спасибо. На E7 плевать. Ваш вариант работает. Только в мазилле всплывающее меню появляется вверху страницы. Не знаю как победить, вернул как было. sad.gif

Сообщение отредактировал pulsar21 - 26.12.2013, 14:36


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
keikiduke
keikiduke
сообщение 26.12.2013, 16:01; Ответить: keikiduke
Сообщение #9


Новичок
*

Группа: User
Сообщений: 16
Регистрация: 11.3.2013
Поблагодарили: 4 раза
Репутация:   1  


(pulsar21 @ 26.12.2013, 13:30) *
Только в мазилле всплывающее меню появляется вверху страницы.

Добавьте:
.menu {
position: relative;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как привязать меню к кнопке <nav> ?
2 pippak 899 11.12.2017, 15:57
автор: Nell
Открытая тема (нет новых ответов) Необходимо разрезать и установить Меню для группы ВКонтакте
2 boltuk 574 4.12.2017, 14:44
автор: tezoro
Открытая тема (нет новых ответов) Помогите упростить меню сайта
8 alik2039 705 7.11.2017, 9:55
автор: alik2039
Открытая тема (нет новых ответов) Заменить в шаблоне (WP) шапку и меню
0 Infe 445 21.6.2017, 15:46
автор: Infe
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыНужно нарисовать меню
2 vitosbaltos 693 20.1.2017, 14:15
автор: Shandanakar


 



RSS Текстовая версия Сейчас: 15.12.2017, 22:11
Дизайн