Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Clip + scroll poziomy
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
husky83
Zawsze wolałem stronę programową od wizualnej.. Ale przyszedł czas na css, żeby to coś ładnie wyglądało winksmiley.jpg

Do rzeczy..

  1. <div id=photo_list>
  2. <div class=photo_thumbs>
  3. <img src=1><img src=2> (...)
  4. </div>
  5. </div>

Czyli wiadomo o co chodzi - lista zdjęć (miniaturek). Nie wiadomo ile ich jest...

Do tego css:

  1. #photo_list{
  2. clip:rect(0px, 730px, 100px, 0px);
  3. height:100px;
  4. width:730px;
  5. overflow:scroll;
  6. position:absolute;
  7. }
  8.  
  9. .photo_thumbs{
  10. height:100px;
  11.  
  12. /*width:5000px;*/
  13. }

I.. no właśnie - przewijanie poziome.. Udało mi się już wymusić, żeby pojawiał się scroll poziomy, jednak problem jest jeden...
Po zakończeniu widocznej linii kolejne zdjęcia są (już niewidoczne) wyświetlane poniżej, zamiast dalej w prawo, aby móc przewijać...
Póki co jedyne co działa, to to co jest zakomentowane - w klasie photo_thumbs kod width:5000px;. Ale nigdy nie wiadomo jaka będzie szerokość! Teoretycznie można to zrobić przez javascript, licząc szerokość wszystkich obrazków (i ich ramek itd), ale czy to ma sens? Na pewno da się to zrobić w CSS, ale nie wiem jak :/
Próbowałem dodać do każdego obrazka 'float:left', ale bez rezultatu...
Powiem wprost:
POMOCY exclamation.gif

starkwind
nadal dla photo_thumbs

  1. width: np. 500px;
  2. overflow: auto;


po przekroczeniu obszaru 500px powinien pojawić się scroll, nie wiem czy obrazki nie będą przeskakiwać na dół ale jak by cos takiego miało miejsce spróbuj wtedy float: left dla img
erix
Podejrzewam, że gryzie się to z clipem... Tak nawiasem, po co Ci on, skoro masz overflow?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.