[HTML][CSS]Jak ustawić element z wartością fixed? Opcje

[Generic]

Witam. Mam pewien problem z ustawieniem elementu (zaznaczony czerwonym kolorem na obrazku poniżej) dla którego jest przypisana wartość fixed. Zrobiłem stronę w rozdzielczości 920px i cała zawartość jest na środku. Problem w tym że po prawej stronie na samym końcu ma być element, który ma wartość fixed i problem w tym że ucieka aż do samego końca, do paska przewijania. Jak zrobić aby element był na samym końcu prawej strony, ale trzymał się rozdzielczości 920px, która jest ustawiona w section? Oczywiście element fixed znajduje się w section i nie wiem dlaczego ignoruje podaną szerokość przypisaną dla section.

Pomarańczową przerywaną linią zaznaczyłem granice strony.



Ten post edytował Generic 27.07.2015, 22:33:37

[toaspzoo]

Bo fixed ma to do siebie, że się niczego "nie trzyma". Spróbuj nadać section position:relative;

[Generic]

Bo fixed ma to do siebie, że się niczego "nie trzyma". Spróbuj nadać section position:relative;

niestety nie pomaga

[toaspzoo]

Wrzucisz na jsfiddle?

[Generic]

Wrzucisz na jsfiddle?

tak to wygląda: http://jsfiddle.net/hgf1rxac/1/

[thek]

Jeśli się clear oraz float robi to chyba najpierw wypada wiedzieć jak to działa Jeśli tam ma po prostu być i przewijać się z całym section, to masz już rozwiązane.

[Generic]

Jeśli się clear oraz float robi to chyba najpierw wypada wiedzieć jak to działa Jeśli tam ma po prostu być i przewijać się z całym section, to masz już rozwiązane.

Nie mam rozwiązanego bo chce aby element któremu jest przypisana wartość fixed znajdował sie na zielonym tle czyli w section, a póki co ucieka do prawej az do konca prawej strony przeglądarki i jest przy pasku przewijania.

[trueblue]

http://jsfiddle.net/hgf1rxac/5/

[Generic]

http://jsfiddle.net/hgf1rxac/5/

czerwony panel musi być na zielonym tle natomiast ma on sie znajdować po prawej stronie, a ty wyrzuciłeś go z zielonego tła.

[thek]

To o czym wspomniałem to fakt, byś przemyślał, czy jest tam sens fixed robić. Wywal position, right i clear a wstaw float: right

[trueblue]

Z Twojego opisu to nie wynika. Ja zrozumiałem, że ma lewą krawędzią być styczny z obszarem (na rysunku pomarańczową kreską).
Ale skoro ma być wewnątrz, to wystarczy przesunąć go o jego szerokość, tu 50px, czyli margin-left na 200-50.

[Generic]

To o czym wspomniałem to fakt, byś przemyślał, czy jest tam sens fixed robić. Wywal position, right i clear a wstaw float: right

Niestety fixed to priorytet gdyż musi on być cały czas widoczny przy przewijaniu strony i nie przewijać sie. Zrobiłem to jeszcze w ten sposób: http://jsfiddle.net/hgf1rxac/6/ lecz zapewe to nie jest dobre rozwiązanie.

[thek]

Fixed samo w sobie pozycjonuje się względem okna/viewportu, a nie rodzica i tego nie zmienisz :/ Można hacki pewne stosować, ale jednym z tych pewniejszych jest to,co zaprezentował @trueblue. Centrujesz z użyciem left: 50% element i marginesem ustawiasz tam, gdzie chcesz. W większości przypadków ten margines to połowa szerokości rodzica pomniejszona o szerokość samego elementu. I tu jest właśnie problem, bo trzeba z góry tę szerokość znać albo na bieżąco z użyciem JS obliczać. Musisz jednak jedną rzecz pamiętać... Taki element wrzucony jako pierwszy jest wyłączony z hierarchii elementów i zakryje elementy będące za nim. Z kolei wstawiony jako dalszy ustawia się poniżej elementów blokowych przed nim.

[Generic]

Fixed samo w sobie pozycjonuje się względem okna/viewportu, a nie rodzica i tego nie zmienisz :/ Można hacki pewne stosować, ale jednym z tych pewniejszych jest to,co zaprezentował @trueblue. Centrujesz z użyciem left: 50% element i marginesem ustawiasz tam, gdzie chcesz. W większości przypadków ten margines to połowa szerokości rodzica pomniejszona o szerokość samego elementu. I tu jest właśnie problem, bo trzeba z góry tę szerokość znać albo na bieżąco z użyciem JS obliczać. Musisz jednak jedną rzecz pamiętać... Taki element wrzucony jako pierwszy jest wyłączony z hierarchii elementów i zakryje elementy będące za nim. Z kolei wstawiony jako dalszy ustawia się poniżej elementów blokowych przed nim.

