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

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

Време е за тема и за третото домашно - HTML Tables.

Ето моите решения:

01-SimpleTable: HTML, CSS, DEMO;

02-ExamResults: HTML, CSS, DEMO;

03-NestedTables: HTML, CSS, DEMO;

04-WebSiteHeader: HTML, CSS, DEMO;

05-LifeInSoftUni: HTML, CSS, DEMO;

06-LifeInSoftUni-Keyboard: HTML, CSS, DEMO;

07-Calculator: HTML, CSS, DEMO.

 

Има някои неща за доизкусоряване/доукрасяване, но общо взето е близо до окончателния си вариант smile

Коментарите и препоръките са добре дошли както винаги smile

4
Web Fundamentals - HTML5 07/10/2014 15:20:39
Filkolev avatar Filkolev 4482 Точки

Ето и моите решения: ЛИНК.

Дема (може да се наложи да разрешавате скриптове ако зависне на Loading...):

01. Simple Table DEMO

02. Exam Results DEMO

03. Nested Tables DEMO

04. Website Header DEMO - не съм го центрирал, но ще го оставя така

05. Life In SoftUni DEMO

06. Life In SoftUni Keyboard DEMO

07. Calculator DEMO

 

Иначе препоръки към твоето домашно - може да сложиш hover ефекти на линковете/бутоните в 4-та и 7-ма задача, друго не виждам като възможно подобрение.

3
06/10/2014 16:06:22
a.angelov avatar a.angelov 1316 Точки

Да, благодаря - такива украсявания мислех да правя точно smile

0
Filkolev avatar Filkolev 4482 Точки

На 6-та задача също има бутони, и там може да се сложат ефекти. Аз навсякъде нацвъках еднакви ефекти горе-долу, не съм много оригинален като стане дума за визия.

Сложих линкове с дема, всякаква обратна връзка е добре дошла.

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

Добре си се справил. Аз нещо не успях да оправя search бутона в WebSiteHeader-а и малко ми стърчи отгоре, но ще го мъча пак :)

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

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

0
06/10/2014 15:58:25
nikola.m.nikolov avatar nikola.m.nikolov 830 Точки

Ето и моите решения. Определено HTML-а и CSS-а са доста досадни с това изпипване на детайлите.

1. Simple Table - CODE DEMO

2. Exam results - CODE DEMO

3. Nested Tables - CODE DEMO

4. Website Header - CODE DEMO

5. Life in SoftUni - CODE DEMO

6. Life in SoftUni Keyboard - CODE DEMO

7. Calculator - CODE DEMO

5
07/10/2014 02:12:14
Filkolev avatar Filkolev 4482 Точки

400 реда CSS...

Може ли набързо да споделиш как правиш падащите менюта, че разгледах набързо, но не се ориентирах къде става това? Правил съм го преди на Codecademy ако не се лъжа, но съвсем съм забравил как беше, може и на Javascript да е било.

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

CSS-a е доста разхвърлян за момента... Иначе ще се опитам да намеря един tutorial, който гледах снощи в работата.

Доста бързо го намерих - How To Create a Pure CSS Dropdown Menu и DEMO

Досега тази 4-та задача ми е отнела поне 6-7 часа :) Иначе идеята на dropdown менюто е да направиш ul и в него да вкараш колкото си искаш li и nested ul. Задава се само li-тата на пъврия ul да са видими, а всички останали ul им задаваш display: none При hover на някое li ако в него има nested ul то му задаваш display: block.

 

2
06/10/2014 21:17:18
velio84 avatar velio84 241 Точки

Единственото дето не ми харесва е като при a.angelov - може на 6-та задача връзките да се отварят в нови табове на браузъра. Извън това, изпипана работа.

Явно харесваме еднаква бира, щото и моя линк е същия на 6-та задача smile

1
velio84 avatar velio84 241 Точки

Едит: това за домашното на a.angelov

Единствено, може на 6-та задача връзките да се отварят в нови табове на браузъра

И както Filkolev спомена - за hover, според мен най-вече е нужно за 4-та. останалите могат да минат и без smile

1
07/10/2014 00:35:51
a.angelov avatar a.angelov 1316 Точки

Ъпдейтнато:

На 6-та задача бутоните вече отварят нови табове.

На 4-та вече има hover ефект върху менюто плюс още няколко незначителни корекции - линк на камбаната и линк на юзъра.

Едит: И калкулатора го стилосах малко...

smile

0
07/10/2014 15:55:00
magdalena70 avatar magdalena70 96 Точки

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

 

Homework-HTML-Tables

 

 

Life In SoftUni Keyboard - DEMO

Calculator - DEMO

Website Header - DEMO 

0
20/10/2014 01:01:15
a.angelov avatar a.angelov 1316 Точки

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

0
magdalena70 avatar magdalena70 96 Точки

Благодаря,не го бях видяла.Оправих го.

1
JuliaS avatar JuliaS 32 Точки

Здравейте,

към автора - сега тръгнах да разглеждам код и на 1-ва задача забелязах че Software Universiti първо си го сложил в th таг и след това си го оградил с h1. Тагът th означава заглавие на таблица и според мен h1 не е коректно да се използва в случая.

Валидирах кода ти и това беше открито като грешка. Като начинаещи не трябва да пренебрегваме валидаторите, наистина помагат да се научим да пишем качествен код.

Ще постна и моите решения когато са готови и ще се радвам ако някои градивно коментира кода ми. Идеята не е да докараме само визията на картинките, а да се научим да пишем качествен код.

Edit: Ето и моите решения на задачите.

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

1
14/10/2014 07:50:56
a.angelov avatar a.angelov 1316 Точки

Имаш право, благодаря за коментара!  Ще го коригирам smile

ПС. По принцип си проверявам кода във валидаторите, но явно тази съм я пропуснал...

0
atanasovam avatar atanasovam 39 Точки

Имам един въпрост за 6та задача - как да го направя така, че vertical-align-а да работи?

html

css

demo

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

Сложи padding-top на .myButton /за всички клетки/ или на селектор за всяка клетка по отделно и си готов.

1
09/10/2014 20:33:17
atanasovam avatar atanasovam 39 Точки

Тва работи, ама не може ли стане с vertical-align някак си... според tutorial-ите, които намерих в google трябва да сложа един ред

 td {

 vertical-align: middle;

}

и всичко да се оправи, ама нещо не желае :\

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

Сега забелязах - не работи, защото класът ти е на тага "а", а не на td и реално не подравняваш съдържанието на клетката, а на линка - а там няма какво да се подравнява :)

Тоест - трябва да имаш някакъв селектор за съответната клетка за да ти работи vertical-align.

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