Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Duvida sobre em qual TAG aplicar comando.

Olá, boa noite!

Estou conseguindo pegar bem a parte do HTML, também estou conseguindo lembrar de bastantes comandos embora esteja estudando a 1 semana. Mas eu sinto que estou tendo dificuldade sobre onde aplicar os comandos CSS e também quanto ao uso das

. Principal quando que exibir algo ao lado do outro. Vou exemplificar abaixo com alguns exemplos:
Nesse primeiro exemplo, eu consegui entender o raciocinio do comando CSS para conseguir exibir o meu menu de navegação de paginas no canto direito. Ou seja, consegui movimentar a informação e colocar onde eu queria.

Parte 1 HTML

    <header>
        <div class="box-cabeçalho">
        <h1><img class="logo-img" src="logo-uva.jpg"></h1>

        <div class="box-menu">
                <nav>

                    <ul>    
                        <li><a href="index.html"> Home </a></li>
                        <li><a href="index.html"> Serviços </a></li>
                    </ul>

                </nav>

        </div>

    </header>

PARTE 1 CSS

.box-cabeçalho { position: relative; height: 100px; } .box-menu { position: absolute; width: right; right: 50px; top: 30px; } nav li { display: inline; margin: 0 0 0 15px ; padding: 10px 0 5px 3px ; } nav a { text-transform: uppercase; text-align: right; }

Agora no segundo local onde queria posicionar duas entras Inputs uma ao lado da outra, simplesmente não consegui ter o mesmo raciocinio.

Se eu quisesse colocar dois inputs por ver um de cada lado na tela ?

                            <label class="conteudo">*Nome Completo:</label>
                            <Input class="input-padrao" type="text" required>

                            <label class="conteudo"> *Telefone:</label>
                            <input class="input-padrao" type="tel" placeholder="(DDD) + XXXXX-XXXX" required name="">

                            <label class="conteudo">*Email:</label>
                            <input class="input-padrao" type="email" placeholder="seuemail@dominio.com" required name="">

                            <label class="conteudo">*Data de Nascimento:</label>
                            <input class="input-padrao" type="date" required name="">
                                </div>

E no caso de uma <option> como abaixo, como faria para colocar lado a lado ? 

                                <fieldset class="conteudo-option">

                                <div class="select-lado">
                                    <legend>Qual sua identidade de gênero:</legend>
                                    <select>
                                        <option> Opção 1</option>
                                        <option> Opção 2</option>
                                        <option> Opção 3</option>
                                    </select>

                                        <legend>Qual sua orientação sexual:</legend>
                                        <select>
                                            <option> Opção 1</option>
                                            <option> Opção 2</option>
                                            <option> Opção 3</option>

                                        </select>

                                    </fieldset>

Não sei se estou usando o recurso CSS errado, mas gostaria de entender como fazer o por que a o CSS foi aplicado a TAG "X" por exemplo, queria entender o raciocinio.

6 respostas

Não entendi sua pergunta, poderia dizer exatamente o que você não esta entendo (ou o que ta dando errado), o que você quer fazer?

Olá Carlos,

Então. Vou tentar explicar.

No comando "

" eu consegui criar o codigo para mover o "menu" para o lado direito. Utilizando os comandos "" para mudar o comportamento do texto dentro do HTML.

Já com os comandos INPUT e SELECT eu não consigo mover os dados para ficarem alinhados um ao lado do outro.

Vou mostrar como esta ficando minha página.

Nas imagens abaixo eu quero que os itens marcados fiquem alinhados um ao lado do outro.

Eu queria que esses campos ficassem alinhas um ao lado do outro

Neste caso gostaria de ajustar Telefone + Email + Data de nascimento um ao lado do outro

Entende ?

Entendi, você quer colocar os campos um do lado do outro. sei como resolver, poderia mandar o codigo html e o css.

Oi Carlos, segue o código. HTML

