Dziwne zachowanie menu

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.

1

jsfiddle.com wrzuc to tam

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).

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).

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.

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ąć.

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