CSS Prawidłowe rozmieszczanie elementów na stronie

pytanie zadane 1 sierpnia 2015 w HTML i CSS przez Krzysztof Trybuś Mądrala (5,280 p.)

Cześć! Zacząłem niedawno naukę CSS przy pomocy kursu Pana Mirosława Zelenta, ale mam jeden problem... Kiedy już okoduję stronę w html'u i zacznę zabawę w stylizacje wizualną, to jak prawidłowo określić rozmiar poszczególnych elementów w CSS'ie? Jedyny sposób to rzucić przykładowy wymiar np 40 px paddingu i odświeżyć stronę, czy może istnieje jakiś inny sposób na wcześniejsze dokładne obliczenie poszczególnych elementów? Bo np. jeśli wrzucę w diva 500px cztery divy po 125px, to nie uwzględni mi odstępów, a wymagalne będą np odstępy po 20px z każdej strony i teraz pytanie... Jak prawidłowo wszystko obliczyć? Biorę div'a, dla przykładu 500px i chcę zrobić cztery równe kwadraty w tym divie, daje im wymiar 125px i muszę doliczyć jeszcze, dla przykładu po 10px odstępu z każdej strony, to daje im wymiar 165px? Jak to tak szybko obliczać, co brać pod uwagę? Po prostu w tym prawidłowym obliczaniu rozmieszczenia poszczególnych elementów się gubię.

4 odpowiedzi

odpowiedź 1 sierpnia 2015 przez Damianoo4444 Bywalec (2,700 p.)
wybrane 2 sierpnia 2015 przez Krzysztof Trybuś

Najlepsza

Najlepiej rozrysuj to sobie na kartce i wypisz wymiary a potem podlicz. Jak masz 4 divy po 125px i chcesz mieć odstęp po 10 px to diva zmniejszasz do 105px. Jakbys chciał dodać padding to znowu samego diva zmniejszasz aby wraz z marginem i paddingiem miał docelowe 125px.

komentarz 1 sierpnia 2015 przez Krzysztof Trybuś Mądrala (5,280 p.)

Dobra, dzięki :) Jutro się pobawię na przykładach - spróbuje coś okodować i mi to w końcu wejdzie w krew. Po prostu się w tym trochę pogubiłem... Jeszcze raz dziękuję obu kolegom za udzielona podpowiedż, pomoc.

odpowiedź 1 sierpnia 2015 przez Comandeer Guru (601,110 p.)

Pierwsze. co mogę Ci polecić, to przejście na border-box: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Wówczas obliczenia wszelkich rzeczy w CSS stają się o wiele prostsze, bo do width elementu wliczać się także będzie padding i border. Jedyną rzecz, jaką będziesz musiał wówczas uwzględniać w obliczeniach stanie się margin. To na start 3 razy mniej pracy ;)

No i baw się dużo w dev toolsach przeglądarek - to powinni być Twoi najlepsi przyjaciele!

odpowiedź 1 sierpnia 2015 przez Arkadiusz Waluk Ekspert (287,950 p.)

Może weź sobie kartkę papieru, rysuj wszystko po kolei i tak obliczaj?

A może pomogłoby Ci użycie narzędzi deweloperskich przeglądarki? Nie wiem z jakiej korzystasz, ja z Chrome i po kliknięciu na stronie prawym przyciskiem myszy i wybraniu Zbadaj element można sobie "na żywo" zmieniać właściwości elementu. Ogólnie dużo widać, gdzie jaki element z kodu się znajduje, wszystko na bieżąco można podglądać i przechodzić między elementami strony. Jeśli korzystasz z Firefoxa to tam jest podobnie. W innych przeglądarkach nie wiem jak bo nigdy nie korzystałem. Mam nadzieję że to trochę ułatwi Ci zadanie ;)

komentarz 1 sierpnia 2015 przez Krzysztof Trybuś Mądrala (5,280 p.)

Tylko to mi za bardzo w obliczaniu wartości poszczególnych elementów nie pomoże :) Przeżyje i bez tego, tylko nie wiem, co przy obliczaniu wartości px poszczególnych elementów brać pod uwagę.

komentarz 1 sierpnia 2015 przez Arkadiusz Waluk Ekspert (287,950 p.)

Co brać pod uwagę? No wiadomo standardowo jest szerokość i wysokość. A dokładać do tego mogą się właściwie tylko trzy rzeczy: border, padding i margin.

odpowiedź 2 sierpnia 2015 przez Strategiusz Dyskutant (9,220 p.)

Wyszukaj sobie grafik pod hasłem "css box model". Może jak zobaczysz rysunki, to zrozumiesz lepiej. Jeszcze musisz tylko wiedzieć, że tło np. background-color będzie pokrywać zarówno content jak i padding, oraz że width i height dotyczą tylko pola content. To ile miejsca potrzeuje cały element, np. div to wszystko razem, czyli całkowita szerokość to width + padding-left + padding-right + border-left + border-right + margin-left + margin-right.

komentarz 2 sierpnia 2015 przez Comandeer Guru (601,110 p.)

Bardzo mnie zastanawia czemu wszyscy tutaj chcą liczyć box model wg starych zasad? Nowy border-box jest de facto standardem od 2-3 lat.

komentarz 2 sierpnia 2015 przez Strategiusz Dyskutant (9,220 p.)

Bo coś mało o tym w tutorialach.

komentarz 2 sierpnia 2015 przez niezalogowany

Ciekawe rozwiązanie, postanowiłem je stosować.

komentarz 2 sierpnia 2015 przez Comandeer Guru (601,110 p.)

Bo polski Internet pod tym względem posysa równo - trza śledzić blogi zagraniczne, gdzie temat się pojawił w 2012: http://www.paulirish.com/2012/box-sizing-border-box-ftw/