Как правильно расположить этот DIV?

0

Хорошо, поэтому у меня есть DIV с идентификатором "комментарий" и еще один DIV с идентификатором "post". Оба комментария и сообщения находятся внутри другого div с именем "content". Содержимое относительно позиционируется, когда комментарии и сообщения абсолютно позиционированы, я могу позиционировать сообщение легко, но я не могу позиционировать комментарий. Проблема заключается в том, что статическая позиция комментариев по какой-то причине находится на самом верху "контента" не ниже столбца div. и еще одна проблема заключается в том, что я не могу правильно разместить нижний колонтитул. Чтобы быть ясным, вот код: http://jsfiddle.net/BWr93/

CSS:

   #header {
    width:100%;
    height:80px;
    background:#444;
    position:absolute;
    top:0%;
    left:0%;
    right:0%;
}
#logo {
    width:280px;
    height:200px;
    background:url(Logo.png);
    background-repeat:no-repeat;
    position:absolute;
    left:2%;
    top:-50px;
}
.button {
    width: 130px;
    height: 80px;
    position: absolute;
    top: 0%;
    font-family:Poiret One;
    line-height:80px;
    font-size:24px;
    color:#fff;
    -webkit-transition: all 150ms ease-in-out   ;
    -moz-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}
.button:hover {
    -webkit-transition:all 200ms ease-in-out
    ;-moz-transition:all 200ms ease-in-out;
    -ms-transition:all 200ms ease-in-out;
    -o-transition:all 200ms ease-in-out;
    transition:all 200ms ease-in-out;
    cursor:pointer;
    background: #333;
}
#container {
    top:80px;
    position:relative;
    width:100%;
    padding-bottom:110px;
    min-height:100%;
}
#post {
    width:80%;
    min-height:300px;
    position:absolute;
    top:6%;
    left:3%;
    font-size:20px;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color:#CCC;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}
#post .title {
    width:100%;
    min-height:70px;
    background:#444;
    top:0;
    left:0;
    right:0;
    font-family:Poiret One;
    line-height:70px;
    font-size:34px;
    color:#fff;
    padding-top:5px;
    padding-bottom:5px;
    -webkit-box-shadow: 0px 0px 0px 0px rgba(50, 50, 50, 0);
    -moz-box-shadow:    0px 0px 0px 0px rgba(50, 50, 50, 0);
    box-shadow:         0px 0px 0px 0px rgba(50, 50, 50, 0);

}
#post .title .date {
    width:8%;
    height:60px;
    background-color:#FFF;
    float:left;
}
#comment{
    position:absolute;
    bottom:10%;
    left:3%;
    background:#444;
    width:80%;
    height:50px;
    line-height:50px;
}
#footer {
    position:absolute;
    bottom:0;
    right:0;
    left:0;
    width:100%;
    height:60px;
    background:#444;
    line-height:60px;
    font-family:Poiret One;
    font-size:20px;
    color:#FFF;
       }

HTML:

<body>
<!--START HEADER-->
<div id="header">
<div id="logo"></div>
<div class="button" style="left:350px"><center>Home</center></div>
<div class="button" style="left:500px;"><center>For Geeks</center></div>
<div class="button" style="left:650px;"><center>Deep Stuff</center></div>
<div class="button" style="right:50px;"><center>About me</center></div>
</div>
<!--END HEADER-->
<div id="container">

<div id="post">
<div class="title"><div class="date"></div>
<div style="position:relative;left:8px;">
HeyHey Hey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey Hey Hey Hey Hey Hey Hey</div>
</div>
<div style="position:relative;left:8px;">
HeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey 
</div>
</div>
<div id="comment">Comments</div>
<!--FOOTER-->
<div id="footer"><center>All rights reserved Maroworld.com&reg;</center></div>
<!--END FOOTER-->
</div>
</body>

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

Заранее спасибо.

Теги:

2 ответа

0

http://jsfiddle.net/YeUB2/2/ Здесь я позиционировал title и comment как относительный. Это решает все ваши проблемы. Кроме того, я удалил коробку-тень на дату, потому что она не имеет никакого эффекта. Кроме того, подушки улучшены, и в комментариях теперь есть тень.

Поделиться
0

Ну, вопрос один заключается в том, что в этой строке:

    <div class="title"><div class="date"></div>

вам не хватает </div> для <div class="title"> Если вы добавите это, как в этой скрипте, вы увидите, что многие ваши проблемы решены.

До сих пор, как получить липкий колонтитул, ЭТО является хорошим местом для начала. Вы можете видеть, что ваша текущая реализация помещает нижний колонтитул относительно окна браузера.

Поделиться
  • 0
    Этот тег не пропущен, это всего лишь несколько строк спустя! Вы можете лучше понять код, нажав «Tidy Up»! Вы также можете легко увидеть в своей скрипке, что есть ошибка , потому что части вашего кода выделены красным цветом! Реальная проблема совсем в другом: позиция заголовка и комментария (см. Мой ответ для более подробной информации: stackoverflow.com/a/22590684/3393058 )

Ещё вопросы

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