Flexbox - menu, problem z wysokością bloków i marginesami.

pytanie zadane 1 lipca 2016 w HTML i CSS przez mizeriowy Użytkownik (650 p.)

1. Mam problem z menu we flexboxie. Dlaczego boxy nie przyjmują całej wysokości nawigacji i zostaje paskudny margines? Najgorzej jest jak zmniejszymy okno pzeglądarki i menu zrobi się kolumnowe. Próbowałem już wielu rzeczy i nie rozwiązałem problemu.

2. W body użyłem negatywnego marginesu, żeby logo zaczynało się od początku strony. Bez tego z prawej strony zostaje margines. Dlaczego tak się dzieje skoro był ustawiony na 0?

Jak macie jeszcze jakieś rady to chętnie skorzystam. To moja pierwsza stronka od podstaw i pewnie błędów jest od cholery.

https://codepen.io/mizeriowy/pen/rLmAgP

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="author" content="Jan Kowalski">
        <meta name="description" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto laboriosam eveniet repudiandae dolores, autem alias? Voluptas enim nam, debitis fugit">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
          <nav>
              <ul>
                  <li><a class="logo" href="#">Witaj na kowalski.com</a></li>
              </ul>
              <ul>
                  <li><a href="#">O mnie</a></li>
                  <li><a href="#">Umiejętności</a></li>
                  <li><a href="#">Kontakt</a></li>
              </ul>
          </nav>
          <header></header>
    </body>
</html>

Css

*{
    margin: 0px;
}

body{ 
    font-size: 20px;
    color: #fff;
    margin-left: -40px;
}

.logo{
    font-size: 130%;
}

nav{
    display: flex;
    justify-content: space-between;
    background: hsla(245, 9%, 25%, 1);
}

nav ul{
    display: flex;
    list-style: none;    
}

nav ul li a{
    display: block;
    text-decoration: none;
    text-align: center;
    color: #fff;
}

nav ul li a:hover{
    background: hsla(245, 9%, 30%, 1);
}

.logo:hover{
    background: hsla(245, 9%, 25%, 1);
}

header{
    min-height: 250px;
    background: #53C492;
}
@media screen and (min-width: 800px){
    nav ul li a{
        padding: 25px;
    }

}   

@media screen and (min-width: 300px) and (max-width: 799px){
    nav{
        flex-flow: column;
    }
     nav ul{
        flex-flow: column;
    }

    nav ul li a{
        margin: 10px 0px;
    }

}

2 odpowiedzi

odpowiedź 1 lipca 2016 przez niezalogowany
wybrane 1 lipca 2016 przez mizeriowy

Najlepsza

1. To nie flex. Zamiast wysokość buttonów definiować na podstawie paddingu od tekstu, definiuj ją na sztywno. W tym momencie przycisk logo jest większy od reszty (130% font-size) - przerwa bierze się z różnicy wysokości różnych elementów.

2. Bo logo jest w ul, a listy mają domyślne przypisany lewy padding - wyzeruj go, a problem zniknie,