панель навигации снаружи div

Question

панель навигации снаружи div

0

Может ли кто-нибудь объяснить, почему панель навигации находится ниже указанного <div id="navigation > смотрящего на код ниже:

<html>
<head>
    <link rel="stylesheet" href="css.css"/>
</head>
<body>
    <div id="container">
        <div id="title">
            <h1>Record Store</h1>
        </div>
        <div id="navigation" >
            <ul class="navbar">
                <li><a href="#">Home</a></li>
                <li><a href="#">Vinyl Stock</a></li>
                <li><a href="#">Members</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

и CSS

* {
 border: 0;
 padding: 0;
}

#container {
    margin: auto;
width: 800px;
border: 1px solid black;
min-height: 600px;
z-index: -9;
}

#title {

margin:auto;
border: 1px solid black;
}

#navigation{
border: 1px solid black;
height: auto;
background-color: yellow;
}


.navbar {
}

.navbar ul {
}
.navbar li {

    float: left;
    font: bold 12px/1.2em Arial, Verdana, Helvetica;
    height: auto;
    list-style: none;
    text-align: center;
    width: 33%;
    display: inline;
}
.navbar a {
    border-right: 1px solid #1F5065;
    color: black;
    display: block;
    padding: 10px 10px;
    text-decoration: none;
}

Был бы признателен, если бы кто-нибудь мог помочь мне убрать бар. Я начинаю изучать CSS и HTML.

LeDoc 08 нояб. 2013, в 12:48

Источник

0

Вот скрипка. jsfiddle.net/Pb7Uy Теперь, какие изменения вы хотите
MarsOne 08 нояб. 2013, в 11:23
0

Почему тег <ul> содержит панель навигации под тегом <div id = "nvaigation">?
LeDoc 08 нояб. 2013, в 11:27

Теги:

html

css

1 ответ

Ещё вопросы

Вот скрипка. jsfiddle.net/Pb7Uy Теперь, какие изменения вы хотите
Почему тег <ul> содержит панель навигации под тегом <div id = "nvaigation">?

Charles Ingalls · Answer 1 · 2013-11-08T09-51-00.000Z

Поскольку вы плаваете элементы списка, не очищая их. Добавьте это в свой CSS

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

а затем добавьте класс clearfix в свой ul.navbar

        <ul class="navbar clearfix">
            <li><a href="#">Home</a></li>
            <li><a href="#">Vinyl Stock</a></li>
            <li><a href="#">Members</a></li>
        </ul>