Good morning guys, I'm doing a job for college where I would have to make a website with HTML / CCS + PHP. I kind of did the "skeleton" of the site, but when I went to put the content that goes inside the < body > the aside went down and I could not raise it to the original position, which would be next to the body.
Followthepictureasitis
* {
margin: 0;
padding: 0;
}
#menu-bar {
width: 99%;
margin: 0px 0px 0px 0px;
padding: 5px 8px 6px 9px;
height: 40px;
line-height: 100%;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
background: #000000;
border: groove 2px #6D6D6D;
position: relative;
z-index: 999;
}
#menu-bar li {
margin: 0px 0px 6px 0px;
padding: 2px 160px 0px 0px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bold;
font-family: arial;
font-style: normal;
font-size: 12px;
color: #E7E5E5;
text-decoration: none;
display: block;
padding: 5px 22px 7px 20px;
margin: 0;
margin-bottom: 6px;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
text-shadow: 2px 2px 3px #000000;
}
#menu-bar .active a,
#menu-bar li:hover > a {
background: #0399D4;
background: linear-gradient(top, #EBEBEB, #A1A1A1);
background: -ms-linear-gradient(top, #EBEBEB, #A1A1A1);
background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
background: -moz-linear-gradient(top, #EBEBEB, #A1A1A1);
color: #444444;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0px 2px 25px #FFFFFF;
}
#banner {
width: 100%;
border: 5px white;
height: 100px;
}
body {
background-color: silver;
}
aside {
background-color: black;
width: 200px;
height: 400px;
color: white;
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
line-height: 100%;
border: groove 2px #6D6D6D;
positon: relative;
}
#asideesquerda {
margin-top: 20px;
}
aside h4 {
color: red;
padding-left: 100px;
}
aside p {
color: silver;
margin-bottom: 450px;
}
html,
body {
height: 100%;
}
.geral {
position: relative;
}
footer {
position: absolute;
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
line-height: 100%;
border: groove 2px #6D6D6D;
width: 100%;
height: 30px;
background-color: black;
bottom: 0;
clear: both;
}
footer h1 {
clear: both;
}
.conteudo {
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
border: groove 2px #6D6D6D;
margin-top: 20px;
background-color: gray;
margin-left: 20%;
width: 50%;
height: 500px;
clear: both;
}<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Vinícius Azevedo - 31603289 / Mateus Nunes - 31657461">
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="geral">
<nav>
<?php include 'Includes/banner.php'; include 'Includes/menu.php'; ?>
</nav>
<div class="conteudo">
<main>
<h2>Bem vindo ao MackTrade!</h2>
<p>Seja bem vindo ao MackTrade, o site de comércio dos alunos do Mackenzie.</p>
<br>
<p>O nosso site visa facilitar as transações entre os nossos usuários.</p>
<br>
<p>Mas caso você encontre algum usuário infringindo alguma regra, não tenha medo de reporta-lo.</p>
<br>
<p>Portanto seja muito bem vindo. <a href="#">Login</a>
<br><a href="#">Cadastro</a>
</p>
</main>
</div>
<?php include 'Includes/asides.php'; ?>
<?php include 'Includes/footer.php'; ?>
</div>
</body>
</html>