3

Bom dia! Estou enfrentando problemas com o posicionamento de um botão em CSS.

Queria mudar cada um destes 4 botões para um lado em especifico, mas não sei como.

.button {
           background-color: #4CAF50; /* Green */
           border: none;
           color: white;
           padding: 16px 32px;
           text-align: center;
           text-decoration: none;
           display: inline-block;
           font-size: 60px;
           margin: 40px 2px;
           -webkit-transition-duration: 0.4s; /* Safari */
           transition-duration: 0.4s;
           cursor: pointer;
         }
         
         
         .button5 {
           background-color: white;
           color: black;
           border: 2px solid #555555;
         }

         #historia{
            
            
         }
         #cartazes{
            
            
         }
         #fotos{
            
            
         }
         #videos{
            
            
         }

         
         .button5:hover {
           background-color: #555555;
           color: white;
         }
     
</head>
<body>

<div id='cssmenu'>
<ul >
   
      
         </head>
         <body>
         
         
         <button onclick="location.href='http://localhost/pap/historia.html'" type="button" class="button button5" id="historia">História</button>
         <button class="button button5" id="cartazes">Cartazes</button>
         <button class="button button5" id="fotos">Fotos</button>
         <button class="button button5" id="videos">Vídeos</button>

E aqui está o código do css e hmtl dos botões.

Eu sei que tenho que criar um id para cada botão mas não sei o que escrevo em cada um...

E aqui esta o menu onde estão os botões que quero mover. inserir a descrição da imagem aqui

3
  • Qual lado especifico você que mudar? Commented 7/03/2019 às 17:45
  • Como vc gostaria de deixa-los?
    – Rafael
    Commented 7/03/2019 às 17:46
  • Sem falar o que você quer fazer só vai gerar chutes como respostas.
    – Sam
    Commented 7/03/2019 às 18:08

1 Resposta 1

3

Existem várias formas de fazer isso, a mais fácil acredito ser com position:absolute. Primeiro vc coloca o pai e todos os elementos "pai" com altura de e largura de 100% para ocupar a tela inteira, depois vc coloca o pai do position:relative e os filhos com position:absolute. Dessa forma vc pode aliar os botões um em cada canto com top, left, bottom e right

inserir a descrição da imagem aqui

Segue o código da imagem acima:

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#cssmenu {
width: 100%;
height: 100%;
}
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 60px;
  /* margin: 40px 2px; */
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  box-sizing: border-box;
}


.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

#historia{
  position: absolute;
  top: 0;
  left: 0;
}
#cartazes{
  position: absolute;
  top: 0;
  right: 0;
}
#fotos{
  position: absolute;
  bottom: 0;
  left: 0;

}
#videos{
  position: absolute;
  bottom: 0;
  right: 0;
}


.button5:hover {
  background-color: #555555;
  color: white;
}

ul {
  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  height: 100%;
}
<div id="cssmenu">
  <ul>
    <button onclick="location.href='http://localhost/pap/historia.html'" type="button" class="button button5" id="historia">História</button>
    <button class="button button5" id="cartazes">Cartazes</button>
    <button class="button button5" id="fotos">Fotos</button>
    <button class="button button5" id="videos">Vídeos</button>
  </ul>
</div>

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 .