1

entao pessoal, estou começando a estudar html e css, estou tentando fazer uma pagina com um menu lateral com a homescreen ao lado, porem a box da homescreen nao sobe para o lado da barra de menu, nao sei se o codigo ta errado, se alguem puder ajudar... agradeço, segue o html e css abaixo:

* {
  margin: 0;
  padding: ;
  font-family: roboto;
}
.menu {
  background-color: #052e40;
  width: 200px;
  height: 100vh;
  text-align: right;
  vertical-align: middle;
  display: table-cell;
  line-height: 50px;
  padding-right: 50px;

}
a {
  text-decoration: none;
    color: #15b6ff;
}
li {
   list-style-type: none;
}
@font-face {
    font-family: 'roboto';
    src: url('roboto.ttf');
    font-weight: normal;
    font-style: normal;
}
.menu nav ul li a:hover {
  color: white;
}
hr {
  color: #15b6ff;
}
.home {
  background-color: red;
  width: 300px;
  height: 100vh;
  float: left;
}
<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="utf-8">
		<meta name="author" content="Nil">
		<meta name="description" content="Site Simples">
		<link rel="stylesheet" href="este.css">
	</head>
	<body id="corpo">
		<!--Barra lateral/Menu-->
		<section id="Barralat">
				<div class="menu">
					<nav>
						<ul>
							<li><a href="#">Pagina Inicial</a></li>
							<hr>
							<li><a href="#">Quem Somos Nós</a></li>
							<hr>
							<li><a href="#">Cursos</a></li>
							<hr>
							<li><a href="#">Pré-Matricula</a></li>
							<hr>
							<li><a href="#">Fale Conosco</a></li>
							<hr>
						</ul>
					</nav>
				</div>
			</section>
		</section>
		<!--Final da barra lateral/menu-->
		<!--pagina inicial-->
		<section class="home">
		Pagina Inicial
		</section>
	</body>
</html>

1 Resposta 1

1

Cara o principal problema é que vc simplesmente colocou o float no elemento errado, vc tem colocar o float no primeiro elemento, assim o segundo elemento "flutua" ao lado do primeiro entende.

O problema é que ando vc coloca float em um elemento ele muda de escopo, e perde seus valores de referência no fluxo de conteúdo da página, então eu tive que fazer uns ajustes no seu código.

Veja abaixo como ficou, repare que o float:left é na barra da esquerda.

EDIT: Mudei um pouco o código devido ao comentário do autor da pergunta. Agora o Menu fica fixo a esquerda, e durando o scroll só as Sessões vão se mover a direita do Menu. Para fixar o Menu basta colocar o position:fixed assim ele não vai se mover durante o scroll. Já ppara afastar as Sessões e não deixa-las ficar por baixo do Menu basta adicionar nelas um margin-left: 250px;, onde 250px é equivalente a largura da coluna do Menu.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
    
* {
    margin: 0;
    padding: 0;
    font-family: roboto;
}

.menu {
    background-color: #052e40;
    width: 200px;
    height: 100vh;
    text-align: right;
    line-height: 50px;
    float: left;
    /* vertical-align: middle;
    display: table-cell; */
    display: flex;
    align-items: center;
    padding-left: 50px;
    position: fixed;
}

a {
    text-decoration: none;
    color: #15b6ff;
}

li {
    list-style-type: none;
}

@font-face {
    font-family: 'roboto';
    src: url('roboto.ttf');
    font-weight: normal;
    font-style: normal;
}

.menu nav ul li a:hover {
    color: white;
}

hr {
    color: #15b6ff;
}

.home {
    background-color: red;
    /* width: 300px; */
    height: 100vh;
    margin-left: 250px;
}
.home2 {
    background-color: green;
    /* width: 300px; */
    height: 100vh;
    margin-left: 250px;
}
<body id="corpo">
    <!--Barra lateral/Menu-->
    <section id="Barralat">
        <div class="menu">
            <nav>
                <ul>
                    <li><a href="#">Pagina Inicial</a></li>
                    <hr>
                    <li><a href="#">Quem Somos Nós</a></li>
                    <hr>
                    <li><a href="#">Cursos</a></li>
                    <hr>
                    <li><a href="#">Pré-Matricula</a></li>
                    <hr>
                    <li><a href="#">Fale Conosco</a></li>
                    <hr>
                </ul>
            </nav>
        </div>
    </section>
    <!--Final da barra lateral/menu-->
    <!--pagina inicial-->
    <section class="home">
        Pagina Inicial
    </section>
    <section class="home2">
        Pagina 2
    </section>
</body>

5
  • Fala irmão, sua dica funcionou, o layout ficou, em aparencia, do jeito que quero, mas ai quando fui formatar um texto na section "home", notei que que a home na verdade estava ocupando 100% ta tela por tras do menu, eu queria que ela ficasse ao lado direito do menu, pois o menu ira ficar fixo e a rolagem das sessoes sera feita ocupando apenas o restando da tela ao lado do menu. tentei colocar o width do menu em porcentagem mas desconfigura tudo. Commented 16/11/2018 às 1:23
  • se tu souber uma forma de resolver serei grato... Commented 16/11/2018 às 1:27
  • @EleniltonSilva Leia o EDIT que fiz na resposta e execute o código em página toda. Acho que agora ficou mais claro o que vc queria, deixei os detalhes de como fixar o menu e de como tirar a section de baixo do menu no EDIT da resposta.
    – hugocsl
    Commented 16/11/2018 às 10:51
  • ajudou muito, resolveu, obrigado. Commented 23/11/2018 às 0:37
  • @EleniltonSilva se resolver o problema e vc acha que a pergunta foi respondida considere marca-la como Aceita! Assim ela não fica em aberto no site como Pergunta não Resolvida. Boa sorte ai tmj
    – hugocsl
    Commented 23/11/2018 às 10:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .