Техника за проектиране на дизайн


0

Здравейте!

Някой знае ли къде мога да прочета нещо за проектирането на дизайн?

Искам да направя калкулатора без таблица обаче ми е мъка да проследя къде колко място отива. Нещо явно не знам и/или пропускам.




Отговори



0

С десен бутон -> Inspect Element в браузъра можеш да гледаш абсолютно всеки елемент къде е разположен, какви стилове му влияят в момента, всичките му margin, padding, border, размери итн и така по-лесно да се ориентираш кое колко място заема и защо.

Добра идея е първото нещо, което правиш в един CSS да е нулиране на margin и padding на всички елементи, които използваш, така ще знаеш, че всичко по страницата ще се отмества точно колкото и накъдето на теб ти трябва, вместо да се чудиш кои 2-3-5 пиксела откъде са се появили и защо.


от topalkata (6442 точки)


0

Благодаря за бързия отговор :)

Имам предвид друго. Как аз самия да направя страницата добре?

Започнах първо като създадох "постелките" на всички елементи. Така си мисля, че се прави. Чакай малко! По-добре е да направя видео въпрос.


от sava.vidov (29 точки)

2

Основната разлика, която прави position: absolute; е, че "вади" дадения елемент от обичайния "flow" на страницата и той вече не взаимодейства с другите елементи наоколо - слагаш го където искаш, дори да се падне върху (или под) друг елемент.

За отправна точка (0,0) му служи горният ляв ъгъл на най-близкия му родител, който има зададена някаква позиция, ако няма такъв, това е body. Position: relative; от друга страна ти позволява да местиш елемента спрямо позицията, която поначало има, но той продължава да "избутва" останалите елементи.

ТУК тези неща са много добре и нагледно обяснени.

Също така вместо float-ове, които понякога могат доста да омажат нещата, можеш да ползваш за div-овете, които искаш да са на един ред display: inline-block;, ако искаш да се редят един до друг, а да не ходи всеки на нов ред.

По въпроса ти как изначално да си проектираш нещо - най-добре да си начертаеш грубо какво искаш да има по страницата - контейнери и какво ще има в тях, как ще са разположени един спрямо друг и вече на тази база да започнеш да ги стилизираш чак накрая, когато всичко ти е подредено и само трябва визуално да изглежда малко по-различно.

Например за калкулатора - искаш един голям div (container), в който да е всичко. Най-горе в него искаш да има картинка, текст и друга картинка (бутоните горе вдясно), след тях - друг div, в който да има да кажем един div с View Edit Help вътре, след него - един с цифрите вътре, после един с малките цифрички (всяка група цифрички вътре пак може да е в отделни дивове), след това два други с радио-бутоните, после може да групираш в други контейнери самите бутончета.

Накрая започваш да мислиш как да групираш нещата по класове, като всеки елемент може да има по повече от един клас. Например на всички бутони можеш да сложиш един клас, в който да им зададеш размери, бордър, заобленост итн, а после само на тези, които са "активни" да им сложиш и друг клас, в който ще сложиш стиловете с градиентите да речем и при hover да стават жълти итн.

Така без нагледни примери трудно се обяснява и не става много ясно, но се надявам да съм бил от полза.


от topalkata (6442 точки)



1
Ето какво питам: ВИДЕО

от sava.vidov (29 точки)


0
Ето какво се получи накрая: jsfeddle.net

от sava.vidov (29 точки)