<DOCTYPE html>

    <html lang="pt-br">

        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="style.css">
            <link rel="stylesheet" href="reset.css">
            <title>AVA1 - Formulário</title>

        </head>

        <header>

            <div class="box-cabeçalho">
            <h1><img class="logo-img" src="logo-uva.jpg"></h1>

                <div class="box-menu">
                <nav>

                        <ul>    
                            <li><a href="index.html"> Formulário </a></li>

                        </ul>

                    </nav>

                </div>

        </header>

        <body>
            <section>

                    <form>

                        <h2 class="titulo-principal"> Preencha o formulario abaixo:</h2>

                        <div class="conteudo-formulario">

                                <label class="conteudo">*Nome Completo:</label>
                                <Input class="input-padrao" type="text" required>

                                <label class="conteudo"> *Telefone:</label>
                                <input class="input-padrao" type="tel" placeholder="(DDD) + XXXXX-XXXX" required name="">

                                <label class="conteudo">*Email:</label>
                                <input class="input-padrao" type="email" placeholder="seuemail@dominio.com" required name="">

                                <label class="conteudo">*Data de Nascimento:</label>
                                <input class="input-padrao" type="date" required name="">

                                <label class="conteudo">*Endereço:</label>
                                <input class="input-padrao" type="text" required placeholder="Nome da sua rua.." name="">

                                <label class="conteudo">*CEP:</label>
                                <input class="input-padrao" type="CEP" name="" placeholder="XXXXX-XXX" required pattern="\d{5}-\d{3}"/>

                                            <legend>Tipo de Moradia:</legend>
                                            <select>
                                                <option> Casa</option>
                                                <option> Vila</option>
                                                <option> Apartamento </option>
                                                <option> Outro </option>
                                            </select>

                                <label class="conteudo">Numero</label>
                                <input class="input-padrao" type="Numero" name="">

                                <label class="conteudo">Descreve sua sugestão:</label>
                                <textarea class="input-padrao" cols="40" rows="15"></textarea>


                                <fieldset class="conteudo-option">

                                    <div class="select-lado">
                                        <legend>Qual sua identidade de gênero:</legend>
                                        <select>
                                            <option> Cisgênero</option>
                                            <option> Transgênero</option>
                                            <option> Prefiro não responder</option>
                                        </select>

                                            <legend>Qual sua orientação sexual:</legend>
                                            <select>
                                                <option> Assexual</option>
                                                <option> Bissexual</option>
                                                <option> Heterossexual</option>
                                                <option> Homossexual</option>
                                                <option> Pansexual</option>
                                                <option> Prefiro não responder</option>
                                            </select>

                                        <legend>Estado Civil:</legend>
                                        <select>
                                            <option> Solteiro(a)</option>
                                            <option> Casado(a)</option>
                                            <option> Viuvo(a)</option>
                                            <option> Outros</option>
                                        </select>
                                    </div>

                                </fieldset>

                                    <legend>*Como prefere o nosso contato?</legend>

                                    <label for="radio-email"><input type="radio" name="contato" value="email" id="radio-email">Email</label>


                                    <label for="radio-telefone"><input type="radio" name="contato" value="telefone" id="radio-telefone">Telefone</label>


                                    <label for="radio-Whatsapp" ><input type="radio" name="contato" value="Whatsapp" id="radio-Whatsapp" checked>Whatsapp</label>


                                    <label class="checkbox"><input type="checkbox" checked>Gostaria de receber novas informações por email ?</label>

                                    <label class="checkbox"><input type="checkbox" required>*Concorda com os termos de uso ? <a href="termosdeuso.html">Consulte aqui </a> </label>


                    </form>

                    <p>(*) Campos Obrigatórios.</p>

                    <div>    
                        <input type="submit" value="Enviar Formulário" class="botao">
                        <input type="reset" value="Redefinir" class="botao">
                    </div>


            </section>



        </body>

        <footer>

            <p class="texto-rodape">&copy; Copyright 2022</p>

        </footer>





    </html>

E agora o CSS, não deu pra colocar tudo em um post só.


/* Cabeçalho Pagina */

.box-cabeçalho {
    position: relative;
    height: 100px;



}

.logo-img {
    margin: 20px 0 0;
    padding-left: 50px;
}

.box-menu {
    position: absolute;
    width: right;
    right: 50px;
    top: 30px;

}

nav li {
  display: inline;
  margin: 0 0 0 15px ;
  padding: 10px 1px 5px 3px ;


}


nav a {
    text-transform: uppercase;
    text-align: right;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
    transition: all 1s;
    text-shadow: 5px 5px 15px #FFFFFF ;

}

nav a:hover{
color:     #006400;
font-size: 24px;
transition: all 1s;

}


/* Inicio CSS Formulario */

html {

    background: linear-gradient(#FFFFFF, #888888);
}

.titulo-principal {
    margin: 20px 30px 20px;
    font-size: 2em    ;
    font-weight: bold;
}

form {

margin: 30px 0;

}

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

}

.conteudo, .checkbox {
    display: block;
    font-size: 20px;

}

.input-padrao {
    display: block;
    width: 50%;
    padding: 10px 25px;
    width: 50%;
}

.conteudo-formulario {
    margin: 0 50px    ;
}

.conteudo-option legend{
    display: inline;
}

.checkbox {
margin: 20px 0;
}

.botao {
    width: 20%;
    margin: 20px 40px 50px 50px;
    padding: 15px 0;
    background: #2F4F4F;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;

}


.botao:hover {
    background: black;
    transform: scale(1.1);
}

/* Pagina de Termos */

.termo-uso {

    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-top: 30px;
    padding: 10px 0;

}


/* Rodapé Pagina */

footer {

    width: 100%;
    height: 100px;


}

.texto-rodape {
    padding: 30px;
    color: white;
    font-weight: bold;
    text-align: center;
}
solução!

Olá Gabriel, boa noite!!

*Resolução do Problema: *

De acordo com o seu relato, você que por os campos de input um ao lado do outro. Mas para fazer isso seria necessário fazer o uso de várias <div> para organizar o conteúdo e só então colocar o estilo css.

