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

Scroll zamiast responsywności

0 głosów
815 wizyt
pytanie zadane 11 marca 2021 w HTML i CSS przez Szyszka Gaduła (3,530 p.)

Siemka, 3dni temu dostałem weny na stworzenie pseudo dziennika elektronicznego. Mam pytanie - jak mogę dokonać tego, aby zamiast responsywności tworzył się scroll? Obecnie wygląda to tak:

Lecz kiedy zmniejsze okno, wygląda to jeszcze bardziej ohydnie, niż wygląda to teraz:

Jak więc tego dokonać? Dzięki za wszystkie odpowiedzi.

1 odpowiedź

+3 głosów
odpowiedź 11 marca 2021 przez pablop76 VIP (123,640 p.)
wybrane 12 marca 2021 przez Szyszka
 
Najlepsza

Scroll to zły pomysł, powinieneś raczej zainteresować się jak się tworzy strony responsywne, jak dział nav na stronach responsywnych.

A co do pytania to odpowiedź brzmi 

overflow-x

komentarz 12 marca 2021 przez Szyszka Gaduła (3,530 p.)
Dzięki, ale teraz navbar__link nie jest wyśrodkowany w pionie. Jak to zrobić bez display:flex?
komentarz 12 marca 2021 przez pablop76 VIP (123,640 p.)
Wydaje mi się, że jest. Odpowiada za to line- height. Nie mam już dostępu do kompa.
komentarz 12 marca 2021 przez Szyszka Gaduła (3,530 p.)

No właśnie nie. Po dodaniu tła wygląda to tak:

komentarz 12 marca 2021 przez pablop76 VIP (123,640 p.)
edycja 12 marca 2021 przez pablop76
To prawdopodobnie style default, zamiast body zamień na * w css
Ja nie widzę tego problemu w kodzie który ci przesłałem.
Używaj devtools
komentarz 12 marca 2021 przez Szyszka Gaduła (3,530 p.)

Okej, mam tak:

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap');



#navbar {
  top: 0%;
  position: sticky;
  position: -webkit-sticky;
  min-width: 640px;
  width: 100%;
  height: 50px;
  background-image: linear-gradient(to right, #8c27ae, #df7a0e);
  border-bottom: 3px solid #262626;
  display: flex;
  justify-content: space-between;
}

.navbar__list {
  display: flex;
  list-style: none;
  height: 100%;
  margin: 0px;
}

.navbar__link {
  display: block;
  width: auto;
  min-width: 120px;
  height: 100%;
  line-height: 47px;
  text-decoration: none;
  color: #fff;
  background-color: red;
  margin-right: 10px;
  text-align: center;
  font-weight: 900;
  font-family: 'Roboto Mono', monospace;
  font-size: 20px;
}

#userFullName {
  line-height: 47px;
  text-align: center;
  font-weight: 900;
  font-family: 'Roboto Mono', monospace;
  background-color: red;
  margin-left: 20px;
  font-size: 25px;
}

I działa, dzięki!

Podobne pytania

0 głosów
1 odpowiedź 1,172 wizyt
pytanie zadane 11 marca 2016 w HTML i CSS przez McShadow Obywatel (1,050 p.)
0 głosów
2 odpowiedzi 320 wizyt
pytanie zadane 12 września 2022 w HTML i CSS przez domelcio Użytkownik (980 p.)
0 głosów
1 odpowiedź 301 wizyt

93,720 zapytań

142,648 odpowiedzi

323,266 komentarzy

63,270 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

Twierdza Linux. Bezpieczeństwo dla dociekliwych

Aby uzyskać rabat -10%, użyjcie kodu pasja-linux, wpisując go w specjalne pole w koszyku.

...