Rozmieszczanie obrazków względem kontrolek

Witam. Jaką techniką najlepiej utworzyć taki layout?
Czy waszym zdaniem najlepiej zastosować tu siatkę grid?
Jaką metodę byście zastosowali, żeby było optymalnie, responsywnie i wydajnie?

https://elm-lang.org/

Zależy jak te obrazki się mają zachować na innych rozdzielczościach.

Jeśli otworzysz stronę na mniejszym urządzeniu, i mają zostać w podobnej odległości od viewportu, to użyj position: absolute. Jeśli mają zostać w podobnej odległości względem elementów UI (kontrolki, przycisku, pola do wpisywania), to użyć pozycjonowania statycznego, flexbox lub grid.

Muszą być responsywne. Osobiście zastosował być flexbox czy grid?
Tutaj widok na mobile:
https://xd.adobe.com/view/0a8fbc97-560d-4f0f-9a74-66a413aa54f4-5fdc/screen/60941554-22b3-4e50-a6b3-6485758e6c41

Mateusz T napisał(a):

Muszą być responsywne.

Muszą być responsywne, ale jak? Nie opisałeś nic.

Mają się trzymać viewportu czy elementów UI? Czy może jeszcze czegoś innego. Jest jeszcze opcja, że po prostu nie wiesz jak one się mają zachować i przychodzisz na forum z pytaniem "Zrób tak, żeby było dobrze".

Zadajesz pytanie:

Jaką techniką najlepiej utworzyć taki layout?

Ale wybór techniki zależy od tego co właściwie chcesz osiągnąć. Albo wiesz, tylko nam nie mówisz; albo nie wiesz i musimy Ci móc to ustalić - jak to ustalimy dokładnie co ta strona ma robić i jak się zachowywać, wtedy należy dobrać technikę pod UI.

Mateusz T napisał(a):

Tutaj widok na mobile:
https://xd.adobe.com/view/0a8fbc97-560d-4f0f-9a74-66a413aa54f4-5fdc/screen/60941554-22b3-4e50-a6b3-6485758e6c41

No to podałeś dwa, ale nie wartości między nimi. Co ma się stać jak zacznę zmniejszać lub zwiększać okno przeglądarki?

Pomijając, że graficznie ten projekt to jakiś totalny roz...dziel. Tu nic nie trzyma się linii... ale być może taka była wizja artysty więc załóżmy, że tak musi być.

Jest to banalny układ strony z łatwym przejściem do wersji mobilnej dlatego zrobiłbym to w czystym CSS + HTML bez cudowania z czymkolwiek dodatkowym.
Może na slider bym wykorzystał jakiś dynamicznie doczytywany "swipper"...
Wszystko da się zrobić nawet bez grida chyba, że na siłę dla sekcji newsów i tej sekcji z zdjęciami/kafelkami.

Weź po prostu spróbuj to zakodować, a potem baw się żaluzjami.
https://giphy.com/gifs/frustrated-annoyed-programming-yYSSBtDgbbRzq
Tak wszyscy na frontendzie robią.

Co do tego konkretnego layoutu, to ciężko powiedzieć, bo nie widać, jak ma się zachowywać w różnych rozmiarach.
Ja tu na pierwszy rzut oka widzę, że ten layout wizualnie można podzielić na 2 (góra, dół). I zarówno górę jak i dół można zrobić jako kontenery flexowe z pewnym wyrównaniem ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ )

Muszą być responsywne. Osobiście zastosował być flexbox czy grid?

wg mnie zbyt nierówne jak na grid, ale kto wie.

Eksportujesz z projektu te dwa obrazki jako całość, tworzysz na pozostałe sekcje flexboxa i problem z głowy, pora na CS'a :D

Xarviel napisał(a):

Eksportujesz z projektu te dwa obrazki jako całość, tworzysz na pozostałe sekcje flexboxa i problem z głowy, pora na CS'a :D

Nie no litości!!! Nie należy tak robić. Może 20 lat temu to by przeszło ale dzisiaj byłby to przejaw skrajnego partactwa.

1. A co jak po kliknięciu w obrazem będzie trzeba dodać jego powiększenie albo link do dalszej podstrony.
2. A co jak będziesz chciał zrobić różne tryb strony z tłem jasnym lub ciemnym? Zrobisz go w PNG?
3. A co jak będziesz chciał podmienić tylko jeden obrazek? Będziesz musiał ekstra odpalać program graficzny żeby przygotować wszystkie wersje obrazka?
4. I co z serwowaniem obrazków w optymalnej rozdzielczości?

Należy zrobić jeden kontener i w nim odpowiednio ułożyć te dwa zdjęcia. Cały kontener dalej traktujesz jako jeden element.

katakrowa napisał(a):

