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



 

Здравствуйте, гость (

| Вход | Регистрация )

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


Всем доброго здравия, всех с наступающими празднествами!
Кто подскажет, что нужно сделать, чтобы растянуть менюшку по ширине? Вот код:
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


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


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


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


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


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

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


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


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


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


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

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


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


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

Добавьте:
.menu {
position: relative;
}

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
1 Викторио_mw 1470 28.8.2018, 0:10
автор: TimurR
Открытая тема (нет новых ответов) Необходимо разрезать и установить Меню для группы ВКонтакте
2 boltuk 3417 4.12.2017, 14:44
автор: tezoro
Открытая тема (нет новых ответов) Помогите с меню - переделать в выпадающее
1 lepota 1130 4.12.2017, 13:29
автор: yury_mw
Открытая тема (нет новых ответов) Слайдер под меню
0 Olya_Poy 4650 29.11.2017, 11:09
автор: -garmoni-
Открытая тема (нет новых ответов) На разных разрешениях меню выглядит по разному
0 SPiar 4818 28.9.2017, 17:45
автор: -korotkov-


 



RSS Текстовая версия Сейчас: 26.4.2024, 9:20
Дизайн