Loading...
ttitto avatar ttitto 1153 Точки

@coaster: Колежке, имаш малки дреболийки, които си изпуснала, но които не правят дизайна 100% еднакъв и за да ги оправи човек му отнема страшно много време. Размерът на жълтия текст в хедъра не отговаря, цветът на хедърите на отделните articles не е навсякъде бял, зелените тикчета в aside при теб са по-високо раположени спрямо последващия текст отколкото в снимката, падингът в aside в долния край не е спазен, не е спазено отстоянието на целия асайд отляво...

Пиша това не за да ти търся недостатъци. Просто втори ден седя на тази задача, заради подобни дреболии и накрая реших да видя как са я направили по-бързите от мен. Явно има някакви разминавания в разбирането на 100% Accuracy, което бих искал да уточним.

За мен 100% accuracy означава абсолютно pixel perfect. Като сложа снимката в един html файл (target) с нулирани маргини и падинги (html, body, img{margin:0; padding:0;}). След това като отворя този таргет html и моят html в два съседни таба и като ги сменям бързо с ctrl+tab да не забелязвам никакво премигване.

Та въпросите ми са: Престаравам ли се? Критериите на изпита по-леки ли ще са от това? Клиентите обикновено задоволяват ли се с толкова малки неточности като по-горе изброените?

0
kiko144 avatar kiko144 795 Точки

Според мен при условие, че нищо не ти е дадено в условието няма как всички да успеят да го докарат до пиксел пърфект. Евала ти правя, че ти  успяваш, но за повечето хора това е непосилно. За изпита няма да се изисква Pixel Perfekt и именно за това ще се проверява на ръка, просто ако си успял, ще има някакъв бонус. За клиенти не мога да ти отговоря, но като цяло малко са клиентите, които ще ти дадът сайта на картинка и ще ти кажат, че трябва така да изглежда!

2
ttitto avatar ttitto 1153 Точки

@ kiko144: Работата е там, че и аз не успявам на 100%, но докато се целя в стотачката губя адски много време и се демотивирам. Благодаря ти за отговора!

Информацията ти за изискванията на изпита от официален източник ли са? Малко ми е странно, че няма да искат пиксел пърфект, след като това е почти стандарт при сайтаджийството по готов дизайн?!

ПС. Без да искам вместо да публикувам моя коментар, флагнах твоя. Съжалявам, не е умишлено!

1
kiko144 avatar kiko144 795 Точки

Да, от официален източник са! Според мен някакви дребни детайли не са проблем! Идната седмица ще се публикува примерен вариант за изпита и ще се доизяснят още някои неща. 

2
Dekameron avatar Dekameron 481 Точки

Някой може ли да отговори на следното:

Имам 10 червени div-a. Посочвам div:nth-child(n+6){background: green;} и така правя всички div-ове след 5тия зелени.

Поставям 10те div-а в таблица и div:nth-child(n+6){background: green;} спира да работи. Защо?

Същото е и с други елементи. Поставям ги в таблица и това с :nth-child спира да работи.

Edit: Разбрах! Като се поставят в таблица трябва да се декларира:

tr:nth-child(n+6) div{background: green;}

Тогава вече работи :)

0
GoShow avatar GoShow 595 Точки

Понеже домашното на coaster  е наистина много добро, а пък аз закъснявам за съжаление имам обективни причини и го правя сега, та coaster :) имаш съвсееем мъничък пропуск. В задача 1 излизат ти ъгълчетата на td-тата извън таблицата с border-radius. Те реално са под нея и се виждат в 4-те края. Знам,че знаеш решението, затова реших само да обърна внимание. За останалото - поздравления!

0
coaster avatar coaster 412 Точки

Да, забелязах го това, излиза така в Mozilla, а в Chrome си е добре и реших да не се занимавам.. По-натам ще го оправя, благодаря!

0
lostm1nd avatar lostm1nd 121 Точки

