@coaster: Колежке, имаш малки дреболийки, които си изпуснала, но които не правят дизайна 100% еднакъв и за да ги оправи човек му отнема страшно много време. Размерът на жълтия текст в хедъра не отговаря, цветът на хедърите на отделните articles не е навсякъде бял, зелените тикчета в aside при теб са по-високо раположени спрямо последващия текст отколкото в снимката, падингът в aside в долния край не е спазен, не е спазено отстоянието на целия асайд отляво...
Пиша това не за да ти търся недостатъци. Просто втори ден седя на тази задача, заради подобни дреболии и накрая реших да видя как са я направили по-бързите от мен. Явно има някакви разминавания в разбирането на 100% Accuracy, което бих искал да уточним.
За мен 100% accuracy означава абсолютно pixel perfect. Като сложа снимката в един html файл (target) с нулирани маргини и падинги (html, body, img{margin:0; padding:0;}). След това като отворя този таргет html и моят html в два съседни таба и като ги сменям бързо с ctrl+tab да не забелязвам никакво премигване.
Та въпросите ми са: Престаравам ли се? Критериите на изпита по-леки ли ще са от това? Клиентите обикновено задоволяват ли се с толкова малки неточности като по-горе изброените?
Някой може ли да отговори на следното:
Имам 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;}
Тогава вече работи :)
Понеже домашното на coaster е наистина много добро, а пък аз закъснявам за съжаление имам обективни причини и го правя сега, та coaster :) имаш съвсееем мъничък пропуск. В задача 1 излизат ти ъгълчетата на td-тата извън таблицата с border-radius. Те реално са под нея и се виждат в 4-те края. Знам,че знаеш решението, затова реших само да обърна внимание. За останалото - поздравления!
Да, забелязах го това, излиза така в Mozilla, а в Chrome си е добре и реших да не се занимавам.. По-натам ще го оправя, благодаря!
Тези флагчета, които трябва да се сложат със CSS е добре да бъдат добавени по начин, който не изисква празни елементи в HTML-a. Не е семантично правилно. Един вариант е да се сложат с background-image. Вероятно има и други, но този работи достатъчно добре според мен.
А ето и моите задачки. Пиксел пърфект не са.
Здравейте,
Искам да попитам,имате ли някаква представа защо като задам border-radius на таблицата от задачата World Cup Brazil не се променя,когато я отворя под GoogleChrome или FireFox, а при IE се появява със зададените border-radius стойности?
И на мен ми се получи така, и се наложи да дам бордър радиус и на самите крайни клетки (примерно на горната лява > border-top-left-radius) и се оправи.
Благодаря за отговора,Кико!
Но аз оставих само border на td и th на table го махнах, но самият border-radius така да се каже излиза върху вътрешността на клетката, а не на border на td,който си остава правоъгълен. Надявам се,че поне малко го обясних както трябва
Еми мисля, че те разбрах и първит път, но май ти не си ме разбнрал. Пробвай да селектираш примерно най-горната клетка на таблицата (там където ти не ти излиза радиуса) и му дай това ъгълче да го заобли с бордър радиус. Примерно ако вземеш горната дясна клетка и даваш border-top-right-radius и въпросните пиксели !
Само Аржентина!
http://cssdesk.com/eQU7G
Здравейте,
Попаднах на една интересна статия за Object Oriented CSS и метода BEM (block, element, modifier), с които се наименуват класовете, което прави кода по разбираен и лесно четим от другите. Използва се следния модел:
.block {} -----> block e обекта
.block__element {} -----> елемента, които е част от обекта
.block--modifier {} -----> е различното състояние на елемента
Реших да го пробвам в 3 задача и да го споделя :)
Статията може да намерите тук: BEM
базирам се на кода на @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. благодарско,.. гледам да е с разбиране!
Според мен при условие, че нищо не ти е дадено в условието няма как всички да успеят да го докарат до пиксел пърфект. Евала ти правя, че ти успяваш, но за повечето хора това е непосилно. За изпита няма да се изисква Pixel Perfekt и именно за това ще се проверява на ръка, просто ако си успял, ще има някакъв бонус. За клиенти не мога да ти отговоря, но като цяло малко са клиентите, които ще ти дадът сайта на картинка и ще ти кажат, че трябва така да изглежда!
@ kiko144: Работата е там, че и аз не успявам на 100%, но докато се целя в стотачката губя адски много време и се демотивирам. Благодаря ти за отговора!
Информацията ти за изискванията на изпита от официален източник ли са? Малко ми е странно, че няма да искат пиксел пърфект, след като това е почти стандарт при сайтаджийството по готов дизайн?!
ПС. Без да искам вместо да публикувам моя коментар, флагнах твоя. Съжалявам, не е умишлено!
Да, от официален източник са! Според мен някакви дребни детайли не са проблем! Идната седмица ще се публикува примерен вариант за изпита и ще се доизяснят още някои неща.