Ich habe mich entschieden, heute ein neues persönliches Projekt zu starten, das ein Forum ist (nur für die Praxis). Ich habe das grundlegende Layout eingerichtet und einige der PHP-Funktionen geschrieben, aber wenn ich einen neuen Beitrag hinzufüge, bewegt sich die Seitenleiste nach unten und unter den Posts.Sidebar nach unten bewegen
hier einige Bilder:
sidebar.php
<div class ="sidebar">
<div class = "col-lg-3 profile-tab sidebar-nav">
<img src="images/dummy-pic.png" alt = ""><br>
<a href = "#">USERNAME</a><br>
<span>Post count: x</span><br>
<span>Likes: x</span>
</div>
<div class="col-lg-3">
<ul class="sidebar-nav">
<h4 class = "sb-heading">Post Categories</h4>
<li><a href="#">Category Name</a>
</li>
<li><a href="#">Category Name</a>
</li>
<li><a href="#">Category Name</a>
</li>
<li><a href="#">Category Name</a>
</li>
</ul>
</div>
<div class = "col-lg-3">
<ul class="sidebar-nav">
<h4 class = "sb-heading">Announcements</h4>
<li>interesting stuff</li>
<li>interesting stuff</li>
<li>interesting stuff</li>
</ul>
</div>
Posts.php
<div class = "post col-lg-8">
<h2 class = "page-header"><?php echo $post_title; ?></h2>
<p class = "lead">By
<a href = "#"><?php echo $post_author ?></a></p>
<span class = "glyphicon glyphicon-time"><?php echo $post_date ?></span>
<img class = "img-responsive" src = "<?php echo $post_image; ?>" />
<br>
<p>
<?php
echo $post_content;
?>
</p>
<br/>
<a class = "btn btn-primary" href = "#">READ MORE</a>
</div>
<?php } ?>
relevant CSS
.sidebar-nav{
background-color: #ffffff;
margin-top: 15px;
border:2px solid #1b76bc;
border-radius: 10px;
padding: 20px 0 20px 0;
text-align: center;
}
div.post.col-lg-8{
margin-left: 20px;
}
.sidebar-nav li{
list-style: none;
}
.post{
padding:15px;
margin-top: 15px;
background-color: #ffffff;
border-radius: 10px;
border: 2px solid #1b76bc;
padding: 20px;
}
I verwendet col-lg-3 statt 4 für die Sidebar, so dass ich einen linken Rand auf den Posten hinzufügen könnte. Es gibt wahrscheinlich einen besseren Weg, aber nur einen Kopf hoch
Wenn Sie die CSS-Datei benötigen, lassen Sie es mich wissen.
Ich schätze es wirklich!
CSS würde nützlich sein. Haben Sie einen Wrapper um Sidebar.php? – Gerard
hinzugefügt die CSS. Ich habe einen Wrapper namens 'sidebar', er wurde nicht im Post angezeigt, aber ich habe ihn behoben :) – Sam
Ich denke, du solltest okay sein, wenn du hinzufügst: .sidebar {float: right;} – Gerard