Loading...
a.angelov avatar a.angelov 1316 Точки

[Homework] Web Fundamentals (HTML + CSS) - CSS Overview - септ.2014

Здравейте,

ето моите решения на задачките от домашното:

1. WorldCup - HTMLCSS - DEMO;

2. Color Kitchen - CSS - DEMO;

3. SoftUni Student Before Exam - HTML, CSS - DEMO.

 

Препоръките и коментарите са добре дошли, тъй като едва ли съм ги направил по най-умния начин smile

8
Web Fundamentals - HTML5 10/10/2014 12:14:33
salih1f1 avatar salih1f1 188 Точки

Здравей. Има нещо по първа задача което не разбирам. Как да дам collapse при положение че след като го дам радиуса на таблицата изчезва. За да се получи по някакъв начин използвах меко казано аматьорски начин и дадох черен фон на таблицата. Това ми е CSS-a. Ще се радвам на малко разяснение и градивна критика.

p.p. Един малък съвет. За подравняване можеш да използваш td:nth-child(4n+1)  за right и td:nth-child(4n+3) за left.

 

А иначе това е моето домашно.

1
01/10/2014 18:48:36
Filkolev avatar Filkolev 4482 Точки

Това с таблицата ми беше най-сериозният проблем. Накрая реших да набутам таблицата в един div, за да не се получава. Оформих ръбовете на div-a и на таблицата поотделно.

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

От това домашно 3-та задача дето е със звезда, ми беше най-лесна. Другите са голяма занимавка.

3
Velichkov avatar Velichkov 87 Точки

Може и без collapse, а с граница на крайните td-та:

CSS

HTML

0
salih1f1 avatar salih1f1 188 Точки

Споделям мнението ти. Първа ме измъчи най - много, най - вече радиуса. Втора ми беше по лесна. А с трета бях готов за около 20-30 минути. Все пак мисля, че звздата  трябва да е на 1ва задача. smile

1
nikola.m.nikolov avatar nikola.m.nikolov 830 Точки

Моите решения на домашното:

1. World Cup Brasil - code , demo

2. Color Kitchen - code , demo

3. SoftUni Student - code , demo

1
16/10/2014 00:02:10
Dominik avatar Dominik 82 Точки

Здравей колега,

Мисля, че ако ползваш един ресетър в началото на .css-a няма да имаш проблем с browser-те :). По принцип това е лека :D

1
a.angelov avatar a.angelov 1316 Точки

nikola.m.nikolov, на първа задача може червените бутони BET да ги направиш също disabled /за тези мачове не може да се залага/ и да ги стилнеш по този им параметър.

ПС. Доста по-добре от мен си реализирал бордърите на таблицата и заоблените й ъгли.

0
03/10/2014 19:38:11
velio84 avatar velio84 241 Точки

Това домашно е отвратително просто. Няма такава пипкава история... Аз направих първа и втора, като не са перфектни. На първата се сблъсках и аз с проблема да ,,извия" ръбовете на таблицата. Горните в хедъра успях, но за долните изгубих близо 3 часа и така и не успях. Накрая се предадох, щото нервите ми не издържаха :)
Втора си играх сигурно над 6 часа общо. Ако трябваше да го правя на изпита, тъкмо да направя 1 задача за цялото време...
Тук правих задачата на Хром и после като го пуснах на файрфокс - почти нищо общо с това, което трябваше да бъде sealed

Сега ще захвана трета да видим как е...

4
micro3x avatar micro3x 135 Точки

третата е най лесна. :)

0
atanasovam avatar atanasovam 39 Точки

Няколко часа си играх с тая гад първа задача и мисля, че я понаправих. Най-много зор видях с това да заобля краищата и на border-а, и на жълтия фон... накрая написах border-collapse: separate !important; и стана :д

html

css

demo 

 

btw така ли се прави демо?

и Бразилия не трябва ли да е Brazil?

3
02/10/2014 01:14:36
nikola.m.nikolov avatar nikola.m.nikolov 830 Точки

