• 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
571 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ź 594 wizyt
pytanie zadane 8 stycznia 2018 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)

93,175 zapytań

142,185 odpowiedzi

321,977 komentarzy

62,506 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 1401p. - dia-Chann
  2. 1380p. - Łukasz Piwowar
  3. 1372p. - CC PL
  4. 1370p. - Łukasz Eckert
  5. 1351p. - Tomasz Bielak
  6. 1312p. - Łukasz Siedlecki
  7. 1302p. - rucin93
  8. 1217p. - Michal Drewniak
  9. 1181p. - rafalszastok
  10. 1164p. - Adrian Wieprzkowicz
  11. 1155p. - Piotr Aleksandrowicz
  12. 1149p. - Michał Telesz
  13. 1124p. - ssynowiec
  14. 1101p. - Dominik Łempicki (kapitan)
  15. 1087p. - Marcin Putra
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!

...