Skip to main content
formatação
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Não estou conseguindo posicionar meu

 

<p> left e minha right<img> right, e ainda pra piorar a primeira labellabel do meu form sobe acima do meu headerheader, como faço pra posicionar ?

body{
 font-family:'Helvetica Neue', 'Helvetica', 'Arial';
 background-image: linear-gradient(#74b49b, #a7d7c5);
 color: #f4f9f4;
}
#rodape{
    position: static;
    display: block;
    margin-top: 15px;
    text-align: center;
    bottom: 0;
}
#topo{
    display: flex;
    float: right;
    margin-top: 3%;
    margin-bottom: 3%; 
}
#logotop{
    max-width: 350px; 
    max-height: 120px;
    width: auto;
    height: auto;
    float: right;
}
h3{
    margin-top: 30px;

}
#description{
    color: white;
    font-weight: bold;
}

#developed{
    font-weight: none;
    color: grey;
}

.error{
    color:red
}

.form-group{
    display:block;
    margin-bottom:1rem;
    width:100%
}
.form-group input,.form-group textarea,.form-group button{
    display:block;
    width:100%;
    margin:.25rem 0;
    padding:.7rem .95rem;
    border:none;
    border-radius:.2rem;
    font-size:16px;
    outline:none;
    transition:all linear 200ms;
}
.form-group textarea{
    resize:vertical;
    height:180px
}
.form-group label{
    display:block;
    margin-bottom:.5rem;
}
.form-group button{
    margin-top: 30px;
    background-color: rgb(0,107,62)!important;
    color: white!important;
}

} #rodape{ position: static; display: block; margin-top: 15px; text-align: center; bottom: 0; } #topo{ display: flex; float: right; margin-top: 3%; margin-bottom: 3%; } #logotop{ max-width: 350px; max-height: 120px; width: auto; height: auto; float: right; } h3{ margin-top: 30px;

} #description{ color: white; font-weight: bold; }

#developed{ font-weight: none; color: grey; }

.error{ color:red }

.form-group{ display:block; margin-bottom:1rem; width:100% } .form-group input,.form-group textarea,.form-group button{ display:block; width:100%; margin:.25rem 0; padding:.7rem .95rem; border:none; border-radius:.2rem; font-size:16px; outline:none; transition:all linear 200ms; } .form-group textarea{ resize:vertical; height:180px } .form-group label{ display:block; margin-bottom:.5rem; } .form-group button{ margin-top: 30px; background-color: rgb(0,107,62)!important; color: white!important; }

Não estou conseguindo posicionar meu

 

left e minha right, e ainda pra piorar a primeira label do meu form sobe acima do meu header, como faço pra posicionar ?

body{
 font-family:'Helvetica Neue', 'Helvetica', 'Arial';
 background-image: linear-gradient(#74b49b, #a7d7c5);
 color: #f4f9f4;

} #rodape{ position: static; display: block; margin-top: 15px; text-align: center; bottom: 0; } #topo{ display: flex; float: right; margin-top: 3%; margin-bottom: 3%; } #logotop{ max-width: 350px; max-height: 120px; width: auto; height: auto; float: right; } h3{ margin-top: 30px;

} #description{ color: white; font-weight: bold; }

#developed{ font-weight: none; color: grey; }

.error{ color:red }

.form-group{ display:block; margin-bottom:1rem; width:100% } .form-group input,.form-group textarea,.form-group button{ display:block; width:100%; margin:.25rem 0; padding:.7rem .95rem; border:none; border-radius:.2rem; font-size:16px; outline:none; transition:all linear 200ms; } .form-group textarea{ resize:vertical; height:180px } .form-group label{ display:block; margin-bottom:.5rem; } .form-group button{ margin-top: 30px; background-color: rgb(0,107,62)!important; color: white!important; }

Não estou conseguindo posicionar meu <p> left e minha <img> right, e ainda pra piorar a primeira label do meu form sobe acima do meu header, como faço pra posicionar ?

