html! ustawienie divów względem siebie

pytanie zadane 16 listopada 2015 w HTML i CSS przez Dragonet.17 Pasjonat (19,630 p.)

Witam, oto sytuacja poglądowa:
http://shoxteam.net/img/f87e2e.png

Pomimo wielu prób i jak widać braku odpowiedniej wiedzy, chciałbym uzyskać efekt, gdzie podczas zmiany szerokości okna "czerwony" div przesuwa się w kierunku diva z napisem, a gdy będzie dostaecznie blisko, zmniejszy swoją szerokośc ( nie przeskoczy do kolejnej linii), i zwiększy wysokość, natomiast przyciski będą ustawiały się kolejno jeden pod drugim.

Pytanie jakie właściwości muszę nadać, aby uzyskać porządany rezultat.
Z góry dziękuję ogarnietym osobom za odpowiedź.

Tutaj screen, zastosowane na stronie, z position absolute, gdzie divy zachodzą na siebie.

http://shoxteam.net/img/45df9f.png

3 odpowiedzi

odpowiedź 16 listopada 2015 przez Comandeer Guru (600,810 p.)

odpowiedź 16 listopada 2015 przez makoso Mądrala (7,380 p.)

trzeba chyba to w js/jq opakować aby sobie przeliczał przy zmianie okna przeglądarki, wystarczy pobrać szerokość czarnego, czerwonego i szerokość diva który je trzyma razem i jeżeli suma czerwonego i czarnego jest za duża to stawić czarwonego na maksymalny-czarny a jeżeli czerwnoy osiągnął maksymalny rozmiar bo np nie chcesz większego to dać mu margin right równy maksymalny-czarny+20 to 20 da odstęp od czarnego tak o ile się w głowie nie pomyliłem to mogłoby działać :) nie daje sobie ręki obciąć

komentarz 16 listopada 2015 przez Dragonet.17 Pasjonat (19,630 p.)

jasne, ale na zajęciach robimy to wyłącznie za pomocą css :D

komentarz 16 listopada 2015 przez makoso Mądrala (7,380 p.)

teraz muszę wyjść na nwm ile, w formie oderwania się od aktualnego projektu mogę pkminić czy mi się uda to tak zrobić :) jak możesz to podeslij html i css tego kawałka tak abym miał jużgotowę tylko js poklepać :)

komentarz 16 listopada 2015 przez Comandeer Guru (600,810 p.)

Da się to ogarnąć CSS-em → flexbox

odpowiedź 16 listopada 2015 przez babiak Obywatel (1,810 p.)

Poczytaj kolego sobie o media querys - w tych stylach css mozesz okreslac jak ma dokładnie wyglądać Twoja strona w odpowiednich przedziałach pikselowych. Dla przykładu:

@media (min-width: 768px) and (max-width: 950px)
{

body
{
      background-color: green;
}

}

Oznacza to, że w tym przedziale pikselowym okna przeglądarki Twoja strona (body) pokoloruje się na zielono. Ty oczywiście w odpowiednich klasach swoich divów poustawiaj sobie wielkości i ich pozycję.

komentarz 16 listopada 2015 przez Comandeer Guru (600,810 p.)

Z tym, że to nie jest responsywne i trzeba pamiętać o ustawieniu wszystkich progów. Czasami niewarte zachodu.

komentarz 16 listopada 2015 przez babiak Obywatel (1,810 p.)

Dlaczego niby to nie jest responsywne? Wystarczy zastosować wymiary divów oraz czcionki na wartości relatywne i strona bardzo dobrze zachowuję się podczas zmiany rozmiarów. Nawet poziome menu można zamienić na wygodną listę select w najniższych rozdzielczościach.

komentarz 16 listopada 2015 przez Comandeer Guru (600,810 p.)

To jest adaptywne, bo wymuszamy zmiany zachowania przy określonych breakpointach. Gdyby było w pełni responsywne, to by dostosowywało się samo.

I dywagowałbym czy lista select jest taka super wygodna ;)

komentarz 16 listopada 2015 przez babiak Obywatel (1,810 p.)

Niewątpliwie masz większe doświadczenie dlatego ciężko mi tu dyskotować na ten temat. Jednak osobiście dla nauki zrobiłem za pomoca media querys stronke responsywną dla najpopularniejszych wartości wyświetlacza na komórki oraz tablety. Zarówno pion jak i poziom. Na najwyższych rozdzielczościach strona była zbudowana z 3 kolumn, a przy zmianie na mniejsze wartości sukcesywnie się zmieniała, aż była stroną z cała zawartością "upchaną" w jednej kolumnie.

Naturalnie masz rację, że są to swego rodzaju breakpointy ale od czegoś trzeba zacząć. Mi się podobało i spełniało swoją funkcję.

Jak nie lista select to co stosujesz w takich przypadkach?