Xarviel napisał(a):

Eksportujesz z projektu te dwa obrazki jako całość, tworzysz na pozostałe sekcje flexboxa i problem z głowy, pora na CS'a :D

Nie no litości!!! Nie należy tak robić. Może 20 lat temu to by przeszło ale dzisiaj byłby to przejaw skrajnego partactwa.

1. A co jak po kliknięciu w obrazem będzie trzeba dodać jego powiększenie albo link do dalszej podstrony.
2. A co jak będziesz chciał zrobić różne tryb strony z tłem jasnym lub ciemnym? Zrobisz go w PNG?
3. A co jak będziesz chciał podmienić tylko jeden obrazek? Będziesz musiał ekstra odpalać program graficzny żeby przygotować wszystkie wersje obrazka?
4. I co z serwowaniem obrazków w optymalnej rozdzielczości?

Należy zrobić jeden kontener i w nim odpowiednio ułożyć te dwa zdjęcia. Cały kontener dalej traktujesz jako jeden element.

katakrowa radzisz zrobić to flexem czy gridem?

Mateusz T napisał(a):

katakrowa radzisz zrobić to flexem czy gridem?

Tak jak napisałem wcześniej. Ja bym grida użył tylko do sekcji "FAKTY O NOWYM BMW iX" żeby nie walczyć z potencjalnie różnymi wysokościami poszczególnych "itemów"...
Być może jeszcze do tej sekcji z pięcioma zdjęciami. Choć rozmiary są tam dobrane tak fikuśnie, że nie wiem czy nie łatwiej by mi było porobić zwykłym calc().
O ile dla szerokości "desktop" byłoby łatwo, mimo że trzeba by to prezentować na niepotrzebnie nadmiarowej ilości kolumn, to nie wiadomo co ma być w rozdzielczościach pośrednich więc może się okazać, że lepiej i łatwiej sterować rozmiarami każdego elementu osobno i ja pewnie tak bym zrobił bo z dodawaniem, odejmowaniem i tabliczką mnożenia do 100 nie mam problemów :-)
Do pozostałej części układu div'y są w zupełności wystarczające.

A jeśli chodzi o te kontenery z jak najlepiej rozmieścić w nich obrazki?

ja bym to zrobił na flex, używając align-self do wyrównania.

Mateusz T napisał(a):

A jeśli chodzi o te kontenery z jak najlepiej rozmieścić w nich obrazki?

Mówię Ci, że to wszystko zależy od tego jak te obrazki mają się zachowywać, kiedy zmieniasz rozmiar okna przeglądarki.

Moim zdaniem, jak się dobrze domyślam tego co chcesz zrobić (Bo nie powiedziałeś, więc trzeba się domyślić) tak:

• dwa wiersze, np. 2x <div> jeden wiersz (dwa obrazki i kontrolki w pierwszy, dwa obrazki i kontrolki w drugim)
• W ramach jednego wiersza dwa podkontenery, i wiersz powinien być display:flex (żeby ustawić dwa podkontenery obok siebie, sąsiadująco)
  • w jednym podkontenerze umieśc statycznym pozycjonowaniu normalnie (bez dodatkowych styli) kontrolki i tekst
  • w drugim podkontenerze umieść dwa obrazki <img>:
    i teraz się pojawia pytanie czy te obrazki mogą się na siebie nachodzić (taki efekt) czy nie mają, bo mają być poglądowe
    • jeśli mają na siebie nachodzić to użyj w obrazkach position:absolute nadając odpowiednie top/left oraz width/height procentowe
    • jeśli mają na siebie nie nachodzić, to pewnie zrobić zeby pod kontener też był display:flex i ustawić odpowiednie align-items oraz/i justify-content żeby je odpowiednio ułożyć

LukeJL napisał(a):

ja bym to zrobił na flex, używając align-self do wyrównania.

LukeJL tylko jak umieścić ten img w lewym dolnym rogu?
Próbowałem już wszsytkie opcje align-self

Mateusz T napisał(a):

LukeJL napisał(a):

ja bym to zrobił na flex, używając align-self do wyrównania.

LukeJL tylko jak umieścić ten img w lewym dolnym rogu?
Próbowałem już wszsytkie opcje align-self

No za ciebie nie zrobię.

Jeśli trudno ci poruszać się we flex, to też jest o tym masę materiałów. Choćby to, co wrzuciłem:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
albo nauka flex w formie gry w żabę:
https://flexboxfroggy.com/
no i MDN

Ale generalnie swoje trzeba odcierpieć i pokombinować, popróbować różnych opcji, pobłądzić. To zakumasz o co chodzi. Im dłużej trwa ta dyskusja, to coraz mocniej mam wrażenie, że chcesz, żeby ktoś to za ciebie zrobił.