VPF::Несколько проблем с меню - Форум программистов

s1lver

Дата 13.8.2013, 09:20 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 580
Регистрация: 14.12.2007
Где: Россия

Репутация: нет
Всего: нет

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

Запустался с позиционированием меню.

Первая проблема:
Как мне растянуть меню до края области контента?

Вторая проблема:
Не получается решить проблему с отображением меню поверх слайдера на странице

код меню

Код


header nav {
    display: block;
    padding: 0 0 0 168px;
    margin: 50px 0 0 20px;
}
header nav li {
    list-style: none;
    float: left;
    height: 42px;
    width: 135px;
    margin: 0;
    text-align: center;
    background: #171717;
    position: relative;
    padding-top: 10px;
}
header nav li ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 135px;
    height: 42px;
    display: none;
    position: absolute;
    left: 0;
    top: 45px;
}
header nav li ul li {
    float: none;
    height: 55px;
    margin: 0;
    width: 135px;
    text-align: center;
    font-size: 12px;
    background: #7F7F7F;
}
header nav li a {
    display: block;
    width: 135px;
    height: 42px;
    color: #fff;
    text-decoration: none;
}
header nav li:hover ul, header nav li.jshover ul {
    display: block;
}
header nav li:hover, header nav li.jshover {
    background: #369acc;
}

Это сообщение отредактировал(а) s1lver - 13.8.2013, 09:34

--------------------

Я собрался жить вечно - пока все идет нормально!

ksnk

Дата 13.8.2013, 10:01 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

В стародавние времена, в староглиняной местности пользовались таблицами для верстки. Меню - верхняя строка таблицы, контент - дальнейшие строки.

Более современно - обрамить меню и контент каким-то дивом и делать размер внутренних элементов 100% по его размеру.

Более просто - поставить фиксированный размер на ширину контента и таскать этот размер по меню и контенту.

Что нужно, то?

Может, стоит еще кусочек разметки предьявить, а то фантазия не настолько богата...

Это сообщение отредактировал(а) ksnk - 13.8.2013, 10:04

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

s1lver

Дата 13.8.2013, 11:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 580
Регистрация: 14.12.2007
Где: Россия

Репутация: нет
Всего: нет

Цитата(ksnk @ 13.8.2013, 10:01)

Может, стоит еще кусочек разметки предьявить, а то фантазия не настолько богата...

Код


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<header>
    <h1></h1>
     <nav>
        <ul>
            <li></li>
            <li>
                <a href="#"></a>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            </li>
            <li></li>
            <li></li>
            <li></li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            </li>
            <li></li>
        </ul>
    </nav>
</header>
<article>
    <div class="content">
     </div>
</article>
<div class="clear"></div>
<footer>
</footer>
</body>
</html>

Код разметки забыл кинуть, каюсь .
Выглядит все вот точно так, вырезал только служебные теги CMS которые выводят контент(к ним не применяются никакие стили)

Это сообщение отредактировал(а) s1lver - 13.8.2013, 11:27

--------------------

Я собрался жить вечно - пока все идет нормально!

ksnk

Дата 13.8.2013, 12:28 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

http://jsfiddle.net/9zuNA/ Это?

В некоторых случаях, когда непонятно. какого размера и содержимого будет меню, его удобнее делать таблицей. Она сама довольно разумно выстроит пункты в нужных местах, с выравниванием и отступами. Для любителей дивов, можно пользоваться комбинациями display:table-row и display:table-cell
http://jsfiddle.net/9zuNA/1/

Если обязательно пользоваться именно плавающими и все равно нужно разместить меню в одну строку не смотря на размер экрана, нужно обрамить меню элементом с overflow:hidden и указать большую ширину для самого меню.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

s1lver

Дата 13.8.2013, 12:50 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 580
Регистрация: 14.12.2007
Где: Россия

Репутация: нет
Всего: нет

Цитата

http://jsfiddle.net/9zuNA/ Это?

Да, так и выглядет.
Выпадающее меню перекрывается соседним пунктом, когда меню выстраивается друг под другом(уменьшении размера окна) smile

--------------------

Я собрался жить вечно - пока все идет нормально!

ksnk

Дата 13.8.2013, 13:42 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Цитата(s1lver @ 13.8.2013, 12:50

)

Выпадающее меню перекрывается соседним пунктом,

Проблема только в этом? z-index поможет.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

s1lver

Дата 18.8.2013, 09:54 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 580
Регистрация: 14.12.2007
Где: Россия

Репутация: нет
Всего: нет

Не выходит smile

http://jsfiddle.net/wkBZR/

если у родителя z-index:1 а у ребенка z-index:2, то получается 1.2

Ура! Допер! smile

http://jsfiddle.net/wkBZR/1/

Это сообщение отредактировал(а) s1lver - 18.8.2013, 10:04

--------------------

Я собрался жить вечно - пока все идет нормально!

ksnk

Дата 18.8.2013, 10:57 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Цитата(s1lver @ 18.8.2013, 09:54

)

Не выходит

Код


header nav li ul {
   ...
        z-index:10;

вот так не выходит?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »