@Lostmain

Рушатся стили CSS при добавлении содержимого базы с помощью PHP, в чем ошибка?

Доброго времени суток! Заготовил заранее стили для сайта:

<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 код. Как правильно все это сделать, чтобы стили не сбивались?

a0a3775218ad414a92bd3fe600d097f4.png
  • Вопрос задан
  • 270 просмотров
Решения вопроса 1
@sunrails
У вас закрывающий тег для <div class = "post"> стоит не там где нужно.

<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>

            <a href = "#">Читать дальше</a>
        </div>
        <?php
        }
        ?>
    </main>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы