Loading...
Valleri avatar Valleri 304 Точки

Resizing problem

След като направих задачата "Fakebook Register Form" забелязах че страницата не се държи добре при зуумване, в JS Fiddle си личи : http://jsfiddle.net/Rz6Zg/ Моля за съвет :)
Тагове:
-1
Web Fundamentals - HTML5
VNikolov avatar VNikolov 51 Точки

До колкото виждам кода, основния проблем е "position: relative;", който води до това разминаване при увеличаване на страницата. Опитай с "display: inline-block;" и след това позиционирай с margin и padding. Другото което видях е, че не си затворил навсякъде таговете, то си работи, но е некоректно. Също така забелязах, че пишеш "</br>", което също е грешно, правилният начин е "<br />". Също така "#right, #right fieldset" селектира първо div-a и му задава стилове, след това селектира fieldset-a и му прилага същите стилове, което е излишно. Малко го пооправих ето тук. Дано съм ти помогнал, ако има нещо друго питай :)

2
Valleri avatar Valleri 304 Точки
Благодаря :) Ще разцъкам повече display опцията, да видя какво може да прави. Попринцип правилно ли е да се донаглася толкова много с отрицателни стойности за падинг и марджин, или това просто показва че не използвам дисплей и флоут опциите правилно?
0
VNikolov avatar VNikolov 51 Точки

Поприцнип някой път се налага да се ползват отрицателни стойности, но в повечето случеи може да се постигне позиционирането без отрицателни стойности, с правилно използване на float и display. Отрицателен margin може да се ползва, за да се скрие част от елемент или целия ако трябва. 

1
PYovchevski avatar PYovchevski 1 Точки
http://jsfiddle.net/PYovchevski/49PsL/

Оправих ти подредбите но си оправи размерите. виж си ID Left и Right там са прекалено големи. Имаше и грешно писани break тагове като например </br> а се пишат <br />. 

1
Valleri avatar Valleri 304 Точки

Благодаря, преатели! Доста сте полезни.
Днес прочетох още малко за display:inline-block и ми се стори доста удобно. И направих следващата задача в този стил.
http://jsfiddle.net/Krafferious/x4pAt/

Само дето това пренасяне на 2 елемента, после един после пак 2 може би трябва да се оправи...Какво мислите?

Също така, можете ли да предложите алтернатива на заглавията и рейнджовете на input-range, направил съм ги с pre ?
0
VNikolov avatar VNikolov 51 Точки

Проблема с пренасянето ти идва от "<br />" след третия item, ако го махнеш и направиш фиксирана дължина на container, така че да се побират 3 елемента на един ред всичко се оправя. За заглавията можеш да си направиш един елемент, който да съдържа още три и там да си ги позиционираш.

1
PYovchevski avatar PYovchevski 1 Точки

Приятел, виждам че си ползвал id за стилизиране при новите продукти и цените. Направи ги да бъдат с class защото тези id-та ги ползваш на повече от едно място. ID трябва да бъде уникално за да ти бъде валидиран кода. Просто промени #new #new span и #price на .new .new span и .price ;)

1
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.