Witam
Stworzyłem taki oto layout strony, będąc trochę zainspirowanym jednym filmikiem z yt.
Mam 2 pytania/problemy.
1. Dlaczego strone można przesuwać w lewo/prawo.
2. Jak zrobić odstęp stopki od diva, który jest nad nią.
Jako, że raczej jestem początkującym proszę o wskazanie błędów, które być może popełniłem w kodzie.
Z góry dzięki ;)
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Sobota</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
<nav>
<h1>My page</h1>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Regulations</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="content">
<article class="topcontent">
<h2>Random text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at quam eu ipsum tincidunt consectetur. Sed viverra mi tellus. Curabitur placerat hendrerit lectus, at lacinia nulla cursus ut. Sed pellentesque lorem est, et dapibus nisl faucibus quis. Sed et nulla eu urna interdum commodo. Sed venenatis tempus dolor non blandit. Praesent eleifend id nisl at convallis. Praesent molestie venenatis massa quis ultricies.</p>
<p>Ut ut sodales nisi, ac dapibus sapien. Praesent dolor ligula, cursus at lacus id, placerat tempor mauris. Nunc diam odio, sollicitudin quis ultrices eget, dictum a sem. Donec a neque bibendum, interdum risus gravida, accumsan ligula. Nulla rhoncus sem eu augue sollicitudin, dictum vehicula velit egestas. Nulla egestas quam eget commodo maximus.</p></article>
<article class="middlecontent">
<h2>Random text</h2>
<p>Ut ac tortor id velit placerat ultrices. Aenean neque metus, faucibus eu mattis ac, faucibus eget metus. Nulla pretium mauris vel eleifend venenatis. Curabitur interdum condimentum ligula, vel facilisis sem suscipit id. Nulla pulvinar augue est, a molestie nisi ornare quis. Donec tincidunt consectetur neque, et congue ante placerat nec. Duis vitae metus vel nisl tincidunt eleifend a id est. Maecenas quis cursus odio.</p>
<p>Integer elementum, sem in vehicula scelerisque, sapien elit convallis dui, in laoreet elit sem sed sapien. Aenean facilisis velit in vehicula tincidunt. Vestibulum et metus fermentum, venenatis felis vitae, luctus risus. Donec imperdiet bibendum nunc scelerisque tincidunt. Praesent interdum nibh aliquet leo venenatis lobortis. Donec sollicitudin augue rutrum elit eleifend, id tempus est sodales.</p></article>
<article class="bottomcontent">
<h2>Random text</h2>
<p>.Curabitur libero augue, aliquam faucibus iaculis ac, facilisis et lacus. Praesent venenatis eu erat eu mollis. Nam massa elit, pharetra et nulla ac, iaculis aliquet ipsum. Proin dapibus tempor ipsum, feugiat feugiat neque maximus lacinia. Suspendisse ut orci aliquam, sodales odio eu, imperdiet dui. Vestibulum ut ipsum nec ante varius ornare non non turpis.</p>
<p>Integer elementum, sem in vehicula scelerisque, sapien elit convallis dui, in laoreet elit sem sed sapien. Aenean facilisis velit in vehicula tincidunt. Vestibulum et metus fermentum, venenatis felis vitae, luctus risus. Donec imperdiet bibendum nunc scelerisque tincidunt. Praesent interdum nibh aliquet leo venenatis lobortis. Donec sollicitudin augue rutrum elit eleifend, id tempus est sodales.</p></article>
</div>
<aside class="topsidebar">
<h2>Top sidebar v2</h2>
<p>Praesent dolor ligula, cursus at lacus id, placerat tempor mauris.</p>
</aside>
<aside class="middlesidebar">
<h2>Top sidebar v2</h2>
<p>Nulla pretium mauris vel eleifend venenatis. Curabitur interdum condimentum ligula..</p>
</aside>
<aside class="middlesidebar2">
<h2>Top sidebar v2</h2>
<p> Mauris tortor elit, varius sed pharetra eget, porttitor non quam..</p>
</aside>
<aside class="bottomsidebar">
<h2>Bottom sidebar v2</h2>
<p>Sed viverra mi tellus. Curabitur placerat hendrerit lectus, at lacinia nulla cursus ut.</p>
</aside>
</div>
<footer>
<p>Copyright © 2017 <a href="#">Macode.com</a></p>
</footer>
</body>
</html>
body
{
background-color: #C4C4C4;
margin: 0;
}
header
{
width: 100%;
background-color: #A8A8A8;
padding: 15px 15px 0 15px;
display: inline-block;
}
header h1
{
margin: 0 auto;
float: left;
/*display: inline;*/
}
header nav
{
border-radius: 5px;
}
header nav ul
{
margin: 0;
/*display: inline;*/
float: left;
border-radius: 5px;
}
header nav ul li
{
list-style: none;
/*display: inline-block; */
float: left;
background-color: #616161;
color: #fff;
padding: 10px 0;
border-radius: 5px;
}
nav ul li a
{
text-decoration: none;
color: #fff;
padding: 11px ;
}
nav .active a:link, nav .activ a:visited,
nav .active a:hover
{
background-color: #000 ;
border-radius: 5px;
color: #fff;
}
nav a:hover
{
background-color: #fff;
color: #616161;
border-radius: 5px;
}
.wrapper
{
width: 70%;
margin: 0 auto;
}
.content
{
margin-top: 50px;
border-radius: 5px;
width: 70%;
float: left;
}
.topcontent
{
background-color: #fff;
padding: 3% 4%;
border-radius: 5px;
}
.middlecontent
{
background-color: #fff;
padding: 3% 4%;
border-radius: 5px;
margin-top: 10px;
}
.bottomcontent
{
background-color: #fff;
padding: 3% 4%;
border-radius: 5px;
margin-top: 10px;
}
.topsidebar
{
width: 24%;
background-color: #fff;
border-radius: 5px;
float: left;
margin-top: 50px;
margin-left: 2%;
padding: 0 2%;
}
.middlesidebar
{
width: 24%;
background-color: #fff;
border-radius: 5px;
float: left;
margin-top: 10px;
margin-left: 2%;
padding: 0 2%;
}
.middlesidebar2
{
width: 24%;
background-color: #fff;
border-radius: 5px;
float: left;
margin-top: 10px;
margin-left: 2%;
padding: 0 2%;
}
.bottomsidebar
{
width: 24%;
background-color: #fff;
border-radius: 5px;
float: left;
margin-top: 10px;
margin-left: 2%;
padding: 0 2%;
}
footer
{
background: #fff;
text-align: center;
clear: both;
border-radius: 5px;
margin-top: 15px;
}
a
{
text-decoration: none;
color: #000;
}
a:hover
{
background-color: #FF7B1C;
color: #fff;
}
