Skocz do zawartości
jasiek07

Nadanie stylu dla listy

Polecane posty

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!

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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

Pozdrawiam!

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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ę

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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 przez Macsch (zobacz historię edycji)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
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 :)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się


×