Nadanie stylu dla listy

[jasiek07 0]

Witam, jestem zielony w html niestety, chcę wykonać przwijaną listę odnośników.

 

wykonałem cos takiego:

 

http://wklej.org/id/1360604/

 

chciałbym temu nadać jakiś wygląd czy ktoś poświęciłby trochę czasu na to?

Mniej więcej coś takiego jak na obrazku:

 

http://zapodaj.net/aa50ba241c333.png.html

 

wiadome ja uzyje swoich obrazków i nazw, chodzi mi o to żeby każdy odnośnik znajdował się w takim prostokącie i żeby były pomiędzy nimi podobne odstępy.

Pokazałby ktoś przykład jak to ogarnąć?

 

Pozdro!

[Macsch 122]

http://jsfiddle.net/4KCBs/

[jasiek07 0]

Dzięki wielkie za przykładzik, teraz o wiele łatwiej będzie mi działać jak już mam od czego zacząć

Pozdrawiam!

[Gość mariaczi]

Jeśli lista, to może tak: http://jsfiddle.net/vny88/

[jasiek07 0]

Dzięki wam za pomoc, generalnie coś już mi z tego wychodzi, jak narazie zrobiłem coś takiego:

 

http://jsfiddle.net/5rERB/

 

parę rzeczy jeszcze zmienię, natomiast mam pytanie, jak usunąć ten suwak z przeglądarki a żeby był wstawiony mój, powiedzmy coś na kształt podłużnego prostokątu szarego przesuwanego jak ten zwykły czyli z góry na dół, no i bez strzałek, poprostu sam suwak.

 

I odnośnie obrazków. Chcę umieścić obrazki oczywiście, natomiast przy każdym przycisku będzie inny obrazek. Mariaczi w twojej propozycji obrazek jest już w stylu a więc musiałbym w stylu definiować dla każdego przycisku oddzielny. Jak wstawić obrazek powiedzmy 40x40, tylko do kodu html do każdego przycisku inny. Wiadomo <img></img> ale nie wiem jak powinny być zdefiniowane parametry, aby ten obrazek był po lewej stronie wycentrowany no i mały padding dookoła + jakaś cieniutka kreska oddzielająca go od nazwy odsyłacza (coś jakby border-right). Domyślam się, że najlepiej zdefiniować w stylu klasę dla obrazka i potem przy wstawianiu obrazka do każdego diva (przycisku) uwzględnić tą klasę?

 

Sory, że zadaję takie prymitywne pytania, ale dosłownie zaczynam od zera, choć szybko łapię

[Macsch 122]

Jeżeli chodzi o scroll-bar przeglądarkowy to zależy od przeglądarki czy da uprawnienia do modyfikowania go (np. Firefox nie pozwala). Są rozwiązania CSS: http://stackoverflow.com/a/14150577/3027439 jak i możesz użyć jQuery: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Co do obrazków: http://jsfiddle.net/kP9Ba/ czy nawet http://jsfiddle.net/77AMj/

Edytowano Maj 14, 2014 przez Macsch (zobacz historię edycji)

[Misiek08 285]

http://jamesflorentino.github.io/nanoScrollerJS/

[jasiek07 0]

Dzięki wielkie za pomoc oraz scrollbara!

 

 

Macsch, jedno pytanie: w twojej drugiej propozycji, jak mogę sprawić aby bez względu na długość tekstu, obrazek zostawał w tym samym miejscu? Wygląda to bardzo estetycznie, natomiast wszystko psuje sytuacja, gdy obrazki są poprzesuwane ze względu na różne długości wyrazów obok nich.

 

 

No i z tym scrollbarem coś mi nie wychodzi, nie do końca rozumiem ten opis

[Macsch 122]

http://jsfiddle.net/4JyDr/

[Gość mariaczi]

@up: Jak autor zechce poukładać inaczej elementy listy, to będzie zmuszony edytować kod i usuwać br'ki ze źródła

[jasiek07 0]

Prawię rozwiązałem już mój problem w taki sposób:

 

http://jsfiddle.net/ENpUk/1/

 

natomiast jak sprawić aby każdy blok był "dopełniony" do końca? Bo teraz robią się "schodki" przy różnych długościach wyrazów.

Dzięki

[Gość mariaczi]

Np. http://jsfiddle.net/ENpUk/2/