0

os escribo para que me ayudéis porque me estoy volviendo loco. El tema es que estoy haciendo un ejercicio en el que se me ha pedido que quede distribuido los elementos de la siguiente manera usando flexbox. También quiero aprovechar de cómo hago para meter la imagen de la lupa pegado al input de form. Es la distribución de los elementos

introducir el código aquí

He hecho un ejemplo parecido para que no se copie por si algún compañero quiere hacer un copy paste.

Aquí dejo un ejemplo de mi código hecho con CodePen y a ver si me podéis ayudar, muchas gracias. PD: estoy empezando con Frontend. Acepto consejos de todo tipo.

       <header class="contenedor">
      <div>
        <div class="header1">
          <img src="https://via.placeholder.com/150/2E1C18/FFFFFF?Text=Down.com" alt="image">
          <span> This is an example </span>
        </div>
        <nav class="header2">
          <ul>
            <li><a href="#">option 1</a></li>
            <li><a href="#">option 2</a></li>
            <li><a href="#">option 3</a></li>
            <li><a href="#">option 4</a></li>
            <li><a href="#">option 5</a></li>
          </ul>
    
        </nav>
      </div>
      <div class="header3">
        <img src="https://via.placeholder.com/150/F8F40F/1C17C5?Text=Down.com" alt="image2">
        <form class="form" action="/form/submit" method="GET">
                    <input class="label" type="text" name="text" placeholder="Search packages">
                    <input class="input" type="submit" name="submit" class="submit" value="Search">
                    <div>
                        <a class="link" href="#">Join</a>
                        <a class="link" href="#">Log in</a>
                    </div>
        
      </div>
    
    </header>
    
    
    
   

 header > div {
  padding: 0 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid lightgray;
}
.header1 img{
  width:20px;
  margin:0 20px;
}
.header3 img{
  width:20px;
  margin:0 20px;
}
.header1 {
  display:flex;
  justify-content:flex-start;
}
nav {
  width: 600px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header3 {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.form  {
  display:flex;
  margin:0 20px;
  
}
.header3 div {
  margin:0 100px;
}
.link {
  margin:0 10px;
}
3
  • Te recomiendo formular una pregunta un poco más concreta. Por ejemplo, qué elementos exactamente crean conflicto o el punto exacto en el que tienes dificultades. De esta forma será mucho más fácil ayudarte. Al fin y al cabo el objetivo es que aprendas exactamente qué hace cada cosa y no simplemente esperar la respuesta que lo solucione todo. Saludos!
    – Sanwych
    Commented el 26 jun. 2022 a las 20:04
  • Ok, perdona si no me he explicado correctamente. El "div" con clase "header " he conseguido que todo salga más o menos bien. El problema radica en la segunda linea, el "nav" con clase "header2", en el que se involucran varios flex para ordenar la parte de form, y la parte de links "join" y "log in". He experimentado varias maneras de ordenarlos usando flex pero se me quedan orientados en el centro. Lo que quiero es que "Join" y "Log in " estén en la parte derecha y el buscador en el centro. Me lio usando varios flex.
    – Mrec2
    Commented el 26 jun. 2022 a las 20:11
  • Resumiendo (la segunda linea del header): - tengo 3 grupos de elementos -> la imagen-logo ; el buscador con su "form" e "input" ; y los links "Join" e"Input". - He usado flex para ordenar los elementos de "form" y luego con otro flex ordenar los links. - cuando aplico flex al conjunto (es decir, los 3 grupos) se me queda la imagen del logo al principio, el segundo grupo del buscador en el centro más o menos, y el tercer grupo de links a la mitad entre el margen limite y el buscador. Lo que quiero es que queden bien ordenados, tal y como sale en la imagen que subí.
    – Mrec2
    Commented el 26 jun. 2022 a las 20:20

1 respuesta 1

1

El único problema que tiene tu código es que te has olvidado de cerrar tu etiqueta form. Al no cerrar tu form, se mezcla con los divs de abajo y se hace todo un lío que no hay por donde cogerlo. Es tan simple como cerrar el form antes del div que contiene "Join" y "Log in"

<header class="contenedor">
      <div>
        <div class="header1">
          <img src="https://via.placeholder.com/150/2E1C18/FFFFFF?Text=Down.com" alt="image">
          <span> This is an example </span>
        </div>
        <nav class="header2">
          <ul>
            <li><a href="#">option 1</a></li>
            <li><a href="#">option 2</a></li>
            <li><a href="#">option 3</a></li>
            <li><a href="#">option 4</a></li>
            <li><a href="#">option 5</a></li>
          </ul>
    
        </nav>
      </div>
      <div class="header3">
        <img src="https://via.placeholder.com/150/F8F40F/1C17C5?Text=Down.com" alt="image2">
        <form class="form" action="/form/submit" method="GET">
                    <input class="label" type="text" name="text" placeholder="Search packages">
                    <input class="input" type="submit" name="submit" class="submit" value="Search">
          </form> <!--Form cerrado-->
                    <div>
                        <a class="link" href="#">Join</a>
                        <a class="link" href="#">Log in</a>
                    </div>
        
      </div>
    
    </header>

De esta forma, el buscador queda centrado, tu imagen a la izquierda y los links 'log in' y 'join' a la derecha

Si quieres hacer que el buscador se parezca más al de la imagen puedes modificar el ancho del label con

.label{
    width: 1000px /* o la que sea */
}

O modelarlo un poco más a tu gusto

1
  • Muchas gracias! Le estaba dando muchas vueltas y fíjate que no caí en algo tan simple jaja.
    – Mrec2
    Commented el 27 jun. 2022 a las 18:03

Tu Respuesta

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

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