Тези флагчета, които трябва да се сложат със CSS е добре да бъдат добавени по начин, който не изисква празни елементи в HTML-a. Не е семантично правилно. Един вариант е да се сложат с background-image. Вероятно има и други, но този работи достатъчно добре според мен.

А ето и моите задачки. Пиксел пърфект не са.

2
boyanatsvetkova avatar boyanatsvetkova 11 Точки

Здравейте,

Искам да попитам,имате ли някаква представа защо като задам border-radius на таблицата от задачата World Cup Brazil не се променя,когато я отворя под GoogleChrome  или FireFox, а при IE се появява със зададените border-radius стойности?

0
kiko144 avatar kiko144 795 Точки

И на мен ми се получи така, и се наложи да дам бордър радиус и на самите крайни клетки (примерно на горната лява > border-top-left-radius) и се оправи. 

1
boyanatsvetkova avatar boyanatsvetkova 11 Точки

Благодаря за отговора,Кико!

Но аз оставих само border на td и th на table го махнах, но самият border-radius така да се каже излиза върху вътрешността на клетката, а не на border на td,който си остава правоъгълен. Надявам се,че поне малко го обясних както трябва

0
kiko144 avatar kiko144 795 Точки
Еми мисля, че те разбрах и първит път, но май ти не си ме разбнрал. Пробвай да селектираш примерно най-горната клетка на таблицата (там където ти не ти излиза радиуса) и му дай това ъгълче да го заобли с бордър радиус. Примерно ако вземеш горната дясна клетка и даваш border-top-right-radius и въпросните пиксели !
1
Valleri avatar Valleri 304 Точки
Само Аржентина! http://cssdesk.com/eQU7G
0
alexandra avatar alexandra 8 Точки

Здравейте,
Попаднах на една интересна статия за Object Oriented CSS и метода BEM (block, element, modifier), с които се наименуват класовете, което прави кода по разбираен и лесно четим от другите. Използва се следния модел:

.block {}     -----> block e обекта
.block__element {}     -----> елемента, които е част от обекта
.block--modifier {}      -----> е различното състояние на елемента

Реших да го пробвам в 3 задача и да го споделя  :)

Статията може да намерите тук: BEM

Кода тук: CSS и HTML

4
coaster avatar coaster 412 Точки

Направих го и горкото измъчено човече хаха :)

demo + HTML + CSS

2
Ludmil.D avatar Ludmil.D 41 Точки

KitchenNavFix  KitchenOriginal

базирам се на кода на @coaster бъга е под формата на трептене и смяна на реда на някой думи ако отворите сайта на fullscreen трудно и едвам се забелязва (2-3px го издават от лявата страна) но при по малък прозоред когато се е преоразмерила навигацията се хваща по лесно във фидлера се вижда ясно

Мисля лесно ще се ориентирате за малкия бъг в НАвигацията на кратко: вместо hover за всеки елемент
nav ul li:nth-child(1):hover {
background: red;
margin-left: -27px;
padding-left: 5px;
width: 110%;
border-radius: 5px;
list-style-position: inside;
}
изнасяме общите настройки и hover сменя само цвета

nav ul li {
margin-left: -27px;
padding-left: 5px;
width: 110%;
border-radius: 5px;
list-style-position: inside;
}
nav ul li:nth-child(1):hover {

background: red;
}
иначе ми допадна как даваш margin на първия article 215 и после се вади -200 което си е чист CopyRight :)
p.s. благодарско,.. гледам да е с разбиране!

1
VenIT avatar VenIT 63 Точки

Здравейте,
ето и моето домашно:

GitHub repo

01.WorldCupBrazil -> HTML

01.WorldCupBrazil -> CSS

01.WorldCupBrazil -> DEMO

 

02.ColorKitchen -> HTML

02.ColorKitchen -> CSS

02.ColorKitchen -> DEMO

 

03.SoftUniStudentBeforeExam-> HTML

03.SoftUniStudentBeforeExam -> CSS

03.SoftUniStudentBeforeExam-> DEMO

 

 

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