*Solução do Problema: *

Primeiro você precisar organizar o seu html para isso, vamos lá:

  1. Todo o conteúdo da página que vai ser mostrado para o usuário vai na tag <body>, pois o seu header e o footer está fora dele.

  2. Por a tag de fechamento no <div class="conteudo-formulario">, pois esta faltando.

  3. E separar os campos com <div> desse jeito:

         <form>
             <h2 class="titulo-principal"> Preencha o formulario abaixo:</h2>
    
             <div class="conteudo-formulario">
    
                 <div class="parte-1">
                     <div>
                         <label class="conteudo">*Nome Completo:</label>
                         <Input class="input-padrao" type="text" required>
                     </div>
                     <div>
                         <label class="conteudo"> *Telefone:</label>
                         <input class="input-padrao" type="tel" placeholder="(DDD) + XXXXX-XXXX" required name="">
                     </div>
                     <div>
                         <label class="conteudo">*Email:</label>
                         <input class="input-padrao" type="email" placeholder="seuemail@dominio.com" required name="">
                     </div>
                     <div>
                         <label class="conteudo">*Data de Nascimento:</label>
                         <input class="input-padrao" type="date" required name="">
                     </div>
                     <div>
                         <label class="conteudo">*Endereço:</label>
                         <input class="input-padrao" type="text" required placeholder="Nome da sua rua.." name="">
                     </div>
                     <div>
                         <label class="conteudo">*CEP:</label>
                         <input class="input-padrao" type="CEP" name="" placeholder="XXXXX-XXX" required pattern="\d{5}-\d{3}"/>
                     </div>                                                                
                 </div>
    
                 <div class="parte-2">
                     <div>
                         <legend>Tipo de Moradia:</legend>
                         <select>
                             <option> Casa</option>
                             <option> Vila</option>
                             <option> Apartamento </option>
                             <option> Outro </option>
                         </select>
                     </div>
                     <div>
                         <label class="conteudo">Numero</label>
                         <input class="input-padrao" type="Numero" name="">                        
                     </div>
                 </div>
    
                 <div class="parte-3">
                     <label class="conteudo">Descreve sua sugestão:</label>
                     <textarea class="input-padrao" cols="40" rows="15"></textarea>
                 </div>
    
                 <div class="parte-4">
                     <fieldset class="conteudo-option">    
    
                         <div class="select-lado">
                             <legend>Qual sua identidade de gênero:</legend>
                             <select>
                                 <option> Cisgênero</option>
                                 <option> Transgênero</option>
                                 <option> Prefiro não responder</option>
                             </select>
                         </div>
    
                         <div>                        
                             <legend>Qual sua orientação sexual:</legend>
                             <select>
                                 <option> Assexual</option>
                                 <option> Bissexual</option>
                                 <option> Heterossexual</option>
                                 <option> Homossexual</option>
                                 <option> Pansexual</option>
                                 <option> Prefiro não responder</option>
                             </select>
                         </div>
    
                         <div>
                             <legend>Estado Civil:</legend>
                             <select>
                                 <option> Solteiro(a)</option>
                                 <option> Casado(a)</option>
                                 <option> Viuvo(a)</option>
                                 <option> Outros</option>
                             </select>
                         </div>
                     </fieldset>
                 </div>
    
                 <div class="parte-5">
                     <legend>*Como prefere o nosso contato?</legend>
    
                     <label for="radio-email"><input type="radio" name="contato" value="email" id="radio-email">Email</label>
                     <label for="radio-telefone"><input type="radio" name="contato" value="telefone" id="radio-telefone">Telefone</label>
                     <label for="radio-Whatsapp" ><input type="radio" name="contato" value="Whatsapp" id="radio-Whatsapp" checked>Whatsapp</label>
                     <label class="checkbox"><input type="checkbox" checked>Gostaria de receber novas informações por email ?</label>
                     <label class="checkbox"><input type="checkbox" required>*Concorda com os termos de uso ? <a href="termosdeuso.html">Consulte aqui </a> </label>
                 </div>
             </div>
         </form>

Percebeu? Você precisa dividir o conteúdo para poder colocar uma parte na esquerda e a outra na direita com o css. A tag <div> serve para dividir um conteúdo em partes, mas essa divisão não tem nenhuma semântica, ou seja, essa divisão só acontece visualmente usando o css e não ocorre a divisão no html em sí.

*Conclusão: *

Agora precisa usar o css para colocar dois elementos um do lado do outro, só o html organizado não irá fazer esse papel, mas sera o estopim para esse resultado. As propriedades para fazer isso é o "display: flex", coloque essa propriedade no "pai" dos elementos que você quer que fique um do lado do outro. Por exemplo:

/* O .conteudo-option é o pai de algumas divs, e queremos elas ao lado */
form . conteudo-formulario .parte-4 .conteudo-option {
    display: flex;
}

*Despedida: *

Bons estudos!