2

Tenho um menu feito com CSS que possui um certo espaçamento do cabeçalho conforme pode ser visto abaixo: inserir a descrição da imagem aqui

Porém, quando abro no celular, os mesmos se alinham de uma forma que acabam ficando em cima do cabeçalho:

inserir a descrição da imagem aqui

E sem "Expremo" a pagina um pouco mais, muito dos botões acabam ficando inacessíveis: inserir a descrição da imagem aqui

O ultimo exemplo acaba sendo meio impossível de acontecer, mas mesmo assim gostaria de saber uma forma de "obrigar" as Divs a manterem a distancia do cabeçalho, igual a distancia da primeira imagem, independente do tamanho da tela.

Segue o HTML e CSS do cabeçalho e do menu (Rodando a o código abaixo, pela a área de exibição ser pequena esse erro está ocorrendo ali também):

/*Cabeçalho*/
#menu ul {
    padding:5px;
    margin:0px;  
    background-color: rgb(7, 58, 121);      
    list-style: none;
    width:99.85%;
    height: 50px ;
    position: relative;
}
    #menu ul li { display: inline; }
        
    #menu ul li a {
    font-family: arial;
    font-size: 12px;
    padding: 2px 10px;
    display: inline-block;   
    background-color: rgb(7, 58, 121);;
    color: white;
    text-decoration: none;
    border-bottom:3px solid rgb(7, 58, 121);
    transition: background-color 0.5s , color 0.5s , border-bottom 0.5s; 
    transition-timing-function: ease-out;
}
      #menu ul li a:hover {
    background-color: white;
    color: rgb(7, 58, 121);
    border-bottom:5px solid white;
}

h6 {   
   font-family: verdana;
    font-weight: bold;
   color: white;
   float: right;
   }

   a { color: inherit; }  
   
   /*Botoes abaixo da cabeçalho*/
   
   .container {
position: relative;
top: 20%;
left: 45%;
transform: translate(-50%, -50%);
}
.container div {
  display: inline-flex;
  width: 100px;
  height: 100px;
  background-color: rgb(7, 58, 121);
  margin: 0;
  padding: 0;
  transition: all .5s ease-in-out;
  position: relative;
  z-index: 0;
  color: white;
  text-decoration: none;
}
.container div:hover {
  background-color: white;
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(0,0,0,.5);
  position: relative;
  z-index: 2;
  cursor: pointer;
  color: rgb(7, 58, 121);
  text-decoration: none;
}
<nav id="menu">                      
    <ul>
        <h6>RB, sair</h6>
        <li><a href="index.php">Inicio</a></li>
    </ul>
</nav>

<br><br><br><br>
<center>
<div class="container">
  <div><center>Cadastro de clientes<br></center></div>
  <div><center>&nbsp&nbsp&nbsp&nbsp&nbsp&nbspContas a <br>&nbsp&nbsp&nbsp&nbsppagar<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</center></div>
  <div><center>Contas a receber<br></center></div>
  <div><center>&nbsp&nbsp&nbsp&nbsp&nbsp&nbspAgenda<br><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</center></div>
  <div><center>Orçamentos e cadastros<br></center></div>
  <div><center>&nbsp&nbsp&nbsp&nbsp&nbspRelatorios<br><br>&nbsp&nbsp&nbsp&nbsp&nbsp</center></div>
</div>
</center>

1 Resposta 1

2

Remova as propriedades top, left e transform da classe .container e adicione um margin-top para dar espaçamento do nav. Não use <br> seguidos para isso.

/*Cabeçalho*/
#menu ul {
    padding:5px;
    margin:0px;  
    background-color: rgb(7, 58, 121);      
    list-style: none;
    width:99.85%;
    height: 50px ;
    position: relative;
}
    #menu ul li { display: inline; }
        
    #menu ul li a {
    font-family: arial;
    font-size: 12px;
    padding: 2px 10px;
    display: inline-block;   
    background-color: rgb(7, 58, 121);;
    color: white;
    text-decoration: none;
    border-bottom:3px solid rgb(7, 58, 121);
    transition: background-color 0.5s , color 0.5s , border-bottom 0.5s; 
    transition-timing-function: ease-out;
}
      #menu ul li a:hover {
    background-color: white;
    color: rgb(7, 58, 121);
    border-bottom:5px solid white;
}

h6 {   
   font-family: verdana;
    font-weight: bold;
   color: white;
   float: right;
   }

   a { color: inherit; }  
   
   /*Botoes abaixo da cabeçalho*/
   
   .container {
position: relative;
margin-top: 20px;
/* top: 20%;
left: 45%;
transform: translate(-50%, -50%); */
}
.container div {
  display: inline-flex;
  width: 100px;
  height: 100px;
  background-color: rgb(7, 58, 121);
  margin: 0;
  padding: 0;
  transition: all .5s ease-in-out;
  position: relative;
  z-index: 0;
  color: white;
  text-decoration: none;
}
.container div:hover {
  background-color: white;
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(0,0,0,.5);
  position: relative;
  z-index: 2;
  cursor: pointer;
  color: rgb(7, 58, 121);
  text-decoration: none;
}
<nav id="menu">                      
    <ul>
        <h6>RB, sair</h6>
        <li><a href="index.php">Inicio</a></li>
    </ul>
</nav>

<center>
<div class="container">
  <div><center>Cadastro de clientes<br></center></div>
  <div><center>&nbsp&nbsp&nbsp&nbsp&nbsp&nbspContas a <br>&nbsp&nbsp&nbsp&nbsppagar<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</center></div>
  <div><center>Contas a receber<br></center></div>
  <div><center>&nbsp&nbsp&nbsp&nbsp&nbsp&nbspAgenda<br><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</center></div>
  <div><center>Orçamentos e cadastros<br></center></div>
  <div><center>&nbsp&nbsp&nbsp&nbsp&nbspRelatorios<br><br>&nbsp&nbsp&nbsp&nbsp&nbsp</center></div>
</div>
</center>

Use propriedades como text-align: center para centralizar os textos, não use <center>. Também não vi utilidade nesses vários &nbsp.

1
  • Obrigado, entendi a ideia :D Valeu msm Commented 12/09/2018 às 14:21

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 .