Submit - Envio de formulário | HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas

2
respostas

por Sérgio Pellegrini Faria

| 72.4k xp | 13 posts

Após o professor colocar o padding: 10px 20px; e width; 50%; no "form input" o submit não ocupou 50% da página como os outros inputs. Fiz junto com o vídeo e obtive o mesmo resultado. Mas ao treinar (a partir de uma página do zero) para fixar o conteúdo, ao colocar o paddding:10px 20px; e width:50%; no "form input" todos ficaram do mesmo tamanho ocupando 50% da página, inclusive o submit. Eu fiz alterando algumas coisas como plano de fundo, inverti o logo colocando o logo-branco no cabeçalho e o logo preto no rodapé. Em vez de usar "nav" usei "nav ul". visualmente ficou melhor mas não sei o que eu fiz para obter isso rsrs.

Segue o html.

<DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>barbearia do barba</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="treina.css">
    </head>
    <body>
        <header>
            <div class="caixa">
                <img src="logo-branco.png">
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <main>
            <form>
                <label for="nomesobrenome">Nome e sobrenome</label>
                <input type="text" id="nomesobrenome">

                <label for="email">E-mail</label>
                <input type="text" id="email">

                <label for="telefone">Telefone</label>
                <input type="text" id="telefone">

                <input type="submit" value="Enviar Formulário">
            </form>
        </main>

        <footer>
            <img src="logo.png">
            <p  class="copyright">©Copyright Barbearia do Barba - 2020</p>
        </footer>
    </body>
</html>

e o css.

header { background: #ccbbaa; padding: 20px 0; }

.caixa { width:940px; margin: 0 auto; position: relative; }

nav ul { position: absolute; top:120px; right: 0; }

nav li { display:inline-block; margin-left:20px; }

nav a { text-transform: uppercase; text-decoration: none; font-weight: bold; font-size: 22px; color:#000000; }

nav a:hover { color:#ffffff; text-decoration: underline; }

.produtos { width: 940px; text-align: center; margin: 20px auto; }

.produtos li { display:inline-block; width: 30%; text-align: center; padding: 30px 20px; vertical-align: top; margin: 0 1.5%; box-sizing: border-box; border:3px solid #000000; border-radius: 15px; }

.produtos li:hover { border-color: #ccbbaa; }

.produtos li:active { border-color:red; }

.produtos li:hover h2 { color:#ccbbaa; font-size: 25px; }

.produtos h2 { font-size: 22px; font-weight: bold; }

.pd { font-size: 18px; margin-top:20px; }

.pc { font-size: 22px; font-weight: bold; padding: 20px 0; }

footer { text-align:center; background:#ccbbaa; padding: 20px 0; }

.copyright { font-size: 14px; }

main { width: 940px; margin: 0 auto; }

form { margin: 40px 0; }

form label { display:block; font-size:20px; margin:0 0 10px; }

form input { display:block; margin:0 0 20px; padding:10px 20px; width:50%; } `

2 respostas

por Felipe Miranda de Moura

| 134.5k xp | 9 posts

06/08/2020

Sergio copiei seu código e coloquei aqui no navegador e deu certinho. Vou te encaminhar o css aqui. Mas não fiz nenhuma alteração no seu.

header {
  background: #ccbbaa;
  padding: 20px 0;
}

.caixa {
  width: 940px;
  margin: 0 auto;
  position: relative;
}

nav ul {
  position: absolute;
  top: 120px;
  right: 0;
}

nav li {
  display: inline-block;
  margin-left: 20px;
}

nav a {
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  font-size: 22px;
  color: #000000;
}

nav a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.produtos {
  width: 940px;
  text-align: center;
  margin: 20px auto;
}

.produtos li {
  display: inline-block;
  width: 30%;
  text-align: center;
  padding: 30px 20px;
  vertical-align: top;
  margin: 0 1.5%;
  box-sizing: border-box;
  border: 3px solid #000000;
  border-radius: 15px;
}

.produtos li:hover {
  border-color: #ccbbaa;
}

.produtos li:active {
  border-color: red;
}

.produtos li:hover h2 {
  color: #ccbbaa;
  font-size: 25px;
}

.produtos h2 {
  font-size: 22px;
  font-weight: bold;
}

.pd {
  font-size: 18px;
  margin-top: 20px;
}

.pc {
  font-size: 22px;
  font-weight: bold;
  padding: 20px 0;
}

footer {
  text-align: center;
  background: #ccbbaa;
  padding: 20px 0;
}

.copyright {
  font-size: 14px;
}

main {
  width: 940px;
  margin: 0 auto;
}

form {
  margin: 40px 0;
}

form label {
  display: block;
  font-size: 20px;
  margin: 0 0 10px;
}

form input {
  display: block;
  margin: 0 0 20px;
  padding: 10px 20px;
  width: 50%;
}

por Sérgio Pellegrini Faria

| 72.4k xp | 13 posts

06/08/2020

Eae Felipe blz. Sim o código está certo. O problema é que deu certo até demais kkkk. No vídeo o submit ficou menor que os input ou seja, o input ficou com 50% da página e o submit não. E o professor disse que isso seria resolvido no futuro. Mas fazendo aqui tudo ficou certo, ou seja, tanto o input quanto o submit ficaram com 50% da página, ficou tudo alinhado. Daí a minha dúvida. Não entendi porque o "submit" do professor não ficou alinhado e o meu ficou.