Problem z 'position:fixed;'


(jacko1998) #1

Witam i zapodaję kod (X)HTML:

  • Strona Główna
  • Usługi
  • Kontakt
  • Portfolio

banner-green.png[/code] i CSS:
[code]#menu{ width: 960px; height: 60px; background-color: #272727; position: fixed; } li{ list-style: none; display: inline; padding: 30px; margin-top: 20px; } li a:link, a:visited{ color: #cecece; text-decoration: none; font-family: '1'; font-size: 40px; } li a:hover, a:active{ color: #272727; background-color: #cecece; text-decoration: none; font-family: '1'; font-size: 40px; background-color: #cecece; } #header{ width: 960px; height: 299px; }
Są to oczywiście tylko wycinki kodu. Ale problem polega na tym, że div menu ustawiłem

position: fixed;

i gdy wklepie potem header zachowuje się on tak jak by menu wgl nie było. Tzn. Jest na samej górze strony i menu go zakrywa (część) i jak do headera dopisze w CSS3

margin-top: 60px;

to menu też się przesuwa. Zna ktoś na to jakiś sposób ?

-- Dodane 02.07.2013 (Wt) 22:49 --

Screen


#2

Spróbuj ustawić właściwości 'top' oraz 'left' na jakies wartości np 100px oraz display:block;


(jacko1998) #3

No, menu sie ruszyło, ale header nie. A gdzie mam display wkleić ? do #menu czy do #header, chyba do menu bo wcześniej co ?

-- Dodane 02.07.2013 (Wt) 23:07 --

Wpisałem display: block; do tego i tego, nie pomogło ;/


(manieKMP) #4

A o jaki efekt chodzi? Chcesz by menu miało stałe miejsce na ekranie na samej górze i było widoczne zawsze, niezależnie od przewijania strony (to daje position: fixed;), a header chcesz przesunąć pod menu dla "zerowego" stanu przewinięcia?

Jeśli tak to daj te "margin-top: 60px;" dla html i/lub body, chyba że budowa strony jest inna (np. jak na screen'ie, gdzie wsio jest gdzieś po środku i nie skaluje się do szerokości przeglądarki), wtedy daj górny margines dla header'a, a zostanie "wypchnięty" spod menu... tak czy siak, w obu przypadkach dojdzie do przesunięcia w dół, w pierwszym całą stronę (prócz menu), w drugim nagłówek popchnie content pod nim zawarty (również prócz menu).

http://jsfiddle.net/usJ6a/

Jeśli chodzi o coś innego to wytłumacz.


(jacko1998) #5
top: 0px;

przy menu to słowo klucz! Dziękuje !