Dziwne zachowanie menu

2018-04-09 10:53

Rejestracja: 3 lata temu

Ostatnio: 2 lata temu

0

Witam
Chciałem stworzyć stronę prezentującą podstawowe techniki HTML i CSS, by je sobie przypomnieć w praktyce ale mam pewien problem. Kiedy dodaję w CSS do nawigacji właściwość fixed to nawigacja co prawda przewija się ze stroną ale zwija mi się do elementu blokowego jak na załączonym screenie. Z czego wynika ten problem i jak można mu zaradzić? W załączniku oprócz screena dodaję plik html i css strony.

edytowany 1x, ostatnio: furious programming, 2018-04-09 12:49

Pozostało 580 znaków

2018-04-09 11:01

Rejestracja: 8 lat temu

Ostatnio: 7 godzin temu

1

jsfiddle.com wrzuc to tam

Pozostało 580 znaków

2018-04-09 11:39

Rejestracja: 9 lat temu

Ostatnio: 2 minuty temu

1

Nie otwierałem kodu, ale jak elementy mają position: static, to te które mają display: block (np <div>) dopasowują się szerokością do szerokości ich rodzica (w Twoim przypadku to (chyba, nie wiem) będzie całe okno).

Kiedy im zmienisz tą position np na aboslute albo fixed, to przestają się dopasowywać do rodzica, i stają się tylko na tyle duże żeby pomieścić to co mają "w sobie" (czyli ich dzieci). Musisz pewnie tylko mu ustawić explicit wysokość i szerokość (np width: 100%; height: 100px).


edytowany 2x, ostatnio: TomRiddle, 2018-04-09 11:40

Pozostało 580 znaków

2018-04-09 14:13

Rejestracja: 3 lata temu

Ostatnio: 2 lata temu

0

TomRiddle Twoja rada z długością menu poskutkowała. Dzięki. Mam jeszcze jedno pytanie dotyczące tego menu. Nie wiedzieć czemu nie równa mi do krawędzi przeglądarki. Muszę w kodzie wstawiać :

top: -16px;
left: -10px; 

żeby jakoś to ładnie wyglądało. Jednak zdaje sobie sprawę, że jest to rozwiązanie na krótką metę, gdyż wtedy będzie się to poprawnie wyświetlać jedynie przy takiej rozdzielczości. Da się to wyrównać w innym sposób? (od razu dodam, że margin i padding usawione na 0px nie zmieniają sytuacji).

edytowany 1x, ostatnio: furious programming, 2018-04-09 14:58

Pozostało 580 znaków

2018-04-09 14:32

Rejestracja: 5 lat temu

Ostatnio: 1 miesiąc temu

Lokalizacja: Warszawa

1

Kiedy dodaję w CSS do nawigacji właściwość fixed to nawigacja co prawda przewija się ze stroną (...)

A nie powinna. Zgodnie z tym: https://www.w3schools.com/cssref/pr_class_position.asp, fixed oznacza fixed w stosunku do okna przeglądarki, czyli element stoi w miejscu podczas przewijania. Chyba coś masz nie tak.

od razu dodam, że margin i padding usawione na 0px nie zmieniają sytuacji

Ale ustawione dla jakiego elementu? Spróbuj ustawić dla <body>, ma domyślne marginesy.


Pozostało 580 znaków

2018-04-09 15:55

Rejestracja: 3 lata temu

Ostatnio: 2 lata temu

0
Silv napisał(a):

Kiedy dodaję w CSS do nawigacji właściwość fixed to nawigacja co prawda przewija się ze stroną (...)

A nie powinna. Zgodnie z tym: https://www.w3schools.com/cssref/pr_class_position.asp, fixed oznacza fixed w stosunku do okna przeglądarki, czyli element stoi w miejscu podczas przewijania. Chyba coś masz nie tak.

Racja. Pomyliłem się przy pisaniu. Stoi nieruchomo na górze okienka.

Po zastosowaniu marginesów 0px dla elementu body oraz tyle samo na margin-top dla nav ul menu działa bezbłędnie. Dzięki wszystkim za pomoc. Temat można zamknąć.

Pozostało 580 znaków

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0