Същото се получава и при теб във Firefox. Тоз backgroud що така излиза извън border-a...

0
velio84 avatar velio84 241 Точки
<form><input name="second-bet" type="number" min="0" max="10" value="0" >-
<input type="number" min="0" max="10" value="0" >

Това ми хареса много smile

И както каза Никола - в Хром изглежда екстра, но във Файърфокс се виждат острите ръбове на таблицата.

0
a.angelov avatar a.angelov 1316 Точки

Това с preview-то в гитхъб не го знаех, благодаря! :)

0
02/10/2014 09:59:13
velio84 avatar velio84 241 Точки

01_world-cup demo

02_color_kitchen demo

03_softuni-student

@github

Както споменах по-горе - втората задача работи в Хром. Във Файрфокс... не баш... :)

Според мен обаче, въпреки съвета на Наков от лекцията на предния випуск, че не е добра идея да ресетваме марджините на всичко, ако се ресетнат си гарантираме, че всичко което правим ще изглежда еднакво на всички браузъри (поне последните версии). На доста места в нета го дават като добра практика, включително и в

http://css-tricks.com/

който Наков дава като добър сорс за идеи и туториъли.

От тук нататък мисля да започвам css файловете с:

* {
    margin: 0;
    padding: 0;
}

 

пък да видим...

0
02/10/2014 01:43:58
a.angelov avatar a.angelov 1316 Точки

На трета задача зъбките имат бордър радиус само отдолу, а на втора - сложи един italic на footer-ите wink

1
velio84 avatar velio84 241 Точки

good catch :)

мерси :)

0
a.angelov avatar a.angelov 1316 Точки

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

За първата ти задача:

- select-та на резултата, който е в червено според мен трябва да бъде disabled, защото вече не може да се залага;

- в последната колона Bet - е хубаво да ги направиш като бутони /вярно е, че не сме учили още тези неща, но не е излишно да се пробва човек/, и при тях също червените трябва да са disabled;

- в css ако сложиш за table - border-spacing: 0; - таблицата ще придобие по-добър изглед /с малко недостатъци само горе в ъглите/.

 

За втора задача:

- съвсем минимално - сложи italic на footer-ите.

 

ПС. На трета задача лицето, носа и очите ми изглежда елипсовидни, зъбите не са центирани...

0
02/10/2014 10:18:59
nikola.m.nikolov avatar nikola.m.nikolov 830 Точки

Колеги, вие на втора задача Color Kitchen оправяхте ли последните 2 линка на navigation менюто?

0
a.angelov avatar a.angelov 1316 Точки

Ами не - нали в задачата пише да не се пипа html-то...

0
nikola.m.nikolov avatar nikola.m.nikolov 830 Точки

То пише, но според мен е пропуск от тяхна страна.

0
a.angelov avatar a.angelov 1316 Точки

Много е вероятно да е пропуск наистина, но не мисля, че е проблем след като домашното е за стилизиране. Аз не мисля да го оправям и няма да го санкционирам при проверката.

0
a.polyanska avatar a.polyanska 107 Точки

a.angelov

Много ме радва как спретнато си направил кода :) И понеже много се забатачих, хвърлих няколко очи на твоето домашно и много ми помогна. Само че има нещо, което очевидно при мен по някаква причина (вероятно недоглеждане, но не откривам къде) не върви. А именно, стилизирането на първия ред и първата буква. Копирах даже от твоя CSS, но пак не ми се получава. Някой има ли идея защо? Ето кода color kitchen (най-отдолу съм отделила проблемните).

Благодаря!

0
a.angelov avatar a.angelov 1316 Точки

Кодът ти работи, поне при мен го виждам добре - първата буква е с малко по-голям size и първия ред е italic - само увеличи размера на първата буква /на 36px примерно/, защото така не се отличава много добре.

Имаш и едно повторение - махни едното:

section article div:first-line {

    font-style: italic;

}

