Help in positioning the aside

Asked

Viewed 848 times

0

Good morning guys, I’m doing a job for college where I would have to make a site with HTML/CCS + PHP. I kind of already made the "skeleton" of the site, but when I went to put the content that goes inside the <'body> the aside went down and I couldn’t climb it to original position, which would be next to the body.

inserir a descrição da imagem aqui

Follows image of how it is

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

And the aside include code 

 <aside id="asideesquerda">
        <h4>Aside</h4>
        <p>O aside esquerdo vem aqui</p>
 </aside>
html css

1 answer

2

  • It worked, thank you very much

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.