Estilizando nuestro sitio web: Header

← Diseño Web ⌂ Home

Es momento de aplicar todos los conceptos aprendidos hasta ahora.

Estilizando el Header

Con los conceptos aprendidos de flexbox, lo usaremos para alinear nuestro header, activando display: flex;:

.header {
    background-color: #3B3B3B;
    color: white;
    display: flex;
}

Y ahora eliminaremos márgenes y bordes de todas las listas y figure, y eliminar los bullets de las listas:

ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

figure {
    margin: 0;
}

Y para que los elementos se vayan uno a la izquierda y otro a la derecha utilizamos justify-content: space-between; en el contenedor del flex, o sea, en el header.

.header {
    background-color: #3B3B3B;
    color: white;
    display: flex;
    justify-content: space-between;
}

Otra cosa que tenemos que alinear de manera horizontal son los elementos dentro de la lista del menú, así que usaremos de nuevo flexbox solo para esos elementos que se encuentran dentro del header:

.header ol {
    display: flex;
}

Y esos mismo elementos alinearlos de manera vertical agregando align-items: center al header:

.header {
    background-color: #3B3B3B;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Algo que observamos también debemos modificar es la altura de nuestro header, añadiendo un alto de height: 90px;:

.header {
    background-color: #3B3B3B;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
}

Y para finalizar un espaciado a los elementos del menú del header, lo lograremos con un padding izquierdo y derecho:

.header a {
    color: white;
    text-decoration: none;
    padding: 0 10px;
}

Por el momento estos serán los ajustes que le haremos al Header.