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

CSS/Skalowanie

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
573 wizyt
pytanie zadane 5 lutego 2018 w HTML i CSS przez Olek Szymański Użytkownik (920 p.)

Witam! Dzisiaj zacząłem pisać pewną rzecz.. napotkałem pewien problem. Otóż nie wiem jak mogę zrobić, aby menu sie skalowało wraz z opcjami, gdy zmniejszam okno przeglądarki to tylko zmniejsza mi się tło, ale opcje zostają w miejscu, co wiąże się z tym, że nie można ich kliknąć, bo są schowane. Co powinienem zrobić? Jakie kroki podjąć.

DOŁĄCZAM ZDJĘCIE!

Pozdrawiam!

1 odpowiedź

0 głosów
odpowiedź 5 lutego 2018 przez Daniel90 Pasjonat (17,970 p.)
Używaj vw zamiast px w rozmiarze czcionki https://css-tricks.com/viewport-sized-typography/
komentarz 5 lutego 2018 przez Olek Szymański Użytkownik (920 p.)
Owszem zastosowałem to, moje opcje zmniejszają się, ale zostają w miejscu, co powoduje brak dostępu do opcji na dole ;/
komentarz 5 lutego 2018 przez Olek Szymański Użytkownik (920 p.)
Ewentualnie może być tak, żeby w menu zrobił się suwak.
komentarz 5 lutego 2018 przez Daniel90 Pasjonat (17,970 p.)
Najlepiej jakbyś kod wkleił.
komentarz 5 lutego 2018 przez Olek Szymański Użytkownik (920 p.)

<div class="sidebar-bg">
    <div class="sidebar-wrapper">
        <div class="logo">
            <img src="assets/img/logo2.png" alt="logo">
        </div>
        <nav>
            <ul class="menu">
                <li>
                    <a href="#"><i class="ikonka fas fa-home"></i>Strona główna</a>
                </li>
                <li>
                    <a href="#"><i class="ikonka fas fa-key"></i>Twoje usługi</a>
                </li>
                <li>
                    <a href="#"><i class="ikonka fas fa-trophy"></i>Statystyki</a>
                </li>
                <li>
                    <a href="#"><i class="ikonka fas fa-ban"></i>Bany i warny</a>
                </li>
                <li>
                    <a href="#"></a>
                </li>
                <li>
                    <a href="#">Frakcje</a>
                </li>
                <li>
                    <a href="#">Zmiana hasła</a>
                </li>
                <li>
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <a href="#"></a>
                </li>
                <li>
                    <a href="#">ZLorem Ipsum</a>
                </li>
                <li>
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <a href="#">Zmiana </a>
                </li>
                <li>
                    <a href="#">Kontakt</a>
                </li>
                <li>
                    <a href="#"></a>
                </li>
                <li>
                    <a href="#">Zmiana hasła</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
.sidebar-bg {
    background-image: url(../img/side.png);
    background-position: center;
    background-size: cover;
    width: 260px;
    min-height: 100%;
    height: 100%;
    position: absolute;
}
.sidebar-wrapper {
    overflow: hidden;
    width: 260px;
    min-height: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: rgba(0, 0, 0, 0.3);
}
.logo {
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
nav {
    margin-top: 20px;
}
nav > ul {
    margin-bottom: 0;
    list-style: none;
    padding-left: 0;
}
nav .menu li a {
    color: #fff;
    text-decoration: none;
    line-height: 30px;
    font-size: 1.6vh;
}
li {
    padding: 10px 15px;
    text-transform: uppercase;
    font-weight: 900;
}
li:hover {
    background-color: lightgray;
    opacity: 0.3;
}

 

komentarz 5 lutego 2018 przez Daniel90 Pasjonat (17,970 p.)
do .nav możesz dodać

    line-height: 60%;
    overflow: scroll;
komentarz 5 lutego 2018 przez Olek Szymański Użytkownik (920 p.)
Nie działa :"/
komentarz 5 lutego 2018 przez Daniel90 Pasjonat (17,970 p.)
Dodało scrollbara i zmniejszyło odstępy https://jsfiddle.net/jcryhkzp/
komentarz 5 lutego 2018 przez Olek Szymański Użytkownik (920 p.)
Znalazłem błąd. Wystarczyło dodać w klasie .sidebar-wrapper overflow auto i działą wszytko.

Dzięki! Pozdrawiam

Podobne pytania

–2 głosów
1 odpowiedź 340 wizyt
pytanie zadane 14 czerwca 2017 w HTML i CSS przez SzukającyPrzygód Bywalec (2,310 p.)
0 głosów
1 odpowiedź 161 wizyt
pytanie zadane 19 lipca 2017 w HTML i CSS przez Venglas Obywatel (1,160 p.)
0 głosów
1 odpowiedź 599 wizyt
pytanie zadane 8 stycznia 2018 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)

93,191 zapytań

142,206 odpowiedzi

322,040 komentarzy

62,518 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2817p. - dia-Chann
  2. 2769p. - Łukasz Piwowar
  3. 2759p. - Łukasz Eckert
  4. 2738p. - CC PL
  5. 2704p. - Tomasz Bielak
  6. 2678p. - Łukasz Siedlecki
  7. 2666p. - rucin93
  8. 2536p. - Mikbac
  9. 2485p. - Marcin Putra
  10. 2475p. - Adrian Wieprzkowicz
  11. 2418p. - Michal Drewniak
  12. 2239p. - Michał Telesz
  13. 2156p. - Anonim 3619784
  14. 1733p. - rafalszastok
  15. 1650p. - Mariusz Fornal
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!

...