na pewno istnieje jakieś logiczne rozwiązanie. zobacz że sam facebook podczas scroolowania trzyma zawsze dwie reklamy które się nie przewjają.

[trueblue]

Logiczne rozwiązania:
Na zewnątrz obszaru "920": http://jsfiddle.net/hgf1rxac/7/
Wewnątrz obszaru "920": http://jsfiddle.net/hgf1rxac/8/
+ to, o czym pisał thek, tj. użycie JS.

[Generic]

Logiczne rozwiązania:
Na zewnątrz obszaru "920": http://jsfiddle.net/hgf1rxac/7/
Wewnątrz obszaru "920": http://jsfiddle.net/hgf1rxac/8/
+ to, o czym pisał thek, tj. użycie JS.

nie rozumiem jaki wy tu błąd widzicie. skoro szerokość rodzica jest niezmienna oraz szerokość samego elementu to po co obliczać to za każdym razem w js? Nie wiem czy wiecie ale ta strona na każdej rozdzielczości wygląda tak samo i nic się nie powiększa i nie zmniejsza.

@edit dodatkowo nie rozumiem jaki cel ma centrowanie tego skoro i tak dodatkowo dopisaliście margin-left. Nie można po prostu dać same margin left z większą wartością? Być może pisząc ten kod mieliście na myśli że szerokość będzie sie dopasowywać do rozmiaru okna jednak nie to będzie strona o ustalonym rozmiarze i element nie musi się znajdować kiedy użytkownik postanowi sobie zmniejszyć okno bo to spowodowałoby zakrycie innych elementów na stronie.

Ten post edytował Generic 29.07.2015, 23:49:46

[trueblue]

nie rozumiem jaki wy tu błąd widzicie. skoro szerokość rodzica jest niezmienna oraz szerokość samego elementu to po co obliczać to za każdym razem w js? Nie wiem czy wiecie ale ta strona na każdej rozdzielczości wygląda tak samo i nic się nie powiększa i nie zmniejsza.

Jaki błąd?
JS? Bo można odnieść wrażenie, że rozwiązania, które dostajesz nie satysfakcjonują Cię, dodatkowo wspominasz o FB.

@edit dodatkowo nie rozumiem jaki cel ma centrowanie tego skoro i tak dodatkowo dopisaliście margin-left. Nie można po prostu dać same margin left z większą wartością?

Zrobiłem stronę w rozdzielczości 920px i cała zawartość jest na środku. Problem w tym że po prawej stronie na samym końcu ma być element

Być może pisząc ten kod mieliście na myśli że szerokość będzie sie dopasowywać do rozmiaru okna jednak nie to będzie strona o ustalonym rozmiarze i element nie musi się znajdować kiedy użytkownik postanowi sobie zmniejszyć okno bo to spowodowałoby zakrycie innych elementów na stronie.

Nie miałem tego na myśli. Kod w JSFiddle, jeśli dobrze rozumiem spełnia Twoje wymagania, choć druga część powyższej wypowiedzi brzmi mgliście.

Szerokość kontentu nie dopasowuje się do okna, ale okno może zmieniać szerokość, a co za tym idzie nie możesz na sztywno dać margin-left, bo element będzie w stałej odległości od lewej krawędzi (przy zmianie szerokości raz będzie przykrywał kontent, innym razem będzie poza).

Ten post edytował trueblue 30.07.2015, 07:29:52

[Generic]

Jaki błąd?
JS? Bo można odnieść wrażenie, że rozwiązania, które dostajesz nie satysfakcjonują Cię, dodatkowo wspominasz o FB.





Nie miałem tego na myśli. Kod w JSFiddle, jeśli dobrze rozumiem spełnia Twoje wymagania, choć druga część powyższej wypowiedzi brzmi mgliście.

Szerokość kontentu nie dopasowuje się do okna, ale okno może zmieniać szerokość, a co za tym idzie nie możesz na sztywno dać margin-left, bo element będzie w stałej odległości od lewej krawędzi (przy zmianie szerokości raz będzie przykrywał kontent, innym razem będzie poza).

nie że niesatysfakcjonują mnie po prostu nie są takie jakie powinny. w twoich kodach problemem jest to że gdy zmniejsza sie okno przeglądarki element zaczyna zasłaniać inne części a jak się jeszcze bardziej zmniejszy okno przeglądarki to element znika i nigdzie go nie ma. a żeby było w porządku powinno być tak że element trzyma stałą odległość od innych elementów i podczas zmniejszania okna trzeba przesunac pasek przewijania żeby go zobaczyć. zoobrazowałem problem poniżej w obrazku.



Czy istnieje jakiś sposób żeby wyłączyć przesuwanie się elementu kiedy okno przeglądarki zmniejsza sie tak aby cały czas był na swojej pozycji?