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

HTML/CSS - manipulowanie odstępem

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
401 wizyt
pytanie zadane 13 grudnia 2017 w HTML i CSS przez Rash Użytkownik (620 p.)

Witam serdecznie. Borykam się z pewnym problemem, żeby rozjaśnić sytuację poniżej prezentuję fragment kodu:

    <!-- Header -->
    <header class="page-header">
        <section class="menu-brand">
            <a href="#logo">
                Logo
            </a>
        </section>
        <nav class="menu-links">
            <ul class="links">
                <li>
                    <a href="#label">Label</a>
                </li>
                <li>
                    <a href="#label">Label</a>
                </li>
                <li>
                    <a href="#label">Label</a>
                </li>
            </ul>
        </nav>
    </header>

Nauczyłem się korzystać z flexa, aczkolwiek mój problem polega na tym, że nie jestem w stanie odpowiednio manipulować odstępami, pomiędzy poszczególnymi elementami. Łatwiej będzie, jeśli po prostu pokażę, o jaki efekt mi dokładnie chodzi wink

https://assets.hongkiat.com/uploads/psd-website-templates/13-free-website-psd-templates.jpg

Logo oraz nawigacja posiadają zauważalny odstęp od krawędzi, mam problem, żeby uzyskać taki efekt. Flexbox w moim przypadku nie rozwiązuje problemu, mogę wszystko wycentrować, ale później, żeby uzyskać podobny efekt, muszę niestety posiłkować się jakąś absurdalną wielkością marginesów. 

.page-header {
    max-width: 1920px;
    height: 82px;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

 

 

Moje ustawienie page-header.

2 odpowiedzi

0 głosów
odpowiedź 13 grudnia 2017 przez radek024 Szeryf (77,160 p.)

Zobacz na menu na tej stronie: https://radek024.github.io/blog/. Jeżeli elementowi podasz .blog-title większą wartość dla flex to będziesz miał odstęp - a wysokość i tak i tak musisz ustalić.

komentarz 14 grudnia 2017 przez Rash Użytkownik (620 p.)

Pobawiłem się Flexem i znalazłem rozwiązanie. Mógłbyś bardziej rozwinąć kwestię, jeśli chodzi o przypisywanie wartości do Flexa? 

Poniżej fragment mojego kodu w CSS: 

https://scontent-frt3-2.xx.fbcdn.net/v/t35.0-12/s2048x2048/25383439_722545184619833_510333075_o.jpg?oh=329ac5b02b55eae1f3769e3057fbed67&oe=5A33C9A0

Ustawienie jakiejkolwiek wartości: "Flex" niczego u mnie nie zmieniło, dopiero space-around rozwiązało mój problem. 

komentarz 14 grudnia 2017 przez radek024 Szeryf (77,160 p.)
OK, myślałem że zależy Ci na rozmieszczenie elementów od siebie - i tutaj chodziło mi o menu samo w sobie oraz logo. jusitfy-content rzeczywiście zadziała, ale wtedy odległość dotyczy każdego z elementów, Natomiast flex działa na zasadzie proporcji.

Uznajmy że mamy dwa elementy: .logo oraz .menu, które znajdują się w .page-nav. Dla .page-nav nadajemy display: flex. Następnie dla elementów potomnych możemy nadać wartość flex. Jeżeli nadamy .logo właściwość flex:3, a .page-nav flex: 4 to wtedy zajmą one miejsce w stosunku 3:4. Na tym polega flex :P
0 głosów
odpowiedź 13 grudnia 2017 przez PaulGilbert Gaduła (3,280 p.)
Ja jak nie mogę dojść do ładu z rozmieszczeniem elementów, to posiłkuję się czasem dodatkowymi divami. Robię sobie najpierw przykładowe kolorowe (żeby były widoczne) divy dodatkowe, które następnie odpowiednio ustawiam, i dopiero do tych divów sobie wrzucam dalsze elementy układanki i ewentualnie na koniec wyrzucam im kolory i dodatkowo ustawiam im pozostałe parametry jeśli zachodzi potrzeba.

Podobne pytania

0 głosów
1 odpowiedź 520 wizyt
pytanie zadane 18 listopada 2017 w HTML i CSS przez robiczQ Nowicjusz (190 p.)
0 głosów
1 odpowiedź 203 wizyt
pytanie zadane 21 stycznia 2019 w HTML i CSS przez Deeright Początkujący (380 p.)
0 głosów
1 odpowiedź 440 wizyt
pytanie zadane 16 września 2017 w HTML i CSS przez MrChick888 Obywatel (1,020 p.)

93,195 zapytań

142,211 odpowiedzi

322,056 komentarzy

62,519 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 3316p. - dia-Chann
  2. 3251p. - Łukasz Piwowar
  3. 3243p. - Łukasz Eckert
  4. 3222p. - CC PL
  5. 3167p. - Tomasz Bielak
  6. 3157p. - Łukasz Siedlecki
  7. 3133p. - rucin93
  8. 3110p. - Maurycy W
  9. 2992p. - Mikbac
  10. 2918p. - Adrian Wieprzkowicz
  11. 2490p. - Marcin Putra
  12. 2467p. - Michał Telesz
  13. 2427p. - Michal Drewniak
  14. 2372p. - Anonim 3619784
  15. 1949p. - rafalszastok
Szczegóły i pełne wyniki

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 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...