1

tengo dos problemas chicos. Necesito generar algo tal que así introducir la descripción de la imagen aquí

Mi problema esta en que en el formulario no consigo hacer que el apartado de mensaje: aparezca arriba en lugar de abajo, ni consigo poner la linea de debajo de inicio cursos contacto, ya que si intento ponerla me descoloca todo... Les dejo imagen de como esta actualmente y el codigo.

introducir la descripción de la imagen aquí

CODIGO HTML5

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
<header class="header">
    <div class="logo-header">
        <img src="/Logo_ILERNAOnline.png" alt="">
    </div>
<nav class="nav-menu">
    <ul>
        <li><a href="#">Inicio</a> </li>
        <li><a href="#">Cursos</a> </li>
        <li><a href="#">Contacto</a> </li>
    </ul>
</nav>
</header>
<!--Formulario-->
<form class='contacto'>
    <h2 class="formualario">Formulario de contacto</h2>
    <div><label>Nombre:</label><input type='text' value=''></div>
    <div><label>Apellidos:</label><input type='text' value=''></div>
    <div><label>Telefono:</label><input type='text' value=''></div>
    <div><label>Mensaje:</label><textarea rows='4'></textarea></div>
    <div><input type='submit' value='Enviar'></div>
</form>
<!--Pie De Pagina-->
<footer>
    <div class="footer-contenido">
        <p>XXXX</p>
        <p>XXXXXXX</p>
        <p>SMIR</p>
    </div>
</footer>
</body>
</html>

CODIGO CSS3

/* IMPORTAMOS UNA FUENTE DE GOOGLE Y CONFIGURAMOS VALORES PARA QUE EL NAV NO HAGA DE LAS SUYAS */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Roboto:wght@300&display=swap');
*{
    padding: 0;
    margin: 0;
    text-decoration: none
}

/* HEADER */

a, li{
    font-family: 'Roboto', sans-serif;
    color:black;
}

.logo-header img{
    margin-left: 52px;
    width: 130px;
}

header{
    display: flex;
    justify-content: stretch;
    align-items: center;
    padding: 0.5rem 4rem;
}

.nav-menu ul{
    display: flex;
    align-items: center;
    padding: 0rem 10.75rem;
}

.nav-menu li{
    margin-right: 1.5rem;
    list-style: none;
}

.nav-menu a:hover {
    color:white;
}

.nav-menu li {
    background-color: #FEC940;
    border: 8px solid
    #FEC940;
    padding: 0.25rem 1.75rem;
    border-radius: 1.0rem;
}
.nav-menu li:hover{
    background-color:
    #00B9D0;
    border:8px solid
    #00B9D0
}


/* Formulario */
.contacto{
    margin-left: 85px;
    border: 1px;
    border-radius: 6px;
    padding: 45px 45px 20px;
    margin-top: 10px;
}
.contacto label{
    display: inline-block;
    width: 80px;
    font-family: 'Montserrat';
}
.contacto input[type='text']{
    padding: 7px 6px;
    width: 294px;
    resize: none;
    margin: 5px 0;
    margin-left: 5px;
}
.contacto textarea{
    padding: 7px 6px;
    width: 294px;
    resize: none;
    margin: 5px 0;
    margin-left: 5px;
}
.contacto input[type='submit']{
    margin-left: 85px;
    margin-top: 20px;
    border: 4px solid #FEC940;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: bold;
    background: #FEC940;
}
.contacto input[type='submit']:hover{
    background-color:
    #00B9D0;
    border:4px solid
    #00B9D0
}
h2 {
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: bold;
  }
