Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Несколько проблем с меню

Автор: s1lver 13.8.2013, 09:20

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

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

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

http://www.goldencentury.org/upicture/1510143240.png

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

код меню

Код


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

Автор: ksnk 13.8.2013, 10:01

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

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

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

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

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

Автор: s1lver 13.8.2013, 11:26

Цитата(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 которые выводят контент(к ним не применяются никакие стили)

Автор: ksnk 13.8.2013, 12:28

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

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

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

Автор: s1lver 13.8.2013, 12:50

Цитата

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

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

Автор: ksnk 13.8.2013, 13:42

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

)

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

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

Автор: s1lver 18.8.2013, 09:54

Не выходит smile

http://jsfiddle.net/wkBZR/

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

Ура! Допер! smile

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

Автор: ksnk 18.8.2013, 10:57

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

)

Не выходит

Код


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

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