[Homework] Web Fundamentals (HTML + CSS) - CSS оформление и позициониране - септ.2014

velio84 241 Точки

[Homework] Web Fundamentals (HTML + CSS) - CSS оформление и позициониране - септ.2014

Ето ги моите решения до 4 задача. 5-та ще я пропусна засега, евентуално след като изгледам лекцията за риспонсив дизайна.

04 (not that) Pretty Website

На 1-ва задача откраднах наготово кода за менюто (+ стиловете в css) от Никола Николов от третото домашно. Мързеше ме да линквам всички тия под-менюта, така че имам да черпя

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

Тагове:

18/10/2014 20:14:25 Web Fundamentals - HTML5

v1ppers0nn 234 Точки

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

18/10/2014 21:27:04

velio84 241 Точки

Можеш ли да дадеш скрийншот какво ти излиза на 1-ва?

За 2-ра - картинките ще ги оправя, но долу на менюто със страниците колкото и да го мъчих, нещо не мога да ги смачкам и да ги залепя :)

19/10/2014 12:08:40

v1ppers0nn 234 Точки

Разбира се, ето: ЦЪК

19/10/2014 12:52:18

velio84 241 Точки

Мерси. Явно на широк екран се скапва, моя е сравнително квадратен и затова ми изглежда ок :)

19/10/2014 14:17:12

nikola.m.nikolov 830 Точки

1. Website Header - CODE , DEMO

2. Website Footer - CODE , DEMO

3. The SoftUni News - CODE , DEMO

4. Pretty Website + 5. Pretty Responsive Website - CODE , DEMO *само 1 код имам за 2-те задачи

19/10/2014 10:03:46 22/10/2014 20:02:46

Filkolev 4482 Точки

Доста добре изглеждат задачите. Единствено си объркал title-a на 2-ра, стои Website Header. За 4-та и 5-та няма смисъл наистина да правиш две задачи след като си решил да е направо респонсив.

22/10/2014 21:35:55

a.angelov 1316 Точки

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

Код - GitHub

01. Website Header- DEMO;

02. Website Footer - DEMO;

03. The SoftUni News - DEMO;

04. Pretty Website - DEMO;

05. Pretty Website /responsible/ - TODO.

Първа задача, не ми се получи много добре - нещо не мога да оправя шрифта като на заданието... От втора и трета съм доволен /само трета под firefox трябва да я доизкусоря, че таговете се опитват да излязат от артикълите/

Коментарите и забележките са добре дошли.

19/10/2014 12:42:04 20/10/2014 12:23:28

Filkolev 4482 Точки

На 1-ва задача при hover над падащите менюта курсора е кофти, направи го да е pointer и ще е доста по-добре (това може да се направи и на 3-та за навигацията долу).

Също при hover над лупичката може да й смениш фона.

Иначе изглежда добре, явно просто имаш високи критерии.

22/10/2014 21:39:57

magdalena70 96 Точки

Homework: CSS Layout -

1.Website Header - DEMO HTML CSS ...И сложих CSS-Reset, незнам дали има полза.:)

2.Website Footer - DEMO HTML CSS

3.The SoftUni News - DEMO HTML CSS

4.Pretty Website - DEMO HTML CSS

5.Pretty Website - DEMO HTML CSS тука има още каво да се направи, но не знам дали ще имам време.....Имам проблем

с main-а,като му задам height: auto; и не работи,трябва да задам фиксирана дължина,иначе бекграунда изчезва.Ако някой има идея...ще съм много благодарна.

19/10/2014 13:16:10 24/10/2014 14:45:04

velio84 241 Точки

Здрасти,

снимките в resources папката ти са с разширения .PNG (големи букви) а в html файла ги линкваш като .png

пробвай, може и да се оправи :)

Едит: пробвах го на демото ти да променя html и се оправи, така че това е. Предполагам си с Уиндоус, на него не му правят впечатления подобни неща и затова ти се показва нормално на компютъра

