Jump to content
Madk

Button fora de posicao

Recommended Posts

Bom, estou tentando por a TAG button do "PEDIR"  logo abaixo do PREÇO, mas ele nao esta ficando como se estivesse dentro da div onde o botei, so e movido por fora.

Ele nao esta ficando em cima da Imagem. A div tem o tamanho e largura os mesmos que a Imagem, ja usei o float, botei a margin-top etc.. (esses margins 0, botei para testar, ver se ficaria no topo da imagem).

Como posso deixar ele em baixo do preço. 

<div id="pizza1">
<a href="#"><img src="images/piz1.png"/></a>
<button>PEDIR</button>
</div>
#pizza1 {
	height: 268px;
	width: 578px;
	background-color: white;
	margin-left:35px;

}
#pizza1 button{
    float: auto;
    margin-top: 0px;
    margin-right: 0px;
    background-color: green;
    width: 203px;
    height: 53px;
    font-family: sans-serif;

}

 

button.png

Share this post


Link to post
Share on other sites

Eu consegui fazer mas foi dessa forma  abaixo, tive que usar valor negativo no margin-top para o button ficar dentro da class e em cima da imagem, parece uma gambiarra  rsrsrs.

<div class="conteudo">
<div class="pizza1">
<a href="#"><img src="images/piz1.png"/></a>
<a href="#"><button>PEDIR</button></a>
</div>
<div class="pizza2">
<a href="#"><img src="images/piz2.png"/></a>
<a href="#"><button>PEDIR</button></a>
</div>
</div>
.conteudo {
    display: table;
}

.pizza1 {
    display: table-cell;
	height: 268px;
	width: 578px;
	background-color: white;
	margin-left:35px;
    float: left;

}
.pizza1 button{
    margin-top: -53px;
    margin-left: 375px;
    background-color: green;
    width: 203px;
    height: 53px;
    font-family: sans-serif;

}

.pizza2 {	
  height: 268px;
  width: 578px;
  display: table-cell;
  margin-left: 100px;
  float: left;
}
.pizza2 button{
    width: 203px;
    margin-top: -53px;
    margin-left: 375px;
    background-color: green;
    width: 203px;
    height: 53px;
    font-family: sans-serif;
}

Ficou assim:

TESTB.jpg

Share this post


Link to post
Share on other sites

@Madk Um dica que dou não só a você, mas a qualquer pessoa que vá fazer um layout, é não enxergar a página com ela é visivelmente, e sim um aglomerado de blocos, que esses mesmos blocos podem ser divididos em outros blocos e assim sucessivamente.

 

No mais simples, antes de você ver uma imagem, um button aqui ou ali numa página tente ver ela como um todo, sem o visual, e sim como ela é dividida. Na real seria como ver a página como uma página de história em quadrinho onde cada quadro compõe o conteúdo onde está e todos quadros juntos formam a página.

 

Um jeito fácil de entender como isso é na real, use a ferramenta de inspeção do navegador (Ctrl + Shift + I), note como o navegador interpreta dos elementos... todos como blocos dentro de outro bloco etc... e não como o conteúdo visível aos seus olhos...

 

Tendo isso em mente, e com nem que seja um pouquinho de conhecimentos das propriedades usadas no css, qualquer um pode posicionar elementos com a maior facilidade.

 

Fiz um exemplo com layout responsivo baseado no que você apresentou, só não coloquei as imagens porque eu não tenho elas né. Mas terá que adapta-las conforme a necessidade.

Exemplo online aqui: https://jsfiddle.net/

 

  • Gostei 1

Share this post


Link to post
Share on other sites

@Madk

Uma maneira consistente de posicionar o botão sobre a imagem é usar position: absolute;
Para não desconfigurar use técnicas de design responsivo.
Estude a solução que criei em https://jsfiddle.net/maujor/e9kx6svc/ . Redimensione a janela do navegador e observe.

Adapte para suas dimensões. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By PedroHRLeite
      Estou querendo deixar um rodapé fixo no topo a medida que o mesmo alcança o topo da página, porém estou encontrando dificuldades ao utilizar position: sticky, segue o código completo, se eu colocar a configuração de sticky na classe .side-column funciona bem, porém quero apenas no footer, alguém saber como resolver?
      <!DOCTYPE html> <html> <head> <style> .wideBody .side-column { float: right; order: 2; width: 300px; } .wideBody .side-column footer { position: sticky; position: -webkit-sticky; top: 0; } .wideBody .main-column { align-self: flex-start; float: left; width: 500px; border: 2px solid #4CAF50; } .resultados { border: 2px solid #4CAF50; margin-bottom:25px; position:relative; } footer { border: 2px solid #4CAF50; } </style> </head> <body class="wideBody"> <main> <div> <div class="main-column"> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> </div> <aside class="side-column"> coluna auxiliar <div class="resultados"> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> </div> <footer> rodape fixo </footer> </aside> </div> </main> </body> </html>  
    • By Juan Carlos PT
      Olá, eu quero poder pegar um vídeo do meu canal na Nimo TV e deixar ele em sites parceiros para fortalecer a minha divulgação. Só que não consigo capturar o código <video></video> do html5 do site na Nimo TV. Eles não mostram o formato do vídeo:
       

      Se alguém souber me ajudar, terei enorme gratidão!
       
      OBS: Perdão se alguém postou algo parecido aqui no site, não vi!

    • By Roberto S. Santos
      Bom dia.
      Eu gostaria de postar uma foto do meu computador no facebok usando VB.NET com login automático.
      Teria como fazer em VB.net ou HTML ?
      Obrigado.
    • By Carlos Longo
      Srs Bom dia,
       
      fiz inumeras tentativas para mostrar a imagem com link em:
       <script type="text/javascript"> var imagens =  new Array( '1.jpg', '2.jpg', '3.jpg','4.jpg', '5.jpg', '6.jpg'); var num_img = 6; var img_atual =0; function ChangeImg() { if (img_atual < (num_img - 1) ) { img_atual = img_atual + 1; } else { img_atual = 0; } document["img_apoio"].src = "http://www.ficasimples.com.br/calcfal/prop/" + imagens[img_atual]; var x = setTimeout ("ChangeImg()", 2000); }   </script>  
      ela posteriormente é chamada assim:
      queria que ao clicar na figura fosse chamado o link da figura especifica conforme valor da variavel  imagens[img_atual]/////
      <img name="img_apoio" src="http://www.ficasimples.com.br/calcfal/prop/1.jpg" alt="" border="0"width="190px" height="210px" align="center">  
       
      poderiam me ajudar??
       
      grato
       
      Carlos
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.