6

Olá queria ter um botão de voltar e outro para ir para a análise, quando vou ver ao site eles aparecem sempre em um a baixo e outro em cima.

O meu código é:

 <a href="guardadorrebanhos.html">
      <p align="center"><input type="button" name="botao-voltar" value="Voltar">
 </a>

 <a href="guardadorrebanhos.html">
      <p align="center"><input type="button" name="botao-analise" value="Análise">
 </a>

E eu não como meter lado a lado.

5
  • Ok eu já percebi o que tinha errado. Tinha no primeiro botão começar o paragrafo e acabar no segundo. Commented 2/03/2015 às 9:42
  • 1
    Remova a tag <p> pois ela quebra em parágrafos, ou use css para formatar a largura do parágrafo, mas não é o ideal. Pode trocar o input por button. Commented 2/03/2015 às 9:47
  • E onde entra o PHP na história?
    – gmsantos
    Commented 2/03/2015 às 11:26
  • @Catarina Silvestre, você já resolveu o problema?
    – Lucas
    Commented 2/03/2015 às 11:28
  • @Lucas sim já consegui. Obrigado na mesma. Commented 2/03/2015 às 17:43

3 Respostas 3

5

Tens alguns problemas com o teu código atual:

Elementos dentro da tag de link:

O elemento <button/> não pode estar dentro do elemento <a/> pelo que pode ser lido na documentação em: HTML5 Spec Document from W3C:

Content model: Transparent, but there must be no interactive content descendant.

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

Que traduzido:

Modelo de conteúdo: transparente, mas não deve haver conteúdos interactivos descendente.

O elemento pode ser envolvido em torno de parágrafos inteiros, listas, tabelas, e assim por diante, até mesmo seções inteiras, desde que não exista conteúdo interativo dentro do mesmo (por exemplo, botões ou outros links).

Fecho das tags

Os elementos <p/> não estão fechados, motivo pelo qual o teu código não gera o HTML da forma pretendida.

Solução

Podes colocar ambas as hiperligações dentro de um paragrafo e formatar com CSS para obteres o aspeto desejado:

a{
    display:inline-block;
    text-decoration:none;
    padding:6px 4px;
    border:1px solid #ccc;
    background-color:#f2f2f2;
    color:#333;
    font:15px arial, sans-serif;
}
a:hover{
    border-color:#aaa;
}
<p>
    <a href="guardadorrebanhos.html">
        voltar
    </a>
    <a href="guardadorrebanhos.html">
        análise
    </a>
</p>

3

Não se aplica uma tag <input> dentro de uma tag <a> e nesse caso só é necessário por os botões em uma tabela:

<table border="1">
   <tr>
     <td>
        <input type="button" name="botao-voltar" value="Voltar">
     </td>
     <td>
       <input type="button" name="botao-analise" value="Análise">
     </td>
   </tr>
  </table>
2
  • 3
    quem votou contra, dê uma dica melhor, tbm quero aprender.. eu faria assim
    – Tomaz Neto
    Commented 2/03/2015 às 13:38
  • 2
    Uma dica(não fui eu que votei), use o conceito tableless. Use tabela para apenas dados.
    – fsi
    Commented 2/03/2015 às 14:29
0

Utilize o bootstrap

Basta adicionar seu css e as respectivas classes nos seus componentes.

<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  </head>
  <body>
    <a class="btn btn-primary" href="guardadorrebanhos.html">Voltar</a>
    <a class="btn btn-primary" href="guardadorrebanhos.html">Análise</a>  
  </body>
</html>

Live demo

2
  • Acredito que não seja a melhor opção adicionar + de 100kb de CSS só para resolver esse problema
    – Lucas
    Commented 2/03/2015 às 17:05
  • O bootstrap tem inúmeras funcionalidades que podem ser utilizadas em todo o seu web site, caso queira somente o botão como no caso do exemplo acima, pode customizar somente para o que precisa. Incluindo somente o componente do botão terá apenas 12Kb a mais. Customizar meu bootstrap
    – Daniel
    Commented 3/03/2015 às 13:48

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 .