Forum Gry Hobby Sprzęt Rozmawiamy Archiwum Regulamin

Forum: CSS - zmiana liczby kolumn

04.05.2014 22:35
1
tokamil100
18
Legionista

CSS - zmiana liczby kolumn

Ogarnia ktoś z was może CSS'a tak by mi powiedzieć, co zmienić w kodzie, by na tej stronie: http://trojmiejski.tumblr.com/, mieć 3 rzędy kolumn a nie 4? Kminię, kminię i nie mogę do tego dojść :/

05.05.2014 00:37
kaczmen
2
odpowiedz
kaczmen
98
GINOBILI!!!

w cssie za szerokość i ilość kolumn odpowiada

.no_sidebar article ‹;
width: 23%;
margin: 1%;
›;

suma daje 25%, czyli 1/4, prawdopodobnie trzeba to zmienić na wartość z width: 31.3333% (+ margin po 1% z każdej strony daje 33,(3)% czyli 1/3 )

strona dzięki responsive design przechodzi w trzykolumnową dla okien przeglądarki o szerokości poniżej 1000px

tyle jest w cssie, ile w tym miesza java scriptu do uzyskania płynnie zmnieniającej się liczby kolumn to nie wiem, bo nigdy sam takich rzeczy nie robiłem, a dokładniej przyglądać się niezbyt mam czas...

05.05.2014 20:56
3
odpowiedz
tokamil100
18
Legionista

Dzięki za pomysł! Po zmianach zaproponowanych przez ciebie jest prawie dobrze, ale na dużym ekranie teraz te kolumny nie układają się do środka: http://scr.hu/0dcl/y68cz

Hmm, pomysł, jak to poprawić? :)

05.05.2014 21:12
4
odpowiedz
Hakim
247
Senator

Układają się, układają. Dajesz po 31.33% zamiast 23% i wówczas będzie prawie idealnie. Prawie, bo do pełni szczęścia zabraknie te .01% marginesu brakującego by obszar obejmujący kolumny został wypełniony w 100% szerokości.

A nie, wróć, na bardzo dużych rozdziałkach (full hd) rzeczywiście jest do nie do końca idealnie.
Zwracam honor.

ed2.
Wróć, wszystko gra. Tylko obrazki skalują się tylko do pewnej wielkości. Szukałbym gdzieś limitu skalowania tych obrazków. Bo jednak kolumny się rozkładają dobrze, z kodem podanym przez kaczmena, tylko tworzy się pusty obszar po prawej tych obrazków.

05.05.2014 21:14
kaczmen
5
odpowiedz
kaczmen
98
GINOBILI!!!

na samej stronie zmieniłeś na 31%, białe pole po prawej to ten 1 brakujący procent...

edit.
w tym przypadku za skalowanie obrazków tylko do 500px (ich rozdzielczość) odpowiada
iframe, img, embed, object, video ‹;;;
max-width: 100%;
›;;; (pokazuje mi, że to linia 400 kodu...)

można to zmienić na width: 100%, żeby rozciągnąć obrazki, ale szczerze moim zdaniem źle to wygląda

mógłbyś powyżej 1500 px szerokości okna znowu się przerzucać na układ 4 kolumnowy i liczyć, że tylu ludzi nie ma rozdzielczości powyżej 2000px

inne rozwiązanie - dać na głównym kontenerze content max-width: 1500px i margin: 0 auto; i dla okien powyżej 1500px będziesz miał kolumnę 1500 px pośrodku z równymi marginesami z obu stron...

05.05.2014 21:57
6
odpowiedz
tokamil100
18
Legionista

dałem content max-width: 1500px i margin: 0 auto i jest okej. Dzięki wielkie!

Forum: CSS - zmiana liczby kolumn