/* Pie de pagina */
footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #595959;
    height: auto;
    width: 100vw;
    padding-top: 10px;
}
.footer-contenido{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.footer-contenido p{
    max-width: 500px;
    margin: auto;
    line-height: 30px;
    font-size: 17px;
    font-family: 'Roboto';
    font-style:italic;
    color:#fff;
}

/* SETEO DE COLORES */
menu{
    color:#FEC940
}

elementos{
    color:#00B9D0
}

textos,footer,titulo{
    color:#595959
}

Gracias de antemano por vuestra ayuda, ya que estoy desesperado cada vez que intento poner la linea separadora me separa todo o aparece donde le da la gana, cuando intento subir el texto de Mensaje me descuadra también todo.... No se que hacer.

2
  • Para este tipo de Mockups, es mejor que utilices una tabla dentro del formulario, o jugar con el display: table; en los <div> padre y contenidos hijo.
    – coreDeiv
    el 9 dic. 2021 a las 15:53
  • No maquetees tu código con tablas en pleno 2021, es anticuado el 9 dic. 2021 a las 17:16

3 respuestas 3

3

Para la línea debajo del inicio, solo agrega un border-bottom al elemento header (la clase que tiene no la precisa podrías quitarla), o sea en el CSS tu header quedaría así:

header{
    display: flex;
    justify-content: stretch;
    align-items: center;
    padding: 0.5rem 4rem;
    border-bottom: 1px solid black;
}

Para la alineación del label de Mensaje, primero ponle una clase, ej:

<div>
   <label class="textAreaLabel">Mensaje:</label>
   <textarea rows='4'></textarea></div>
<div>

Luego agrega en tu CSS lo siguiente:

.textAreaLabel {
    padding-top: 5px;
    display: inline-block;
    vertical-align: top;
}

Agregué el padding-top para que no quede tan encima el label, porque los otros están un poco más abajo, puedes quitarlo o jugar con el valor hasta encontrar la altura que te parezca adecuada.

Espero te ayude.

2
  • Funciono! , entiendo! , Muchísimas gracias por su ayuda.
    – jose
    el 8 dic. 2021 a las 2:17
  • Por favor si es posible dar por cerrada la pregunta y con la flechita para arriba la votación, ayuda a subir el puntaje y ayuda a otros que busquen la misma pregunta a saber que es la solución. Buena jornada el 8 dic. 2021 a las 2:33
2

Bueno me toco cambiar un poco tu codigo, pero no fue dificil, quedo igualito al mockup, espero sea de tu ayuda

Adicional, por aqui te dejo el codepen para que lo veas en vivo y en directo, lo realice con SASS pero puedes ver el CSS compilado ahi mismo.

Posdata: Estate atento por que le cambie un poco la estructura y cambie varios estilos

Saludos !

/* IMPORTAMOS UNA FUENTE DE GOOGLE Y CONFIGURAMOS VALORES PARA QUE EL NAV NO HAGA DE LAS SUYAS */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Roboto:wght@300&display=swap");
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  font-family: "Montserrat", sans-serif, serif;
  font-size: 16px;
  letter-spacing: 0.026rem !important;
}

/* HEADER */
body {
  width: 100%;
  max-width: 100vw;
  height: auto;
  min-height: 100vh;
  position: relative;
}

.container {
  width: 90%;
  margin: auto;
}

