Как правильно расположить этот DIV?
Итак, у меня есть 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®</center></div>
<!--END FOOTER-->
</div>
</body>
Когда вы это увидите, вы поймете все, я просто хочу, чтобы нижний колонтитул был внизу, независимо от того, как расширяется содержимое страницы, и комментария под разделом сообщения.
Заранее спасибо.
2 ответа
Ну, проблема первая в том, что в этой строке:
<div class="title"><div class="date"></div>
вам не хватает </div> тег для <div class="title"> Если вы добавите это, как в этой скрипке, вы увидите, что многие ваши проблемы были решены.
Так как получить липкий нижний колонтитул, это хорошее место для начала. Вы можете видеть, что ваша текущая реализация размещает нижний колонтитул относительно окна браузера.
http://jsfiddle.net/YeUB2/2/ Здесь я разместил title а также comment как относительный Это решает все ваши проблемы. Кроме того, я удалил тень блока на дату, потому что это не имеет никакого эффекта. Также улучшены отступы, и комментарии теперь также имеют тень.