19/10/2014 14:32:35 19/10/2014 14:48:07

magdalena70 96 Точки

Много благодаря! :)

20/10/2014 00:35:31

VenelinGrozev 130 Точки

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

1 Website Header - demo | code

2 Website Footer - demo | code

3 The Soft Uni News - demo | code

4 Pretty Website - demo | code

И да споделя един линк, който много ми помогна при центрирането (хоризонтално и вертикално на елементите) в домашните - http://www.w3.org/Style/Examples/007/center.en.html

Някой може ли да ми обясни защо в четвърта задача има разстояние между картинката в хедъра и навигационното меню. Аз доста се чудих но така и не успях да разбера.

19/10/2014 21:08:39 20/10/2014 01:24:37

nikola.m.nikolov 830 Точки

За 4-та задача си добави в #header:

height: 270px;

Причината е, че като не си задал височина се задава автоматичнo 274px, а картинката е 270px.

20/10/2014 12:29:28 20/10/2014 12:31:17

VenelinGrozev 130 Точки

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

20/10/2014 12:35:35

a.angelov 1316 Точки

На трета задача под Chrome ul-ла със страниците излиза вертикален... Може и него да оправиш.

Другото, което ми направи впечатление - цветовете на око ли ги определяш, защото в някои от задачите /3 и 4/ са доста странни :)

20/10/2014 13:12:05

Покажи всички коментари

mihayloff14 824 Точки

Здравейте,

имам проблем с втора задача - Website Footer.

Не мога да вкарам plugin-а за facebook.

Ето кода ми - GitHub

Опитвам се и да копирам чужд код където това работи, но при мен няма резултат.

20/10/2014 14:49:48

a.angelov 1316 Точки

Кодът ти се зарежда в гитхъб preview-то - PREVIEW

Аз забелязах, че просто със стартиране на html файла не се визуализира, обаче като го пускам през Webstorm-а /който си пуска собствен сървър/ или през xampp сървър става. Иска стартиране през сървър за да работи...

Това е най-вероятно причината и при теб.

20/10/2014 15:43:04 20/10/2014 15:43:50

mihayloff14 824 Точки

Да, наистина през preview-то тръгна. Явно ще трябва да сложа някой друг коментар, за да уточня това :O

20/10/2014 16:35:38

a.polyanska 107 Точки

За първа задача- абе на мен ми убягва нещо много основно- как да направя от листовете падащи менюта- блещих се на вашите кодове, копирах ги в моя, не става и не става- излиза си ми обикновен лист. Как става тази магия? Освен select, в лекциите не мога да открия нищо, коеот малко от малко да може да се впише в това, което искаме да се получи. А със селект също не става- не ми отваря линковете, които уж съм задала като опции на падащото менЮ, а само си ги маркира и туй то. Ох, вие ли сте напред, аз ли съм много назад....

20/10/2014 23:31:28 20/10/2014 23:32:04

nikola.m.nikolov 830 Точки

Select не трябва да се използва за падащи менюта. Почти винаги за тази цел се използва ul (unordered list). Прегледай този линк, в който доста добре е обяснена идеята на падащите менюта:

How To Create a Pure CSS Dropdown Menu

20/10/2014 23:45:09

nikola.m.nikolov 830 Точки

Направих 4-та задача директно responsive. Демото и кода са малко по-назад в темата. Всякакви съвети и препоръки са повече от добре дошли точно за тази тематика.

22/10/2014 21:29:35

Filkolev 4482 Точки

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

Въобще не ми харесва как направих 1-ва. Останалите са ОК, валидират се, макар и с доста предупреждения. Не мисля, че ще имам време да ги доукрасявам, така че колкото толкова.

От тук нататък не мисля да правя задачите с повишена трудност, много време отнемат.

01. Website Header - КОД, ДЕМО

02. Website Footer - КОД, ДЕМО

03. SoftUni News - КОД, ДЕМО

04. Pretty Website - КОД, ДЕМО

23/10/2014 17:55:59