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

Scroll zamiast responsywności

Object Storage Arubacloud
0 głosów
313 wizyt
pytanie zadane 11 marca 2021 w HTML i CSS przez Szyszka Gaduła (3,490 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,180 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,490 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,180 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,490 p.)

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

komentarz 12 marca 2021 przez pablop76 VIP (123,180 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,490 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ź 503 wizyt
pytanie zadane 11 marca 2016 w HTML i CSS przez McShadow Obywatel (1,050 p.)
0 głosów
2 odpowiedzi 151 wizyt
pytanie zadane 12 września 2022 w HTML i CSS przez domelcio Użytkownik (960 p.)
0 głosów
1 odpowiedź 182 wizyt

92,576 zapytań

141,426 odpowiedzi

319,652 komentarzy

61,961 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.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...