позиционирование элементов div через положение относительно

0

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

Снимок экрана:

Изображение 174551

Вот код моего index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/layout.css">
    <link rel="stylesheet" type="text/css" href="/nav.css">
    <meta name="description" content="Website template 1">
    <meta name="keywords" content="template">
    <meta name="author" content="">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="MainContainer">
        <div id="HeaderContainer">
            <div id="NavigatieContainer">
                <ul id="nav">
                <!-- LVL 1 -->
                    <li>
                        <a href="Index.html">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="BodyContainer">
            <p>test</p>
        </div>
    </div>
</body>
</html>

И вот код моего макета css:

/*Basic tags*/
body {
    background-color: #efebdf;
}

/*DIV ID's*/
div#MainContainer {
    width: 60%;
    margin-left:auto;
    margin-right:auto;
}

div#HeaderContainer {
    position: relative;
}

div#NavigatieContainer {
    float: right;
}

div#BodyContainer {
    position: relative;
    background-color: brown;
}

и код моего навигационного css до сих пор, хотя я не думаю, что проблема здесь:

a {
  color:#333333;
}
#nav {
  /*-webkit-box-shadow:rgba(0, 0, 0, 0.4) 0 1px 3px;*/
  border-radius: 0.3em;
  position: relative;
  z-index: 5;
}
#nav li {
  margin-right: 10px; /*spacing tussen de list items*/
  float:left;/*zorgt voor naast elkaar te plaatsen*/
  list-style:none;/*Haalt list bolletjes weg*/
  position:relative;
  border-radius: 0.3em;
  background-color: #e2e0d3;
}
#nav a {
  color:black;
  display:block;
  font-weight:bold;
  margin:0;
  padding:8px 20px;
  text-decoration: none;
}
  • 0
    Он немного опустил его, но только до верхней части заголовка, поэтому он все еще перекрывается.
Теги:
css-position

3 ответа

1
Лучший ответ

@Adrift почти понял это, но он упомянул не тот div. Свойство переполнения должно быть в HeaderContainer.

div#HeaderContainer {
    position: relative;
    overflow: auto;
}

Я создал jsfiddle для вас с результатом. Возможно, вы захотите добавить его к следующим вопросам, поскольку это позволяет нам легче обнаружить проблему.

http://jsfiddle.net/7Kx9g/

Немного больше справочной информации; как только изображение плавает, оно больше не находится в документе и поэтому не сохраняет его собственную высоту. Для предотвращения этого может использоваться трюк, называемый clearfix, но это расширенный способ использования overflow: auto; или overflow: hidden;

Поделиться
  • 0
    Спасибо, это исправлено полностью. И я создам учетную запись и буду использовать ее, я впервые слышу о jsfiddle, но буду использовать ее в будущем. Я оценю ваш ответ, как только истечет время.
  • 0
    Есть еще кое-что, чего я не понимаю. Даже если я сделал навигацию с плавающей точкой, она все еще находится в контейнере заголовка, а я не с плавающей точкой?
Показать ещё 2 комментария
0

Проблема вызвана поплавком. Поясните clear:both; в css для div#BodyContainer.

Смотри сюда. http://jsfiddle.net/aKy67/

Всего согласен @HC_

Поделиться
0

Вы знаете, как использовать встроенный блок? IMO, гораздо проще организовать вещи с display:inline-block; чем использовать float s, потому что float заставляет игнорировать несколько правил CSS, и чем крупнее ваш проект, тем труднее это "игнорирование правил" имеет ПОТЕНЦИАЛ.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню