Dúvida criando "menus" em CSS

Insurgent3 · Maio 2, 2024, 12:53am

Olá,

Estou fazendo um sitezinho apenas para estudo, mas estou com problemas pra criar/alinhar o menu em “CSS”.

moldura.html:

<html>

   <head>
      <link rel="stylesheet" type="text/css" href="estilo.css">
	  </style>
   </head>

   <body>
      <div class="topo">
		 <div class="top-description"> 
		    Site 
		 </div>
		 <div class="logo-direita">
		    <img src="https://i.ibb.co/hcnbySh/kurumin-ok.png" alt="Kurumin_ok">
		 </div>
	  </div>  
	  <div class="menu-topo-horizontal">
			<div class="botoes">
		       <ul>
			      <li id="botao1">Home</li>
			      <li id="botao2">Ebooks</li>
			      <li id="botao3">Revistas</li>
			      <li id="botao4">Contato</li>
			   </ul>
			</div>
	  </div>
	  <div class="conteudo">
	     <div class="esquerda">

		 </div>
		 
		 <div class="centro"> 
				Brasil
		 </div>
		 <div class="direita">
		 
		 </div>
	  
	  </div>
   </body>
</html>

estilo.css:

html
{
   height: 1024px;
   width: 768px;
   margin: auto;
}

.topo
{
   height: 130px;
   width: 768px;
   background-color: black;
   margin: auto;
   margin-bottom: 10px;
   border-radius: 10px;
   
}

.top-description	
{
   padding: 40px;
   font-size: 30px;
   color: white;
   text-align:center;
}
.logo-direita
{
   text-align:right;
   padding-bottom: 1000px;
	margin-top:-100px;
	margin-bottom: 30px;
	margin-right: 30px;	
}
.menu-topo-horizontal
{
   height: 35px;
   width: 768px;
   background-color: black;
   margin: auto;
   list-style: none;
}

.botoes
{
	height: 35px;
	width: 25%;
}

#botao1
{
   height:35px;
   width: 25%;
   display:inline;	
   background-color:blue;
   font-size: 10px;
   color: white;	
   margin:auto;
   float: left;   
}
#botao2
{
   height:35px;
   width: 25%;
   display:inline;
   margin:auto;
   background-color:blue;
   font-size: 10px;
   color: white;
   float: left;
}
#botao3
{
   height:35px;
   width: 25%;
   display:inline;
   margin:auto;
   background-color:blue;
   font-size: 10px;
   color: white;
   float: left;
 
}
#botao4
{
   height:35px;
   width: 25%;
   display:inline;
   margin:auto;
   background-color:blue;
   font-size: 10px;
   color: white;
   float: left;

}
#botao1:hover
{
	background-color: white;
	color: black;
}
#botao2:hover
{
	background-color: white;
	color: black;
}
#botao3:hover
{
	background-color: white;
	color: black;
}
#botao4:hover
{
	background-color: white;
	color: black;
}

.conteudo
{
	height:	859px;
	width: 768px;
	background-color: gray;
	
}
.esquerda
{
   height: 859px;
   width: 192px;
   background-color: green;
   float:left;
}
.centro
{
   height: 859px;
   width: 384px;
   background-color: white	;
   float:left;
}
.direita
{
   height: 859px;
   width: 192px;
   background-color: yellow;
   float:left;	
}

hugokotsubo · Maio 2, 2024, 1:36pm

Alinhar o que, como e onde?

Palpite: se for o menu <div class="botoes"> que deve ficar centralizado, bastaria (se entendi bem) colocar margin: 0 auto; na classe .botoes.

Se não for isso, sugiro dar mais detalhes (por exemplo, colocar uma imagem de como vc gostaria que ficasse, ou uma descrição textual mesmo).

Mudando de assunto, em vez de usar div pra tudo, sugiro dar uma olhada nos elementos semânticos do HTML 5.

Hoje existem vários elementos diferentes para serem usados de acordo com a função/significado de cada parte da página (por exemplo, <header> para o cabeçalho, <nav> para menus, <article> e <section> para seções do conteúdo, etc).

Insurgent3 · Maio 2, 2024, 6:20pm

Amigo gratidão, se você soubesse o quanto tentei fazer funcionar e você identificou o meu problema rapidinho.

Veja, ficou alinhado ao centro, que é o que eu queria.

Só uma duvidazinha ainda…saberia alguém me dizer como alinhar ao centro verticalmente pois está alinhado ao topo o texto do menu.