body{
 font-family:'Helvetica Neue', 'Helvetica', 'Arial';
 background-image: linear-gradient(#74b49b, #a7d7c5);
 color: #f4f9f4;
}
#rodape{
    position: static;
    display: block;
    margin-top: 15px;
    text-align: center;
    bottom: 0;
}
#topo{
    display: flex;
    float: right;
    margin-top: 3%;
    margin-bottom: 3%; 
}
#logotop{
    max-width: 350px; 
    max-height: 120px;
    width: auto;
    height: auto;
    float: right;
}
h3{
    margin-top: 30px;

}
#description{
    color: white;
    font-weight: bold;
}

#developed{
    font-weight: none;
    color: grey;
}

.error{
    color:red
}

.form-group{
    display:block;
    margin-bottom:1rem;
    width:100%
}
.form-group input,.form-group textarea,.form-group button{
    display:block;
    width:100%;
    margin:.25rem 0;
    padding:.7rem .95rem;
    border:none;
    border-radius:.2rem;
    font-size:16px;
    outline:none;
    transition:all linear 200ms;
}
.form-group textarea{
    resize:vertical;
    height:180px
}
.form-group label{
    display:block;
    margin-bottom:.5rem;
}
.form-group button{
    margin-top: 30px;
    background-color: rgb(0,107,62)!important;
    color: white!important;
}
Fonte Link

Posicionar <p> de um lado e img de outro

Não estou conseguindo posicionar meu

left e minha right, e ainda pra piorar a primeira label do meu form sobe acima do meu header, como faço pra posicionar ?

<div class="container">
<div class="col-12 col-md-12">
  <header>
    <div class="row" id="topo">
      <p id="description">Preencha o formulário abaixo para falar diretamente com nossa DICOL.</p>
      <img src="assets/img/logo-ALO-Dicol.png" alt="img" id="logotop"/>
    </div>
  </header>
  <div>
    <form class="form" id="formalodicol">
    <div class="form-group">
      <label for="nome">Nome(Opcional):</label>
      <input id="nome" name="nome" class="form-control" type="text" placeholder="Seu nome"/>
    </div>
    <div class="form-group">
      <label for="email">E-mail(Opcional):</label>
      <input id="email" name="email" class="form-control" type="email" placeholder="Seu e-mail"/>
    </div>
    <div class="form-group">
      <label for="Assunto">Assunto:*</label>
      <input id="assunto" name="assunto" class="form-control" type="text" placeholder="Assunto" required/>
    </div>
    <div class="form-group">
      <label for="mensagem">Mensagem:*</label>
      <span><textarea maxlength="2000" id="mensagem" name="mensagem" placeholder="Sua mensagem aqui..." required></textarea></span>
    </div>
    <div class="form-group">
      <button id="submit" type="submit" class="btn btn-primary">Enviar</button>
    </div>
    <br>
    <div id="resp"></div>
  </form>
  </div>
  <footer>
    <div class="row" id="rodape">
      <p id="developed">© 2019 developed by <img src="assets/img/logoGETEC.png" alt="img"/></p>
    </div> 
  </footer>
</div>

CSS:

body{
 font-family:'Helvetica Neue', 'Helvetica', 'Arial';
 background-image: linear-gradient(#74b49b, #a7d7c5);
 color: #f4f9f4;

} #rodape{ position: static; display: block; margin-top: 15px; text-align: center; bottom: 0; } #topo{ display: flex; float: right; margin-top: 3%; margin-bottom: 3%; } #logotop{ max-width: 350px; max-height: 120px; width: auto; height: auto; float: right; } h3{ margin-top: 30px;

} #description{ color: white; font-weight: bold; }

#developed{ font-weight: none; color: grey; }

.error{ color:red }

.form-group{ display:block; margin-bottom:1rem; width:100% } .form-group input,.form-group textarea,.form-group button{ display:block; width:100%; margin:.25rem 0; padding:.7rem .95rem; border:none; border-radius:.2rem; font-size:16px; outline:none; transition:all linear 200ms; } .form-group textarea{ resize:vertical; height:180px } .form-group label{ display:block; margin-bottom:.5rem; } .form-group button{ margin-top: 30px; background-color: rgb(0,107,62)!important; color: white!important; }