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 Baby01
      Prezados, bom dia.
       
      Gostaria de uma ajudar, sobre um script que estou criando. 
       
      Não estou conseguindo fazer a comparação entre data e horário, tipo assim : eu quero que quando o usuário faça um agendamento ex: data 15/07/2019 horário: 10h00 ás 12h00, não pode ter outro agendamento nessa data 15/07/2019 e nem entre esse horário 10h00 às 12h00.  Mais pode ter outro agendamento nessa data 15/07/2019, mais não no mesmo horário.
      Abaixo está meu script : 
       
       
       
      <!DOCTYPE html>
      <html>
      <head>
          <title>GESTÃO DE CASOS</title>
          <meta lang="pt-br" charset="utf-8">
          <link rel="icon" type="imagem/png" href="../gestao/img/logo.png" />
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <script type="text/javascript" src="../bootstrap/sweetalert/dist/sweetalert.js"></script>
      </head>
      <body>
      <?php
      if(!isset($_SESSION)) 
          { 
              session_start(); 
          } 
              date_default_timezone_set('America/Sao_Paulo');
              header('Content-type: text/html; charset=utf-8');
              
              if (isset($_POST["submit"])) {
              $hr_agendamento = ('H:i:s');
              $now = date('Y-m-d H:i:s');
              $planoID = $_POST["planoID"];        
              $pacienteID = $_POST["pacienteID"];
              $unidadeID = $_POST["unidadeID"];
              $dt_programada = $_POST["dt_programada"];
              $hr_inicial = $_POST["hr_inicial"];
              $hr_final = $_POST["hr_final"];
              $atendimentoID = $_POST["atendimentoID"];
              }
              
              $unidade = $_SESSION['unidade_referencia'];
              
              include ("../administracao/conn.php");
              
              $agenda = "SELECT a.hr_inicial, a.hr_final, DATE_FORMAT(  `dt_programada` ,  '%d/%m/%Y' ) AS  `data_formatada` , b.unidadeID, b.unidade_referencia
                          FROM tb_agenda a
                          INNER JOIN tb_unidade b ON a.unidadeID = b.unidadeID
                          WHERE b.unidade_referencia =  $unidade";
                  
                 /* nessa parte que não estou conseguindo fazer a comparação , consigo pegar a variável que o usuário digita, porém não estou conseguindo trazer do banco de dados*/        
              IF ( (["dt_programada"] == $_POST["dt_programada"]) && (["hr_inicial"] == $_POST["hr_inicial"]) && (["hr_final"] == $_POST["hr_final"])) {
                  echo "<script>    swal('ATENÇÃO','DATA E HORÁRIO JÁ CADASTRADO', 'warning').then(function() {window.location = '../plano/escolha_paciente_plano.php';});</script>";    
                  
              }
                  ELSE
                  {
                  
              $sql = "INSERT INTO tb_agenda (planoID, pacienteID, unidadeID, dt_programada, hr_inicial, hr_final, atendimentoID) values ('$planoID','$pacienteID', '$unidadeID', '$dt_programada', '$hr_inicial', '$hr_final', '$atendimentoID')";
              
              if (mysqli_query($connect, $sql)) 
              {
                  echo "<script>swal('BOM TRABALHO!', 'AGENDA CADASTRADA COM SUCESSO!', 'success').then(function() {window.location = '../plano/escolha_paciente_plano.php';});</script>";
                  $x = 'Agenda criada com sucesso';
                  include "../administracao/agenda_log.php";
              } 
              else 
              {
                  echo "<script>swal('INFELIZMENTE', 'NÃO FOI POSSÍVEL CADASTRAR A AGENDA', 'warning').then(function() {window.location = '../plano/escolha_paciente_plano.php';});</script>" . $sql . "<br>" . mysqli_error($connect);
                  $x = 'Não foi possível criar a agenda';
                  include "../administracao/agenda_log.php";
                  
                  }
              }
              
      ?>
      </body>
      </html>
    • By Ewfc2005
      Queria saber como faço para fazer um texto aparecer ao rolar a pagina
      igual ao desse site: https://ciesalon.com/services
    • By Aureo Almeida
      Problema em definir largura e disposição horizontal de tabelas com resultado de while
      Como iniciante em programação estou tendo problemas para estilizar uma tabela dentro de um script PHP. Possuo o seguinte script:
      <?php $sql = 'SELECT * FROM psd_produtos'; $stmt = $conn->query($sql); echo '<table>'; while($row = $stmt->fetch(PDO::FETCH_OBJ)){ echo " <td> <tr><h1>$row->prd_nome <br /></h1></tr> <tr><p>$row->prd_detalhe <br /></p></tr> <tr>$row->prd_valor <br /></tr> </td> "; } echo '</table>'; ?> Ele funciona perfeitamente, buscando e produzindo um loop das informações que preciso, porém, gostaria que o resultado me retornasse em tabelas que ficasse dispostas horizontalmente lado a lado, e imaginei colocar uma classe CSS que estabelecesse a largura da tabela em 400px com um float que me permitiria alinhar o resultado em “4 colunas”. Porém, essa classe não funciona dentro do script.
      Tentei echo '<table class="tabela-produto">'; e não funciona.
      A mesma classe, que estabelece uma largura para a tabela, aplicada a uma tabela fora do script funciona e isso tirou minha dúvida se este tópico seria sobre CSS/HTML ou PHP.
      Como posso fazer para obter meu objetivo com este script, alinhando horizontalmente o resultado do while em tabelas dispostas horizontalmente em 4 colunas?
×

Important Information

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