Как мне остановить мой список, перекрывающий мое изображение заголовка?

Question

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

у меня есть строка меню (список) в правильном месте, но когда я изменяю размер, это, кажется, перекрывает мое изображение заголовка, кто-нибудь знает, как я могу остановить это?

Пример здесь: http://www.cosworth-europe.co.uk/test/indextest.html

Пожалуйста, измените размер вашего браузера.

HTML:

    <div id="top"><center><img src="images/header.png" style="max-width:100%;"></center></div>
<header id="header" class="site-header" role="banner">
<div id="header-inner" class="container sixteen columns over">
<hgroup class="one-third column alpha">

</hgroup>
    <nav id="main-nav" class="two thirds column omega">
        <ul>
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="about-us.html">About Us</a>
            </li>
            <li>
                <a href="news.html">News</a>
            </li>
            <li>
                <a href="dealers.html">Dealers</a>
            </li>
            <li>
                <a href="products.html">Products</a>
            </li>
            <li>
                <a href="http://www.cosworth-europe.co.uk/shop">Buy Online</a>
            </li>
            <li>
                <a href="contact.html">Contact</a>
            </li>
        </ul>
    </nav>

</div>

</header>

CSS:

#top {background-image: url(../images/header-gradient.gif);
 background-repeat: repeat-x; 
 max-width:100%;
 height:110px;}

#header {margin-top: -5px; margin-bottom: 30px;}
h1 a { text-indent: -9999px; }
#site-title { padding-top: 10px;}

#main-nav { 
    position:absolute;
    right:120px;
    bottom:0px; 
}

#main-nav ul, #main-nav li {display: inline; padding: 7px;}
#main-nav a {text-decoration:none; color: black;}

Answer 1

Вы должны использовать медиа-запросы, чтобы иметь дело с тем, как элементы расположены в зависимости от разных размеров. Вы используете position: absolute для # main-nav, который фиксирует панель навигации на месте, независимо от размера экрана.

Пример:

CSS:

#main-nav {
    position: absolute;
    right: 120px; /* Default */
}

@media only screen and (max-width: 700px) {
    body {  
        #main-nav {
            position: absolute;
            right: 50px; /* Will apply when the screens width is smaller than 700px */
        }
    }
}

Answer 2

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

Вероятно, я бы немного переместил изображение заголовка влево и подтолкнуло вправо - это будет работать только до определенного размера, после этого вам понадобится другой макет для панели навигации.