header.header {
  border-bottom: 1px solid #a1a1a1;
}
header.header .container {
  display: flex;
  justify-content: stretch;
  align-items: center;
  padding: 1.25rem 0;
}
header.header .logo-header_item {
  width: auto;
  min-width: 130px;
}
header.header .logo-header_item img {
  width: auto;
  max-width: 100%;
}
header.header .nav-menu {
  display: block;
  width: 100%;
}
header.header .nav-menu ul {
  display: flex;
  align-items: center;
}
header.header .nav-menu ul li {
  list-style: none;
  border-radius: 0px;
  margin: 0 0.5rem;
}
header.header .nav-menu ul li.active > a {
  background-color: #00b9d0;
  color: #fff;
}
header.header .nav-menu ul li a {
  text-decoration: none;
  color: #000;
  background-color: #fec940;
  padding: 7px 20px;
  border-radius: 5px;
  font-weight: 400;
  line-height: 1;
  transition: ease 0.3s all;
}
header.header .nav-menu ul li a:hover {
  color: white;
  background-color: #00b9d0;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

/* Formulario */
.contacto {
  border: 1px;
  border-radius: 6px;
  margin-top: 10px;
}

.contacto label {
  display: inline-block;
  width: 80px;
}

.contacto input[type=text] {
  padding: 7px 6px;
  width: 294px;
  resize: none;
  margin: 5px 0;
  margin-left: 5px;
}

.contacto textarea {
  padding: 7px 6px;
  width: 294px;
  resize: none;
  margin: 5px 0;
  margin-left: 5px;
}

.contacto input[type=submit] {
  margin-left: 85px;
  margin-top: 20px;
  border: 4px solid #fec940;
  padding: 8px 16px;
  border-radius: 8px;
  background: #fec940;
}

.contacto input[type=submit]:hover {
  background-color: #00b9d0;
  border: 4px solid #00b9d0;
}

h2 {
  font-family: "Roboto";
  font-size: 20px;
  font-weight: bold;
}

/* Pie de pagina */
footer {
  position: absolute;
  bottom: 0;
  margin-top: auto;
  display: block;
  background: #595959;
  height: auto;
  width: 100vw;
  padding-top: 10px;
}

.footer-contenido {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.footer-contenido p {
  max-width: 500px;
  margin: auto;
  line-height: 30px;
  font-size: 17px;
  font-family: "Roboto";
  font-style: italic;
  color: #fff;
}

/* SETEO DE COLORES */
menu {
  color: #fec940;
}

elementos {
  color: #00b9d0;
}

textos,
footer,
titulo {
  color: #595959;
}

.inpt-group {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 10px 0;
}
.inpt-group label {
  width: auto;
  min-width: 100px;
  margin: 0 !important;
}
.inpt-group input,
.inpt-group textarea {
  border-radius: 5px;
  border: 1px solid #ccc;
  margin: 0 !important;
}
.inpt-group input:focus,
.inpt-group textarea:focus {
  box-shadow: inset 1px 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #ccc;
  outline: transparent;
}

.btn-group {
  margin-left: 100px !important;
}
.btn-group input[type=submit] {
  margin-left: 0px !important;
  transition: ease 0.3s all;
}
.btn-group input[type=submit]:hover {
  cursor: pointer !important;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  color: #fff;
}
<body>
  <header class="header">
    <div class="container">
      <div class="logo-header">
        <div class="logo-header_item">
          <img src="/Logo_ILERNAOnline.png" alt="">
        </div>
      </div>
      <nav class="nav-menu">
        <ul>
          <li>
            <a href="#">Inicio</a>
          </li>
          <li>
            <a href="#">Cursos</a>
          </li>
          <li class="active">
            <a href="#">Contacto</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <div class="container">
    <form class='contacto'>
      <h2 class="formualario">Formulario de contacto</h2>
      <div class="inpt-group">
        <label>Nombre:</label>
        <input type='text' value=''>
      </div>
      <div class="inpt-group">
        <label>Apellidos:</label>
        <input type='text' value=''>
      </div>
      <div class="inpt-group">
        <label>Telefono:</label>
        <input type='text' value=''>
      </div>
      <div class="inpt-group">
        <label>Mensaje:</label>
        <textarea rows='4'></textarea>
      </div>
      <div class="btn-group">
        <input type='submit' value='Enviar'>
      </div>
    </form>
  </div>
  <footer>
    <div class="footer-contenido">
      <p>XXXX</p>
      <p>XXXXXXX</p>
      <p>SMIR</p>
    </div>
  </footer>
</body>

2

he modificado tu código para que quede tal como creo que pides, ya veras que así lo entenderás mejor y veras en que estabas fallando. He agregado una clase a tu label, la he modificado con css para que quede justo al lado del textarea y para que el botón se quede justo abajo, con un < br/> logras que se ponga justo donde quieres, para la linea de arriba la consigues hacer con un < hr>.

/* IMPORTAMOS UNA FUENTE DE GOOGLE Y CONFIGURAMOS VALORES PARA QUE EL NAV NO HAGA DE LAS SUYAS */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Roboto:wght@300&display=swap');
*{
    padding: 0;
    margin: 0;
    text-decoration: none
}

/* HEADER */

a, li{
    font-family: 'Roboto', sans-serif;
    color:black;
}

.logo-header img{
    margin-left: 52px;
    width: 130px;
}

header{
    display: flex;
    justify-content: stretch;
    align-items: center;
    padding: 0.5rem 4rem;
}

.nav-menu ul{
    display: flex;
    align-items: center;
    padding: 0rem 10.75rem;
}

.nav-menu li{
    margin-right: 1.5rem;
    list-style: none;
}

.nav-menu a:hover {
    color:white;
}

.nav-menu li {
    background-color: #FEC940;
    border: 8px solid
    #FEC940;
    padding: 0.25rem 1.75rem;
    border-radius: 1.0rem;
}
.nav-menu li:hover{
    background-color:
    #00B9D0;
    border:8px solid
    #00B9D0
}


/* Formulario */
.contacto{
    margin-left: 85px;
    border: 1px;
    border-radius: 6px;
    padding: 45px 45px 20px;
    margin-top: 10px;
}
.contacto label{
    display: inline-block;
    width: 80px;
    font-family: 'Montserrat';
}
.contacto input[type='text']{
    padding: 7px 6px;
    width: 294px;
    resize: none;
    margin: 5px 0;
    margin-left: 5px;
}
.contacto textarea{
    padding: 7px 6px;
    width: 294px;
    resize: none;
    margin: 5px 0;
    margin-left: 5px;
}
.contacto input[type='submit']{
    margin-left: 85px;
    margin-top: 20px;
    border: 4px solid #FEC940;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: bold;
    background: #FEC940;
}
.contacto input[type='submit']:hover{
    background-color:
    #00B9D0;
    border:4px solid
    #00B9D0
}
h2 {
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: bold;
  }

  .cajaTexto{
    width: 180px; 
    display: inline-block;
    text-align:right;
    vertical-align: top;
  }
/* Pie de pagina */
footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #595959;
    height: auto;
    width: 100vw;
    padding-top: 10px;
}
.footer-contenido{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.footer-contenido p{
    max-width: 500px;
    margin: auto;
    line-height: 30px;
    font-size: 17px;
    font-family: 'Roboto';
    font-style:italic;
    color:#fff;
}

/* SETEO DE COLORES */
menu{
    color:#FEC940
}

elementos{
    color:#00B9D0
}

textos,footer,titulo{
    color:#595959
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
<header class="header">
    <div class="logo-header">
        <img src="/Logo_ILERNAOnline.png" alt="">
    </div>
<nav class="nav-menu">
    <ul>
        <li><a href="#">Inicio</a> </li>
        <li><a href="#">Cursos</a> </li>
        <li><a href="#">Contacto</a> </li>
    </ul>
</nav>
</header>
<!--Formulario-->
<hr>
<form class='contacto'>
    <h2 class="formualario">Formulario de contacto</h2>
    <div><label>Nombre:</label><input type='text' value=''></div>
    <div><label>Apellidos:</label><input type='text' value=''></div>
    <div><label>Telefono:</label><input type='text' value=''></div>
    <div><label class="cajaTexto" for="address">Mensaje:</label></label>
    <textarea rows='4'></textarea>
    <br/>
    <input type='submit' value='Enviar'></div>
</form>
<!--Pie De Pagina-->
<footer>
    <div class="footer-contenido">
        <p>XXXX</p>
        <p>XXXXXXX</p>
        <p>SMIR</p>
    </div>
</footer>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.