[CSS] DIV lewy z IMG i prawy z MENU - responsywnie

0

Witam,

Proszę o pomoc.

Potrzebuję 2 DIV obok siebie, ale:

  • w lewym DIV mają być wyświetlane obrazki na całej szerokości DIV (rozciągać się i dostosowywać automatycznie swoją szerokość)
  • prawy DIV ma zawierać menu (załóżmy, że o stałej szerokości np. 300px (nie vw))

I teraz najważniejsze:

  • skalujemy okno przeglądarki (zmniejszamy je) to ten prawy DIV ma być widoczny możliwie jak najdłużej z lewym DIV w jednej linii (a nie wskakiwać od razu pod niego)
  • czyli lewy DIV ma automatycznie zmniejszać obrazki, ale prawy ma być nadal z prawej strony (nie pod nim) do momentu aż szerokość prawego DIV (założone 300px) będzie > od szerokości okna przeglądarki, wtedy ma wskoczyć na całą szerokość pod lewego DIV.

Wiem, że to dość skomplikowane, ale wierzę że ktoś z Was mi pomoże :)

Pozdrawiam

0

Użyj grida bootstrapa i ustaw po prostu odpowiednie klasy elementów dotyczące szerokości ekranu i tyle.

0

To nie załatwia sprawy, ponieważ zawsze będę miał po prawej menu.
A chcę aby ono zeszło na dół.

0

Może media query Cię zadowoli

1

https://jsfiddle.net/k24y8bm6/ - co myślisz o takim rozwiązaniu?

0
cerrato napisał(a):

https://jsfiddle.net/k24y8bm6/ - co myślisz o takim rozwiązaniu?

Myślę, że to dobra droga ale niestety nie rozwiązuje mojego głównego problemu. Mianowicie jak w pierwsza kolumnę wstawimy obrazek to powinien on skalować się (rozciągać) na całą szerokość kolumny.

1

No to już musisz sobie zrobić dopasowywanie obrazka do kolumny. Mechanizm układu masz zrobiony, tylko musisz pokombinować trochę z obrazkiem :P

2

Dobra, jeszcze trochę Ci pomogę :P
https://jsfiddle.net/kzdtchnf/ - czy teraz jest lepiej?

1

Tak! O to mi chodziło!

Dziękuję!

2
cerrato napisał(a):

Dobra, jeszcze trochę Ci pomogę :P
https://jsfiddle.net/kzdtchnf/ - czy teraz jest lepiej?

Prawie dobrze, ale sugeruję dopisać:

@media screen and (max-width: 600px){
#lewy {
  margin-right: 0px;
}
#prawy {
  width: 100%;
  }
}

Będzie się ładniej układać.

Tu prezentacja:
https://fiddle.jshell.net/1u8rkywq/1/show/

A tu pełen zapis:
https://jsfiddle.net/1u8rkywq/1/
(Ale z tym minipodlgądem coś tam cudują i nie wygląda w nim to poprawnie).

edit: W minipodglądzie też zaczęło wyglądać, chyba w keszu siedzi poprzednia wersja tego iframa i stąd brak reakcji na zmiany.

0

Dziękuję Panowie, jest świetnie.
Dobra robota.

0

Jeszcze zauważyłem jedną rzecz. Jak wstawimy w #lewy więcej niż 1 obrazek to #prawa schodzi pod spód.
Czyli jeżeli #lewy będzie na tyle wysoki/długi to menu i tak zejdzie na dół.

Można jeszcze jakoś ulepszyć ten kod na taką ewentualność?

1

Zrób swoją wersję na http://jsfiddle.net i podeślij link. Tak będzie nam łatwiej, poza tym będziemy widzieli to samo, co Ty.

0

Mega! Dzięki!

0

Panowie potrzebowałbym jeszcze 1 rzecz:

  • żeby Menu schodziło na dół jeżeli wysokość okna przeglądarki jest większa od jej szerokość

Proszę o pomoc :)

0

Dzięki za podpowiedź, ale nie wiem jak to zastosować żeby uzyskać zamierzony efekt w swoim przykładzie :(

1 użytkowników online, w tym zalogowanych: 0, gości: 1