Muito obrigado pela ajuda hugokotsubo.

Insurgent3 · Maio 2, 2024, 8:04pm

Olá, voltando aqui com uma solução. Achei um site que explica que para fazer um menu com o texto centralizado verticalmente, preciso adicionar três linhas de comandos diferentes:

3 comandos necessários:

   display: flex;
   justify-content: center;
   align-items: center;

Código da

do botão1.

#botao1
{
   height:35px;
   width: 25%;
   display:inline;	
   background-color:blue;
   font-size: 10px;
   color: white;	
   margin:auto;
   float:left;
   display: flex;
   justify-content: center;
   align-items: center;
}

Alinhamento correto e funcionando:

Muito obrigado pela ajuda!

Insurgent3 · Maio 2, 2024, 10:34pm

Pessoal, achei que estava conseguindo resolver minhas dúvidas e parcialmente consegui…porém não consigo alinhar os botões centralizados na tela.

Eu tenho uma barra de menu com “width: 768px;” e os botões com tamanho “width: 25%;”.

Consegui criar um espaçamento legal entre os itens…porém está ficando à mostra um pedaço do menu ao fundo na cor laranja…algo está se comportando errado:


<html>

   <head>
      <link rel="stylesheet" type="text/css" href="estilo.css">
	  </style>
   </head>

   <body>
      <div class="topo">
		 <div class="top-description"> 
		    Site 
		 </div>
		 <div class="logo-direita">
		    <img src="https://i.ibb.co/hcnbySh/kurumin-ok.png" alt="Kurumin_ok">
		 </div>
	  </div>  
	  <div class="menu-topo-horizontal">
			<div class="botoes">
		       <ul>
			      <li id="botao1">Home</li>
			      <li id="botao2">Ebooks</li>
			      <li id="botao3">Revistas</li>
			      <li id="botao4">Contato</li>
			   </ul>
			</div>
	  </div>
	  <div class="conteudo">
	     <div class="esquerda">

		 </div>
		 
		 <div class="centro"> 
				Brasil
		 </div>
		 <div class="direita">
		 
		 </div>
	  
	  </div>
   </body>
</html>


html
{
   height: 1024px;
   width: 768px;
   margin: auto;
}

.topo
{
   height: 130px;
   width: 768px;
   background-color: black;
   margin: auto;
   margin-bottom: 10px;
   border-radius: 10px;
   
}

.top-description	
{
   padding: 40px;
   font-size: 30px;
   color: white;
   text-align:center;
}
.logo-direita
{
   text-align:right;
   padding-bottom: 500px;
	margin-top:-100px;
	margin-bottom: 30px;
	margin-right: 30px;	
}
.menu-topo-horizontal
{
   height: 35px;
   width: 768px;
   background-color: black;
   list-style: none; 	
}

.botoes
{
   height: 35px;
   width: 768px;
   margin: 0 auto;
   background-color: orange;
}

#botao1
{
   height:35px;
   width: 25%;
   display:inline;	
   margin:auto;
   background-color:blue;
   font-size: 10px;
   color: white;	
   float: left;
   justify-content: center;
   align-items: center;
  display: flex;
  
}
#botao2
{
   height:35px;
   width: 25%;
   display:inline;
   background-color:blue;
   font-size: 10px;
   color: white;
   float: left;
   display: flex;
   justify-content: center;
   align-items: center;
}
#botao3
{
   height:35px;
   width: 25%;
   display:inline;
   margin:auto;
   background-color:blue;
   font-size: 10px;
   color: white;
   float: left;
   display: flex;
   justify-content: center;
   align-items: center;
}
#botao4
{
   height:35px;
   width: 25%;
   display:inline;
   background-color:blue;
   font-size: 10px;
   color: white;
   float: left;
   display: flex;
   justify-content: center;
   align-items: center;
}
#botao1:hover
{
	background-color: white;
	color: black;
}
#botao2:hover
{
	background-color: white;
	color: black;
}
#botao3:hover
{
	background-color: white;
	color: black;
}
#botao4:hover
{
	background-color: white;
	color: black;
}

.conteudo
{
	height:	859px;
	width: 768px;
	background-color: gray;
	
}
.esquerda
{
   height: 859px;
   width: 192px;
   background-color: green;
   float:left;
}
.centro
{
   height: 859px;
   width: 384px;
   background-color: white	;
   float:left;
}
.direita
{
   height: 859px;
   width: 192px;
   background-color: yellow;
   float:left;	
}

