• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
323 wizyt
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

+2 głosów
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,

0 głosów
odpowiedź 1 lipca 2016 przez mizeriowy Użytkownik (650 p.)
Ustawiłem sobie wartość line-height dla logo oraz buttonów w menu. Nie wiem czy dokładnie o to chodziło ale działa. Problem z marginesem też rozwiązany. Wielkie dzięki.

Podobne pytania

+1 głos
1 odpowiedź 209 wizyt
+2 głosów
1 odpowiedź 316 wizyt
pytanie zadane 24 września 2016 w HTML i CSS przez ayo1001 Obywatel (1,890 p.)
0 głosów
2 odpowiedzi 732 wizyt
pytanie zadane 29 grudnia 2016 w HTML i CSS przez Kuba Bielawski Obywatel (1,760 p.)

93,084 zapytań

142,045 odpowiedzi

321,466 komentarzy

62,431 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...