Przypisanie pozycji fixed dla loga i menu

Witam

Chciałem przerobić stronę sklepu internetowego tak by przy przewijaniu strony logo i menu było pływające. Przypisałem atrybut fixed do loga i paska menu i niby działa tylko mam problem z tym, że inne moduły które są niżej automatycznie przeszły na górę strony a logo i menu je przysłania. Czy ktoś wie jak uniknąć takiego efektu? Bo chciałbym uzyskać efekt że w momencie przewijania jak już logo i menu byłby normalnie nie widocznie wtedy zaczynają podążać a nie że są ze startu pływające i elementy strony nakładają się na siebie.

Użyj np. jQuery i wykrywaj pozycję scrolla. Jak jest na górze to nadaj position: static, a jak zescroluje na dół to wtedy zmień na fixed.

Bez sensu pakować jQuery lub JS do takiej pierdoły @Veox.
@Wojciech87 możesz np nadać stałą wysokość dla diva, w którym siedzą logo i menu tak aby w startowej pozycji było ok

Dobrze tylko jak to ustawić do tych parametrów

 
#NaglowekSklepu { position:fixed; z-index: 999; margin:3px 0px 2px 0px; overflow:hidden; }

/* belka pod naglowkiem */
#BelkaNaglowka { position:fixed; z-index: 999; margin:230px 10px 5px 10px; height:110px; border:1px solid #929090; background:url('../obrazki/szablon/tlo_naglowka.png') repeat-x; }

Czy w ten sposób może być?

div.relative {
    position: relative;
    center: 30px;
    border: 3px solid #73AD21;

#NaglowekSklepu { position:fixed; z-index: 999; margin:3px 0px 2px 0px; overflow:hidden; }
 
/* belka pod naglowkiem */
#BelkaNaglowka { position:fixed; z-index: 999; margin:230px 10px 5px 10px; height:110px; border:1px solid #929090; background:url('../obrazki/szablon/tlo_naglowka.png') repeat-x; }

Margines 230px przy position: fixed? Z-index 999? :o Tło jako obrazek pachnie czymś co da się ogarnąć CSSem...
Skoro position: fixed sprawia, że dany element nie oddziałuje już na kolejne to żeby navbar nie zakrywał elementów na samej górze trzeba by je jakoś odsunąć, np. przy użyciu marginesu albo paddingu. Zapewne chodzi Ci o coś takiego. Wywal/zmień w .content wartość paddingu i zobaczysz co się stanie.

Rozumiem że "Margines 230px przy position: fixed? Z-index 999?" jest tu coś błędnego? Czy mogę prosić o wytłumaczenie bo margines dałem po to by menu znalazło się nad banerem głównym, pozycja fixed by było pływające a z-index po to by było na wierzchu.

http://wklej.org/id/2993970/

Tutaj plik style. Chodzi o to by #BelkaNaglowka i #NaglowekSklepu były pływające i podążające za przesuwaniem strony.

Wojciech87 napisał(a):

Rozumiem że "Margines 230px przy position: fixed? Z-index 999?" jest tu coś błędnego? Czy mogę prosić o wytłumaczenie bo margines dałem po to by menu znalazło się nad banerem głównym, pozycja fixed by było pływające a z-index po to by było na wierzchu.

http://wklej.org/id/2993970/

Tutaj plik style. Chodzi o to by #BelkaNaglowka i #NaglowekSklepu były pływające i podążające za przesuwaniem strony.

Domyślam się o co chodzi, ale to nie prezentuje się za dobrze. Skoro masz dwa elementy pod sobą z takim pozycjonowaniem to opakuj je divem i ten element pozycjonuj. Wtedy zamiast w dwóch miejscach masz to samo w jednej klasie, łatwiej coś zmienić (jak się okaże, że trzeba tam coś jeszcze dodać to nie będziesz musiał bawić się z pozycjonowaniem kolejnego elementu), jest chociaż odrobinę czyściej = szansa na ciut mniejsze WTF osoby która to potem dostanie ;)
Wysoki z-index budzi nieufność - wygląda jak próba szybkiego poprawienia czegoś czego nie dało się znaleźć. Kilka takich linijek i zaczyna się robić źle.

Nie wklejaj samego CSSa, bez MTLa i możliwości podglądnięcia tego na szybko raczej nikomu nie będzie się chciało z tym bawić. Użyj np, jsbin i postaraj się tam przenieść możliwie najmniej rzeczy żeby odtworzyć problem, bo też mało prawdopodobne żeby ktoś chciał się przekopywać przez kilkadziesiąt/set linii html/css jeżeli można było to pokazać przy użyciu kilkunastu.