ПС. Първия span на Lorem ipsum трябва също така да го направиш italic и да му добавиш в началото и края кавички.

 
0
03/10/2014 12:05:04
a.polyanska avatar a.polyanska 107 Точки

Не е повторение, а е за span-a, но по някаква причина не работи. Останалото го пуснах, наистина работи (очевидно трябва да рестартирам  мозилата от време на време, и преди имаше някакви моменти да питам тук за нещо, което се оказва, че работи след рестарт :)), но

section article span:first-line {

    font-style: italic;

}

не ще да променя първият ред на последния артикъл, а аз искам. Това е то несходство в характерите :)

0
a.angelov avatar a.angelov 1316 Точки

Мое недоглеждане. Направи го така:

section article span:first-of-type

Целия първи спан трябва да ти е италик, а не само първия ред.

1
03/10/2014 12:24:06
magdalena70 avatar magdalena70 96 Точки

Ето моето домашно CSS-Overview:

1.World Cup Brasil - HTML  CSS  DEMO

2.Color Ktchen -  HTML  CSS  DEMO

3.SoftUni Student Before Exam - HTML  CSS  DEMO

 

И на първа задача снимките при мен се отварят,а в http://htmlpreview.github.io/ -не се отварят,не знам защо.Някои снимки отваря,други-не?! Ако някой знае,ще съм много благодарна да сподели. :(

 

Направих отново втора задача,без да пипам html-а,но не мога да открия как да направя разстоянието между първи и втори ред.

Някакви идеи? Не претендирам за 100% точност.

0
05/10/2014 11:15:49
a.angelov avatar a.angelov 1316 Точки

Здравей Магдалена,

Моите коментари по решенията ти:

По първа задача - картинките на знамената трябва да бъдат заредени чрез css-а, а не в HTML.

По втора задача - не е направена коректно - стилизацията трябва да се направи без корекции по HTML кода. Ти си добавяла класове, id-та и други нещица в него smile

0
03/10/2014 12:32:16
magdalena70 avatar magdalena70 96 Точки

ok ще ги поправя

 

Първа я оправих. Съответно в демото пак не ми отваря картинките...:( Иначе работи.

0
03/10/2014 13:11:51
nikola.m.nikolov avatar nikola.m.nikolov 830 Точки

Магдалена, 

на втора задача Color Kitchen background-a на header-ите в section частта не са коректни. Background-a на navigation менюто също не ти е коректен. Предполагам цветовете си ги взела от background снимката в домашното. По-добре използвай някоя програма като paint.net, която има функция color picker и вземи цветовете директно от header-ите. Второто и третото заглавие (Web Safe Colors и RGB Color Mode) трябва да са с черен цвят на текстта. Първата буква от article-a освен по-голяма трябва да е и italic

Горе в header-a на Color Kitchen зеления цвят също не е коректен. На този header си дала width: 103% (трябва да го направиш width: 100%) и по този начин се появява излишен scroller по хоризонтала.

Сложи в body селектора margin: 0 0;

В body > header:nth-child(1) селектора изтрий   margin: -7px;

 

 

0
03/10/2014 15:11:03
atanasovam avatar atanasovam 39 Точки

Направих и втора задача ~ 

css

demo

Като си я пускам от компютъра и цъкам по линковете вляво ми дава This webpage is not found.

Като ги цъкам на демото всичко си работи, обаче като цъкна на Lorem Ipsum или на HSL adn HSV не ще да ме прехвърли надолу. Някой може ли да ми обясни защо? velio84, в твойто демо става същото, а пък при nikola.m.nikolov работи коректно.

И има правописна грешка в html-а - трябва да е HSL and HSV, а не HSL adn HSV, ама не е фатално ;д

0
a.angelov avatar a.angelov 1316 Точки

Просто има грешка в html-a - някои от колегите решиха да си я оправят и затова при тях работи, други като мен го оставихме така :) Това да не те притеснява - така или иначе в условието е казано, че не можем да променяме html-а и не може да е основание за по-ниска оценка при проверката на домашното.

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