-1
Ich versuche, 9gag Titelseite nur für die Praxis zu replizieren. Und ich kann nicht verstehen, warum meine Sidebar ganz unten ist. Ich bin mir sicher, dass es eine einfache Antwort geben muss, aber ich kann es einfach nicht herausfinden.Warum ist meine Seitenleiste ganz unten?
body {
margin: 0;
padding: 0;
font-family: sans-serif, serif;
}
nav {
background: #000;
}
.logo {
margin-left: 5px;
float: left;
height: 50px;
}
.logo img {
max-height: 46px;
width: auto;
margin-right: 10px;
margin-top: 2px;
cursor: pointer;
}
ul {
height: 50px;
list-style: none;
display: inline-block;
margin: 0px;
margin-left: -40px;
}
ul li {
display: inline-block;
}
ul li a {
display: block;
box-sizing: border-box;
line-height: 50px;
color: #FFF;
text-decoration: none;
}
.BigNav {
font-size: 14px;
font-weight: bold;
}
.BigNav a:hover {
color: #FFF;
background: #333;
}
.BigNav a {
border-right: 1px solid #333;
padding: 0 10px;
}
.SmallNav {
margin-left: -30px;
font-size: 14px;
}
.SmallNav a {
color: #999;
padding: 0 5px;
}
.SmallNav a:hover {
color: #FFF;
}
.notification {
float: right;
height: 50px;
}
.notification img {
max-height: 30px;
width: auto;
margin-right: 12px;
margin-top: 10px;
cursor: pointer;
}
.search {
float: right;
height: 50px;
}
.search img {
max-height: 24px;
width: auto;
margin-right: 12px;
margin-top: 13px;
cursor: pointer;
}
.profile {
float: right;
height: 50px;
vertical-align: middle;
}
.profile img {
max-height: 46px;
width: auto;
margin-right: 10px;
margin-top: 3px;
cursor: pointer;
}
.upload {
color: #FFF;
float: right;
background: #0099FF;
padding: 0 5px;
cursor: pointer;
font-weight: bold;
}
.upload:hover {
background: #13AAFF;
}
.wrapper {
width: 66%;
margin: 0 auto;
clear: both;
}
.post {
width: 66%;
float: left;
}
.post img {
width: 550px;
height: auto;
}
.aside {
width: 300px;
float: left;
}
.aside img {
width: 300px;
height: auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>9 GAG</title>
</head>
<body>
<header>
<nav>
<div class="logo">
<img src="logo.png">
</div>
<!--Menu-->
<ul class="BigNav">
<li><a href="#">Hot</a></li>
<li><a href="#">Trending</a></li>
<li><a href="#">Fresh</a></li>
<li><a href="#">Sections▾</a></li>
</ul>
<ul class="SmallNav">
<li><a href="#">Video</a></li>
<li><a href="#">Cosplay</a></li>
<li><a href="#">Girl</a></li>
<li><a href="#">Comic</a></li>
<li><a href="#">NSFW</a></li>
<li><a href="#">GIF</a></li>
<li><a href="#">WTF</a></li>
<li><a href="#">Geeky</a></li>
<li><a href="#">ʕ •ᴥ• ʔ</a></li>
<li><a href="#">Anime & Manga</a></li>
</ul>
<!--Right side icons-->
<div class="upload">
<p> + Upload </p>
</div>
<div class="profile">
<img src="person-flat.png">
</div>
<div class="notification">
<img src="not.png">
</div>
<div class="search">
<img src="search.png">
</div>
</nav>
</header>
<!--Content area-->
<div class="wrapper">
<div class="post">
<h3>I know I'm a douche for wearing sunglasses at night but...</h3>
<img src="http://img-9gag-fun.9cache.com/photo/a77Pzr2_700b.jpg">
</div>
<div class="post">
<h3>I know I'm a douche for wearing sunglasses at night but...</h3>
<img src="http://img-9gag-fun.9cache.com/photo/a77Pzr2_700b.jpg">
</div>
<div class="post">
<h3>I know I'm a douche for wearing sunglasses at night but...</h3>
<img src="http://img-9gag-fun.9cache.com/photo/a77Pzr2_700b.jpg">
</div>
<div class="post">
<h3>I know I'm a douche for wearing sunglasses at night but...</h3>
<img src="http://img-9gag-fun.9cache.com/photo/a77Pzr2_700b.jpg">
</div>
<div class="aside">
<img src="http://img-9gag-fun.9cache.com/photo/ao9dLpe_700b_v1.jpg">
<h4>Comment your country's favourite hangover food!</h4>
</div>
<div class="aside">
<img src="http://img-9gag-fun.9cache.com/photo/ao9dLpe_700b_v1.jpg">
<h4>Comment your country's favourite hangover food!</h4>
</div>
<div class="aside">
<img src="http://img-9gag-fun.9cache.com/photo/ao9dLpe_700b_v1.jpg">
<h4>Comment your country's favourite hangover food!</h4>
</div>
</div>
</body>
</html>Also ja, ich brauche etwas Text zu addieren, weil es zu viel Code. Danke Jungs im Voraus.
In Zukunft bitte nur den entsprechenden Code einfügen. – CZorio