Tive que continuar nesse tópico por questão de continuar com problemas.

Obrigado por qualquer ajuda!

Insurgent3 · Maio 3, 2024, 2:18am

Olá, ainda não consegui resolver 100%. Estou tentando resolver meus problemas mas não está muito fácil pra mim.

Estou tentando criar um menu horizontal mas os botões não estão alinhados certinho, veja a imagem:

Código HTML:


<html>

   <head>
      <link rel="stylesheet" type="text/css" href="estilo.css">
	  </style>
   </head>

   <body>
      <div class="topo">
		 <div class="top-description"> 
		    Site 
		 </div>
		 <div class="logo-direita">
		    <img src="https://i.ibb.co/hcnbySh/kurumin-ok.png" alt="Kurumin_ok">
		 </div>
	  </div>  
	 
	  <div class="menu-topo-horizontal">
			 
			<ul>
			      <li id="botao1">Home</li>
			      <li id="botao2">Ebooks</li>
			      <li id="botao3">Revistas</li>
			      <li id="botao4">Códigos</li>
				  <li id="botao5">Contato</li>
			</ul>

	  </div>
	   
	  <div class="conteudo">
	     <div class="esquerda">

		 </div>
		 
		 <div class="centro"> 
				<br>
				Brasil
		 </div>
		 <div class="direita">
		 
		 </div>
	  
	  </div>
   </body>
</html>

Código CSS:


html
{
   height: 1024px;
   width: 768px;
   margin: auto;
}

.topo
{
   height: 130px;
   width: 768px;
   background-color: black;
   margin: auto;
   margin-bottom: 10px;
   border-radius: 10px;
   
}

.top-description	
{
   padding: 40px;
   font-size: 30px;
   color: white;
   text-align:center;
}
.logo-direita
{
    text-align:right;
    padding-bottom: 500px;
	margin-top:-100px;
	margin-bottom: 30px;
	margin-right: 30px;	
}
.menu-topo-horizontal
{
   height: 35px;
   width: 768px;
   background-color:black;
   list-style: none; 	
   margin:center;
   justify-content: center;
   align-items: center;    
   display: flex;
   margin-bottom: 10px;
   border: 30px; 
  align-items: center;
}

#botao1
{   
   height:35px;
   width:130px;
   display:inline;
   margin:auto;
   background-color:blue;
   color: white;	
   float: left;
   justify-content: center;
   align-items: center;     
   display: flex; 
}
#botao2
{
   height:35px;
   width:130px;
   display:inline;
   background-color:blue;
   color: white;
   float: left;
   display: flex;
   justify-content: center;
   align-items: center;
}
#botao3
{
   height:35px;
   width:130px;
   display:inline;
   margin:auto;
   background-color:blue;
   color: white;
   float: left;
   display: flex;
   justify-content: center;
   align-items: center;
   
}
#botao4
{
   height:35px;
   width:130px;
   display:inline;
   background-color:blue;
   color: white;
   float: left;
   display: flex;
   justify-content: center;
   align-items: center;

}
#botao5
{
   height:35px;
   width:130px;
   display:inline;
   background-color:blue;
   color: white;
   float: left;
   display: flex;
   justify-content: center;
   align-items: center;
  
}
#botao1:hover
{
	background-color: white;
	color: black;
}
#botao2:hover
{
	background-color: white;
	color: black;
}
#botao3:hover
{
	background-color: white;
	color: black;
}
#botao4:hover
{
	background-color: white;
	color: black;
}
#botao5:hover
{
	background-color: white;
	color: black;
}
.conteudo
{
	height:	859px;
	width: 768px;
	background-color: gray;
	text-align: center;
	
}
.esquerda
{
   height: 859px;
   width: 192px;
   background-color: green;
   float:left;   
}
.centro
{
   height: 859px;
   width: 384px;
   background-color: white	;
   float:left;
}
.direita
{
   height: 859px;
   width: 192px;
   background-color: yellow;
   float:left;	
}

hugokotsubo · Maio 3, 2024, 12:02pm

Já passei este link anteriormente, mas volto a insistir: em vez de um monte de div’s, tente usar os elementos semânticos do HTML 5. Leia o link para saber os benefícios diretos e indiretos.

Enfim, sobre o menu, entendo que cada item pode ser clicado e leva a outra página, certo? Então por que não trocar por links mesmo? E o menu vira um elemento nav, que é feito justamente para isso:

