[Vantrilio]

Mireczki potrzebuje zrobić cos takiego jak zdjeciu niżej, chcialbym zeby wszystko dopasowywalo się do ekranu tak zeby wypełniać go w 100% jedno zdjęcie główne jako background a te osobne kwadraty to poprostu odnosniki do innych podstron. Da się to zrobić w bootstrapie ? Rozumiem, że mogę podzielić na kolumny jeśli chodzi o szerokość ale jak podzielić to na wysokość ? Może mi ktoś jakoś pomóc? Dopiero ucze się kodowac

#webdev #webdesign

[emtei]

@Vantrilio: jednostki css: vh i vw
lub javascript
ewentualnie jeszcze flexbox ale nie wiem jak tam z wysokością

[Corrent]

@Vantrilio Da radę zrobić. Jeżeli jedna strona, to w pliku css pod .html daj w backgroundzie zdjecie (tak by się nie powielało), z kolei background-size: cover;.

Dzielisz stronę (w zależności jak chcesz divami lub sekcjami) na 2 częsci (, w których masz np:
W pierwszej:
Tutaj dajesz tekstTu masz linki
Drugą część dzielisz na 4 sekcje
Linki

Wysokości później uregulujesz marginami w css :)

[Vantrilio]

@Corrent:
coś probuje, ale narazie nie potrafie wrzucić dwóch zdjęć jednego pod drugim po prawej stronie i w sumie chcialbym zeby całośc dopasowywała się do wysokości a nie tylko szerokości ekranu

[Corrent]

@Vantrilio: Temu divowi/sekcji musisz nadać klasę, by odnosić się do niej w pliku css. Czyli nadaj sobie "col-lg-2 right-link" przykładowo.
Jak dodasz 2 zdjęcia do tego diva, to aby one się dobrze wyświetlały, musisz je ogarnąć w css.
.right-link img {
float:left;
}

Warto też nadać tym zdjęciom klasę img-responsvie. Wtedy będą proporcjonalnie zmniejszane. Jeżeli wielkość tego diva będzie świrować, to w ostateczności możesz ogarnąć go procentowo w css, ale kłóci

[Greg36]

@Vantrilio: Tak to wygląda z użyciem flexboxa:

http://codepen.io/anon/pen/vLEdgL

[Vantrilio]

@Greg36: a nie ma lipy jeśli chodzi o responsywność ?

[Greg36]

@Vantrilio: Sobie zmniejsz rozmiar i zobacz, divy zostają w proporcjach niezależnie od rozdzielczości. Żeby to było responsywne to musisz poprzekładać elementy - tak aby były jeden pod drugim na niższych rozdzielczościach; tak więc wystarczy tylko dodać wszystkie reguły flexboxa dopiero przy większej szerokości ekranu.

Jak chcesz się nauczyć więcej na temat flexboxa to:

- http://flexboxfroggy.com/ zaskakująco dobra gra
- http://tympanus.net/codrops/css_reference/flexbox/

I ściągawki:
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Wystarczy coś takiego:
http://codepen.io/anon/pen/KVwQvR

[karbz0ne]

@Vantrilio: taguj #webdevhelp