Ссылки за пределами Навбара в разных разрешениях

Question

Ссылки за пределами Навбара в разных разрешениях

0

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

HTML

<!Doctype html>
<html lang="en">
<head>
    <title>Template Two</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="javascript.js"></script>
    <link rel="stylesheet" href="visual.css">
</head>
<body>
    <div id="container">
        <div id="header">
        </div>
        <div id="navigation">
            <ul id="navGroup">
                <li class="navList"><a href="" id="home">Home</a></li>
                <li class="navList"><a href="" id="products">Products</a></li>
                <li class="navList"><a href="" id="about">About</a></li>
                <li class="navList"><a href="" id="contact">Contact</a></li>
            </ul>
        </div>
        <div id="center">
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>





#container{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:800px;
    margin:0 auto;
    background-color:#cc9752;
    float:left;
    background: -moz-linear-gradient(#cc9752,#291f00);
}

#header{
    position:relative;
    top:1%;
    width:98%;
    height:20%;
    margin:0 auto;
    background-color:#0f3b5f;
    box-shadow: 0px 0px 40px 10px;
}

#navigation{
    position:relative;
    top:1%;
    width:98%;
    height:10%;
    margin:0 auto;
    background-color:#e5dbcf;
    box-shadow:10px 10px 20px;
    border-top: 4px ridge #0f3b5f;
    overflow:none;
    white-space:nowrap;
}
#navGroup{
    position:relative;
    left:0%;
    top:10%;
}
.navList{
    position:relative;
    list-style-type:none;
    display:inline;
    }

#home,#products,#about,#contact{
   color:brown;
   text-decoration:none;
   border-right:1px solid grey;
   position:relative;
   padding:5px 5px 5px 5px;
}

#contact{
    position:relative;
    left:60%;
}
#about{
    position:relative;
    left:40%;
}
#products{
    position:relative;
    left:20%;
}
#home{
    position:relative;
    left:5%;
}
#center{}
#footer{}

user3048661 29 нояб. 2013, в 09:50

Источник

2

Можете ли вы создать jsFiddle.net ?
BrownEyes 29 нояб. 2013, в 08:47
0

Было бы здорово получить скрипту или какой-нибудь html-код, потому что только с css будет сложно ответить.
web-tiki 29 нояб. 2013, в 09:45

Теги:

html

css

1 ответ

Ещё вопросы

Было бы здорово получить скрипту или какой-нибудь html-код, потому что только с css будет сложно ответить.

Scott · Answer 1 · 2013-11-29T07-19-00.000Z

Возможно, при использовании 50% -ной ширины или высоты для элемента HTML это означает, что 50% его родителей имеют ширину или высоту, попробуйте установить ширину или высоту для родительских элементов.