Skocz do zawartości


 

Zdjęcie

Nadanie stylu dla listy

Nadanie stylu dla listy css wyglad

  • Proszę się zalogować aby odpowiedzieć
11 odpowiedzi na ten temat

Nadanie stylu dla listy

#1 jasiek07

jasiek07

    Stały użytkownik

  • Użytkownicy
  • PipPipPipPipPip
  • 207 postów

Napisany 13 maj 2014 - 16:20

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/a...41c333.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!


  • 0

#2 Macsch

Macsch

    Stały użytkownik

  • Użytkownicy
  • PipPipPipPipPip
  • 291 postów

Napisany 13 maj 2014 - 16:33

http://jsfiddle.net/4KCBs/
  • 6

#3 jasiek07

jasiek07

    Stały użytkownik

  • Użytkownicy
  • PipPipPipPipPip
  • 207 postów

Napisany 13 maj 2014 - 16:56

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

Pozdrawiam!


  • 0

#4 Gość_mariaczi_*

Gość_mariaczi_*
  • Goście

Napisany 13 maj 2014 - 17:41

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

#5 jasiek07

jasiek07

    Stały użytkownik

  • Użytkownicy
  • PipPipPipPipPip
  • 207 postów

Napisany 13 maj 2014 - 18:32

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ę


  • 0

#6 Macsch

Macsch

    Stały użytkownik

  • Użytkownicy
  • PipPipPipPipPip
  • 291 postów

Napisany 14 maj 2014 - 22:55

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...4150577/3027439 jak i możesz użyć jQuery: http://manos.malihu...._scrollbar.html

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


Edytowany przez Macsch, 14 maj 2014 - 23:02.

  • 6

#7 Misiek08

Misiek08

    Weteran WHT

  • WHT Pro
  • PipPipPipPipPipPipPipPip
  • 1157 postów

Napisany 14 maj 2014 - 23:57

http://jamesflorenti...nanoScrollerJS/
  • 6

#8 jasiek07

jasiek07

    Stały użytkownik

  • Użytkownicy
  • PipPipPipPipPip
  • 207 postów

Napisany 15 maj 2014 - 02:16

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


  • 0

#9 Macsch

Macsch

    Stały użytkownik

  • Użytkownicy
  • PipPipPipPipPip
  • 291 postów

Napisany 15 maj 2014 - 13:07

http://jsfiddle.net/4JyDr/


  • 6

#10 Gość_mariaczi_*

Gość_mariaczi_*
  • Goście

Napisany 15 maj 2014 - 13:12

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

#11 jasiek07

jasiek07

    Stały użytkownik

  • Użytkownicy
  • PipPipPipPipPip
  • 207 postów

Napisany 15 maj 2014 - 13:53

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


  • 0

#12 Gość_mariaczi_*

Gość_mariaczi_*
  • Goście

Napisany 15 maj 2014 - 13:56

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






Także otagowane jednym lub więcej z tych słów kluczowych: css, wyglad

0 użytkowników czyta ten temat

0 użytkowników, 0 gości, 0 anonimowych użytkowników