Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;
} float: auto;
margin-top: 0px;
margin-right: 0px;
background-color: green;
width: 203px;
height: 53px;
font-family: sans-serif;
}
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;
} 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;
} width: 203px;
margin-top: -53px;
margin-left: 375px;
background-color: green;
width: 203px;
height: 53px;
font-family: sans-serif;
}
Ficou assim:
Esqueci de mencionar que o site buga todo quando esta em resolução menor.
@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/
@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.
@Madk
Não existe o valor auto para a propriedade float.
Declare: float: right;