[elektron235]

Cześć,

Jestem nowy w programowaniu webowym. Sporo już udało mi się zrobić z pomocą stackoverflow i bezpłatnych tutoriali.
Doszedłem do momentu dopasowywania strony pod każdą rozdzielczość.

Mam diva w którym jest rysunek który chce kolorować. Pod nim buttony (dropdown buttony, wszystkie tej samej klasy, umieszczone w tym samym divie (albo w divie zagnieżdżonym w poprzednim, obojętnie)) które jak najadę to wysuwa się paleta do malowania poszczególnych elementów mojego rysunku.

I teraz przechodzimy do problemu. Sam rysunek i obszar w którym jest rysunek (szare tło).skaluje się dzięki temu że marginesy podałem w %, rysunek też pięknie się zmniejsza, zwiększa.
Niestety z buttonami nie jest tak łatwo. Podawanie ich szerokości w procentach przynosi zupełnie inny efekt niż bym chciał. 100% to rozmiar taki który pomieści tekst w buttonie, a 20% to 20% tego co potrzeba. A chciałbym żeby zawsze każdy wypełniał 20% szerokości diva (jest ich 5, więc w sumie powinny wypełnić całość).
Kiedy podaję na sztywno wartość 150px wszystko jest fajnie, bo akurat tyle potrzebuję żeby na full screenie wszystko działało, ale jak trochę zmniejszę okno to zaczynają się przestawiać. Nie są już w jednej lini tylko 2, 3, 4, 5 w zależności jak zmniejszę okno.

Czy da się to rozwiązać w CSS? Czy konieczne jest już napisanie jakiegoś skryptu w js/query? Jeśli tak, to czy może ma ktoś coś podobnego?

Na prawdę googlowałem sporo, ale trafiam głównie na skalowanie rysunków, albo na problemy zupełnie nie podobne do mojego, ale może po prostu źle szukam, bo nie znam odpowiedniej terminologii.

Dziękuję za każdą pomoc i wyrozumiałość dla początkującego :)

#programowanie, #css, #html, #html5 może #jquery #javascript

[k.....n]

@elektron235: uwaga podaję hasło: bootstrap
IMO nie ma sensu tego robić w czystym css
a jaśli chcesz koniecznie to media queries

[elektron235]

bootstrap

@kuskoman:

hmm może faktycznie. ale uczę się i chciałbym też takie rzeczy umieć w css. myślałem że problem jest prosty i jest jakieś rozwiązanie, ale jeśli nie ma (albo nie jest ono proste to może faktycznie spróbuję boostrapa)

[k.....n]

@elektron235: ale nauczysz się tego i nigdy nie użyjesz ( ͡° ͜ʖ ͡°)
no chyba, że będziesz tworzył samemu framework
przynajmniej spróbuj bootstrapa, to nie będzie Ci się chciało pisać w czystym css
no i myślę, nie ma sensu tracić czasu na właśnie takie rzeczy w czystym css, lepiej w tym czasie zapoznać się z SASSem lub SCSS, albo właśnie z frameworkami

[elektron235]

@kuskoman:
dzięki :) właśnie się z boostrapem zapoznaję. tutorial na w3schools dopadłem i zaraz się dowiem co i jak. faktycznie jeśli, to jest technologia której się teraz używa to warto się z tym zapoznać.

pytanie tylko, czy jak mam już 90% stronki napisane to czy wystarczy zaincludować boostrapa i zacząć korzystać z jego dobrodziejstw, czy czeka mnie przebudowa całej strony pod to?
takie lamerskie pytanie, dla pewności :)

[k.....n]

@elektron235: możesz tylko dopisać coś pod to, ale IMO nie ma to sensu
napisz od nowa
no i łap: https://getbootstrap.com/components/#navbar
komponenty bootstrapa- możesz używać w swoich projektach, przerabiać, etc.
no i jeszcze tu: https://getbootstrap.com/css/#buttons

[Vitin]

@elektron235: w czystym css musiałbyś ustawić Button na 100% width, który jest w x% divie, a do tego użyć font size w vw a nie px. Chyba że buttony mogą układać się pod sobą zamiast być w jednej linii, wtedy display: block-inline chyba powinno pomóc

[elektron235]

@Vitin: to vw, zamiast px, sporo dało (jeszcze nie w pełni to co chcę, ale już prawie). Button ustawiłem na 100% width i teraz buttony trochę za małe (5 buttonów nie wypełnia całego diva). Diva w którym są buttony mam ustawionego też w procentach, ale może powinienem jakąś inną wartość? Póki co jest 40% żeby wypełniał właśnie taką część ekranu.

[elektron235]

@Vitin: ok, mam to co chciałem :-) na powyższe pytanie (jak wypełnić 100% głównego diva linią buttonów) i tak możesz odpowiedzieć w wolnej chwili, bo ja sobie poradziłem metodami partyzanckimi czyli doborem odpowiedniego paddingu (w vw) i czcionki (w vw). Ale wyświetla się poprawnie.

A @kuskoman dziękuję za wskazanie interesującej technologii którą już zaczynam ogarniać :)

Bardzo dziękuję Wam za pomoc. Wykop > stackoverflow hehe ;-)

[Vitin]

@elektron235: jestem w tym momencie na telefonie, ale float: left może pomóc.

Sory za spacje zamiast tabów:
http://jsfiddle.net/x1badgjq/1/

[bonus]

@elektron235: Nie używaj bootstrapa największy rak webdevu ( ͡° ͜ʖ ͡°) Jakieś lekkie frameworki, albo gridy wystarczą. http://getbase.org/

[k.....n]

największy rak webdevu

@bonus:

gdy nie umiesz go używać

[bonus]

@kuskoman: Jak nie umiesz CSS to używasz Boostrapa czyli nic nie umiesz, każdy szanujący się frontendowiec powie, że bootstrap to kobyła i w większości projektów gdy go zbadasz okazuje się, że 95% reguł jest nieużywane.

[k.....n]

@bonus: ale po co Ci cały? pobierasz to co ci potrzeba i kompilujesz
edit1: a poza tym w czym przeszkadza, że większość reguł jest nieużywane? nie użyjesz tego ty, użyje to inna strona
edit2: a jak nie umiesz css, to wysiądziesz i tak przy pierwszym napotkanym problemie
edit3: da się nie umieć css korzystając z bootstrapa? ( ͡º ͜ʖ͡º)

[k.....n]

w większości projektów gdy go zbadasz okazuje się, że 95% reguł jest nieużywane.

@bonus: ten argument jest inwalidą, jak pisałem

gdy nie umiesz go używać

to nie wina frameworka, że ktoś sobie z nim nie radzi