• 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
378 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ź 486 wizyt
pytanie zadane 18 listopada 2017 w HTML i CSS przez robiczQ Nowicjusz (190 p.)
0 głosów
1 odpowiedź 192 wizyt
pytanie zadane 21 stycznia 2019 w HTML i CSS przez Deeright Początkujący (380 p.)
0 głosów
1 odpowiedź 434 wizyt
pytanie zadane 16 września 2017 w HTML i CSS przez MrChick888 Obywatel (1,020 p.)

93,089 zapytań

142,047 odpowiedzi

321,473 komentarzy

62,435 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!

...