Przy okazji - to co pokazałem nie rozwiązuje Twojego problemu?

Nie mogłem znaleźć w stylu .content i dlatego nie wiem gdzie przypisać margines czy padding.

"szansa na ciut mniejsze WTF osoby która to potem dostanie" << tzn?

To jak zrobić z tego jednego diva? Bo samo przypisanie position:fixed powoduje że element jest pływający ale po załadowaniu strony mimo że np. baner jest na samej górze to pod niego wchodzą inne elementy które z automatu poszły na samą górę strony a powinny domyślnie być pod banerem (chyba że zacznie się przewijać stronę i baner zacznie się przesuwać)

/* link z logo sklepu */
#LinkLogo { position:fixed; z-index: 999; font-size:0px; display:block; }

/* belka pod naglowkiem */
#BelkaNaglowka { position:fixed; z-index: 999; margin:250px 10px 5px 10px; height:110px; border:1px solid #929090; background:url('../obrazki/szablon/tlo_naglowka.png') repeat-x; }

Wojciech87 napisał(a):

Nie mogłem znaleźć w stylu .content i dlatego nie wiem gdzie przypisać margines czy padding.

Jak nie mogłeś? Otworzyłeś w ogóle link do jsbin który wcześniej wkleiłem?

Wojciech87 napisał(a):

"szansa na ciut mniejsze WTF osoby która to potem dostanie" << tzn?

Mało kto lubi bawić się w style, m. in. dlatego, że bardzo łatwo narobić tam sporego gówna, co mnóstwo ludzi robi (chociaż jak się przekonałem to konsekwentne trzymanie się BEM, SMACSS i do tego LESS/SASS użyty sensownie (np. @media w klasie, nie w jakimś innym miejscu, nie na końcu pliku. Jeden plik = jedna klasa bazowa itp.) dają bardzo dobre efekty i nie robi się z tego straszny potworek). Jak pozostawiasz sporo rzeczy, które wyglądają jak fix do fixa robiony na szybko przez osobę początkującą to potem ktoś kto do tego siądzie nie będzie miał lekko, bo jakaś zmiana będzie pociągać za sobą konieczność zrobienia jeszcze kilku poprawek, które spowodują kolejne problemy itd.

Wojciech87 napisał(a):

To jak zrobić z tego jednego diva?

Opakować je divem = dodać dla nich element nadrzędny, który je w sobie zawiera, np.

<nav class="jakas_klasa_1">
	...zawartosc
</nav>
<div class="jakas_klasa_2">
	...zawartosc
</div>

zmieniasz na

<div class="jakas_klasa">
	<nav class="jakas_klasa_1">
		...zawartosc
	</nav>
	<div class="jakas_klasa_2">
		...zawartosc
	</div>
</div>

Dzięki czemu zamiast pozycjonować osobno dwa elementy pozycjonujesz jeden(jakas_klasa) i w nim układasz elementy. Jak dojdzie np. kolejny poziomy element to dodasz go w htmlu i naniesiesz style grafika, nie trzeba będzie również jemu ustawiać position: fixed, kombinować z pozycjonowaniem go itp.

Tak tylko pytanie jak dodać nadrzędnego diva do sklepu internetowego gdzie jest mnóstwo skryptów, modułów itd i nie ma jednego pliku jak przy prostych stronach gdzie w pliku index można spokojnie ustawić diva na początku i na zakończeniu dzięki czemu złapiemy wszystkie elementy.

Sorki, umknęło mi to ;) Powinieneś mieć jakiś dostęp do możliwości edycji szablonu, ale w takim wypadku to szkoda nerwów ;)
Ogólnie to żeby osiągnąć to co chcesz w CSSie to musisz odsunąć główną treść strony o wysokość nagłówka, używając marginesu bądź paddingu.

Tak dostęp do edycji szablonu mam dostęp (ogólnie do FTP) tylko pytanie gdzie to dodać skoro inny plik jest od strony glownej a inny od produktów a jeszcze inny od boxów i modułów. W sumie tylko plik style.css jest wspólny.

Tego Ci już nie podpowiem, bo w CMSach nie siedzę i nie wiem nawet co tam jest postawione.
Skoro przerobienie cssa jest dla Ciebie najszybsze to nie możesz - jak już pisałem - odsunąć od góry treści strony tak aby pasek menu jej nie zasłaniał?