<nav>
  <a id="botao1" href="home.html">Home</a>
  <a id="botao2" href="ebooks.html">Ebooks</a>
  <a id="botao3" href="revistas.html">Revistas</a>
  <a id="botao4" href="codigos.html">Códigos</a>
  <a id="botao5" href="contato.html">Contato</a>
</nav>

Outro ponto é que todos os “botões” (na verdade, itens do menu, que não são botões, mas enfim) possuem a mesma estilização, então não vi motivo (até o momento) para separar tudo. Poderia ficar assim no CSS:

nav {
  height: 35px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

nav a {
  line-height: 35px; /* use o mesmo valor do height, assim o texto centraliza verticalmente */
  height: 35px;
  width: 20%; /* são 5 itens, então cada um ocupa 20%, assim eles ocuparão todo o espaço */
  background-color: blue;
  color: white;
  text-decoration: none;
  text-align: center;
}

nav a:hover {
  background-color: white;
  color: black;
}

Desta forma, já fica alinhado (segue tela no final). Usei justify-content: space-between para que os itens ocupem toda a extensão do menu. Este site tem um guia visual bem didático para entender os diferentes valores de justify-content.

Outras sugestões: mude os div’s para elementos semânticos mais adequados: o cabeçalho é um header, o conteúdo é um article e cada parte dele é uma section:

<header>
  <h1>Site</h1>
  <div class="logo-direita">
    <img src="https://i.ibb.co/hcnbySh/kurumin-ok.png" alt="Kurumin_ok">
  </div>
</header>

<nav>
  <!-- Entendo que cada item do menu é um link, que ao ser clicado leva a outra página, então por que não usar links? -->
  <a id="botao1" href="home.html">Home</a>
  <a id="botao2" href="ebooks.html">Ebooks</a>
  <a id="botao3" href="revistas.html">Revistas</a>
  <a id="botao4" href="codigos.html">Códigos</a>
  <a id="botao5" href="contato.html">Contato</a>
</nav>

<article>
  <section class="esquerda"></section>
  <section class="centro"><br>Brasil</section>
  <section class="direita"></section>
</article>

E no CSS, use o width com porcentagens, assim se vc precisar alterar o width do html, os demais já se ajustam de acordo:

html {
  height: 1024px;
  width: 768px;
  margin: auto;
}

header {
  height: 130px;
  width: 100%;
  background-color: black;
  margin: auto;
  margin-bottom: 10px;
  border-radius: 10px;
}

header h1 {
  padding: 40px;
  font-size: 30px;
  color: white;
  text-align: center;
}

.logo-direita {
  text-align: right;
  padding-bottom: 500px;
  margin-top: -120px;
  margin-bottom: 30px;
  margin-right: 30px;
}

nav {
  height: 35px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

nav a {
  line-height: 35px; /* use o mesmo valor do height, assim o texto centraliza verticalmente */
  height: 35px;
  width: 20%; /* são 5 itens, então cada um ocupa 20%, assim eles ocuparão todo o espaço */
  background-color: blue;
  color: white;
  text-decoration: none;
  text-align: center;
}

nav a:hover {
  background-color: white;
  color: black;
}

article {
  height: 859px;
  width: 100%;
  background-color: gray;
  text-align: center;
}

.esquerda {
  height: 859px;
  width: 25%;
  background-color: green;
  float: left;
}

.centro {
  height: 859px;
  width: 50%;
  background-color: white;
  float: left;
}

.direita {
  height: 859px;
  width: 25%;
  background-color: yellow;
  float: left;
}

Deixei o exemplo online aqui. E ficou assim:

Dito isso, a impressão que passa é que vc está tentando mudar as coisas aleatoriamente sem entender o que está fazendo. Sugiro então voltar alguns passos e recomeçar do básico (sem ironia): aqui tem um tutorial completo de CSS. É bastante coisa, mas se aprender bem esses fundamentos, não vai ficar mais patinando pra resolver esses problemas

Insurgent3 · Maio 4, 2024, 2:03pm

Obrigado pela ajuda. Entendo que está ajudando…mas o mais simples pra mim no momento é usar pra fazer um site simples.

E seguindo sua ajuda, consegui chegar ao que eu queria mas usando as mesmo…hehehe

Segue o código final mais simples para mim entender:


<html>

   <head>
      <link rel="stylesheet" type="text/css" href="estilo.css">
	  </style>
   </head>

   <body>
      <div class="topo">
		 <div class="top-description"> 
		    Site 
		 </div>
		 <div class="logo-direita">
		    <img src="https://i.ibb.co/hcnbySh/kurumin-ok.png" alt="Kurumin_ok">
		 </div>
	  </div>  
	 
	 
			 
			<div  class="menu">
  <!-- Entendo que cada item do menu é um link, que ao ser clicado leva a outra página, então por que não usar links? -->
  <a class="botao1" href="home.html">Home</a>
  <a class="botao2" href="ebooks.html">Ebooks</a>
  <a class="botao3" href="revistas.html">Revistas</a>
  <a class="botao4" href="codigos.html">Codigos</a>
  <a class="botao5" href="contato.html">Contato</a>
 </div>


   <div class="esquerda"></div>
   <div class="centro"> 
      <br> <center>Brasil </center>
   </div> 
   <div class="direita"></div> 
	  
   <div class="footer">
      <center>Copyright<center>
	  <br>
   </div>
   </body>
</html>

O css:


html
{
   height: 1024px;
   width: 768px;
   margin: auto;
}

.topo
{
   height: 130px;
   width: 100%;
   background-color: black;
   margin: auto;
   margin-bottom: 10px;
   border-radius: 10px;
   
}

.top-description	
{
   padding: 40px;
   font-size: 30px;
   color: white;
   text-align:center;
}
.logo-direita
{
    text-align:right;
    padding-bottom: 500px;
	margin-top:-100px;
	margin-bottom: 30px;
	margin-right: 30px;	
}


.menu {
  height: 35px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.menu .botao1 .botao2 .botao3 .botao4 .botao5
{
	height: 35px;	
	line-height: 35px;
	width: 20%;
	background-color: blue;
	color: white;
}


.botao1
{
  line-height: 35px; /* use o mesmo valor do height, assim o texto centraliza verticalmente */
  height: 35px;
  width: 20%; /* são 5 itens, então cada um ocupa 20%, assim eles ocuparão todo o espaço */
  background-color: blue;
  color: white;
  text-decoration: none;
  text-align: center;
}
.botao2
{
line-height: 35px; /* use o mesmo valor do height, assim o texto centraliza verticalmente */
  height: 35px;
  width: 20%; /* são 5 itens, então cada um ocupa 20%, assim eles ocuparão todo o espaço */
  background-color: blue;
  color: white;
  text-decoration: none;
  text-align: center;
}
.botao3
{
line-height: 35px; /* use o mesmo valor do height, assim o texto centraliza verticalmente */
  height: 35px;
  width: 20%; /* são 5 itens, então cada um ocupa 20%, assim eles ocuparão todo o espaço */
  background-color: blue;
  color: white;
  text-decoration: none;
  text-align: center;
}
.botao4
{
line-height: 35px; /* use o mesmo valor do height, assim o texto centraliza verticalmente */
  height: 35px;
  width: 20%; /* são 5 itens, então cada um ocupa 20%, assim eles ocuparão todo o espaço */
  background-color: blue;
  color: white;
  text-decoration: none;
  text-align: center;
}
.botao5
{
line-height: 35px; /* use o mesmo valor do height, assim o texto centraliza verticalmente */
  height: 35px;
  width: 20%; /* são 5 itens, então cada um ocupa 20%, assim eles ocuparão todo o espaço */
  background-color: blue;
  color: white;
  text-decoration: none;
  text-align: center;
}




.botao1:hover
{
	background-color: white;
	color: black;
}
.botao2:hover
{
	background-color: white;
	color: black;
}
.botao3:hover
{
	background-color: white;
	color: black;
}
.botao4:hover
{
	background-color: white;
	color: black;
}
.botao5:hover
{
	background-color: white;
	color: black;
}
.conteudo
{
	height:	859px;
	width: 100%;
	background-color: gray;
	text-align: center;
	
}
.esquerda
{
   height: 859px;
   width: 25%;
   background-color: green;
   float:left;   
}
.centro
{
   height: 859px;
   width: 50%;
   background-color: white	;
   float:left;
}
.direita
{
   height: 859px;
   width: 25%;
   background-color: yellow;
   float:left;	
}
.footer
{
   height: 35px;
   width: 100%;
   background-color:black;
   margin-top: 118%;
   line-height: 30px;
   color:green;
}
.footer:hover
{
   color:yellow;
}

Tudo ok! E com a ajuda de vocês aqui da comunidade.

Valeu!

Dúvida criando "menus" em CSS

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI