Доброго времени суток! Заготовил заранее стили для сайта:
<div class="wrapper">
<nav>
<div class = "logo"></div>
<ul>
<li><a href = "login.html">Войти</a></li>
<li><a href = "index.html#aboutme">Обо мне</a></li>
<li><a href = "blog.html">Блог</a></li>
<li><a href = "index.html#getintouch">Обратная связь</a></li>
</ul>
</nav>
<main>
<h1>Привет! Добро пожаловать в мой Блог!</h1>
<?php
require_once ('main_blog.php');
while ($note = mysqli_fetch_array($select_note))
{
?>
<div class = "information">
<!--<p>Кат: <a href = "#">Кино, Знаменитости</a></p>
<p><a href = "#" class = "likes">136 Нравится</a></p>-->
<?php require_once('count_comments.php') ?>
<p><a href = "#" class = "comments"><?php echo $allcomments_num;?> Комментарий</a></p>
</div>
<div class = "post">
<div class = "date"><?php $note['created'] = date("d M"); echo $note['created'];?></div>
<h2><?php echo $note['title'];?></h2>
<p><?php echo $note['article']; ?></p>
<?php
}
?>
<a href = "#">Читать дальше</a>
</div>
</main>
Вот CSS:
.wrapper main {
padding: 50px 110px;
background: #fff;
color: #323232;
height: 710px; /*Временный параметр*/
}
.wrapper main h1 {
color: #323232;
font-size: 1.1em;
text-align: center;
margin-bottom: 60px;
}
.wrapper main .date {
position: absolute;
top: 110px;
left: 90px;
color: #2eb398;
font-size: 1.3em;
font-weight: bold;
border: 3px solid #2eb398;
border-radius: 50%;
padding: 35px 10px;
}
.wrapper main .information {
padding: 0 20px;
margin-bottom: 20px;
margin-left: 76px;
border-bottom: 1px solid #2eb398;
}
.wrapper main .information p,
.wrapper main .information a {
display: inline-block;
margin-bottom: 5px;
color: #323232;
font-size: 0.95em;
margin-right: 5px;
}
.wrapper main .information a {
text-decoration: none;
border-right: 2px solid #2eb398;
padding-right: 10px;
}
.wrapper main .information a:hover {
color: #2eb398;
}
/*.wrapper main .information .likes,
.wrapper main .information .comments {
background: url(../images/spritecomlikes.png) no-repeat -10px -40px;
}*/
.wrapper main .information .comments {
background: url(../images/spritecomlikes.png) no-repeat -10px -6px;
padding-right: 0;
margin-right: 0;
border-right: 0;
padding-left: 25px;
}
.wrapper main .post {
margin-left: 85px;
margin-bottom: 20px;
padding-bottom: 50px;
border-bottom: 2px dashed #2eb398;
}
.wrapper main .post h2,
.wrapper main .post p {
color: #323232;
margin-bottom: 20px;
font-size: 1em;
}
.wrapper main .post h2 {
font-size: 1.5em;
font-weight: bold;
}
.wrapper main .post p {
line-height: 1.5em;
margin-bottom: 25px;
}
.wrapper main .post a {
text-decoration: none;
color: #fff;
background: #2eb398;
padding: 7.5px;
border-radius: 10px;
font-size: 0.85em;
}
Так вот, первый пост отображается как надо, а вот следующие идут вкривь вкось. Я как понял, это зависит от места, куда вставляю PHP код. Как правильно все это сделать, чтобы стили не сбивались?
Простой
