Loading...
velio84 avatar velio84 241 Точки

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

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

github

01 Website Header

02 Website Footer

03 SoftUni News

04 (not that) Pretty Website

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

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

4
Web Fundamentals - HTML5
v1ppers0nn avatar v1ppers0nn 234 Точки

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

0
velio84 avatar velio84 241 Точки

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

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

0
v1ppers0nn avatar v1ppers0nn 234 Точки

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

1
velio84 avatar velio84 241 Точки

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

0
nikola.m.nikolov avatar 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-те задачи

5
22/10/2014 20:02:46
Filkolev avatar Filkolev 4482 Точки

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

1
a.angelov avatar 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 трябва да я доизкусоря, че таговете се опитват да излязат от артикълите/ smile

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

0
20/10/2014 12:23:28
Filkolev avatar Filkolev 4482 Точки

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

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

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

0
magdalena70 avatar 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; и не работи,трябва да задам фиксирана дължина,иначе бекграунда изчезва.Ако някой има идея...ще съм много благодарна.

1
24/10/2014 14:45:04
velio84 avatar velio84 241 Точки

Здрасти,

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

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

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

1
19/10/2014 14:48:07
magdalena70 avatar magdalena70 96 Точки

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

0
VenelinGrozev avatar 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

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

1
20/10/2014 01:24:37
nikola.m.nikolov avatar nikola.m.nikolov 830 Точки

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

height: 270px;

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

1
20/10/2014 12:31:17
VenelinGrozev avatar VenelinGrozev 130 Точки

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

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

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

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

0
mihayloff14 avatar mihayloff14 824 Точки

Здравейте,

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

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

Ето кода ми - GitHub

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

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

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

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

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

1
20/10/2014 15:43:50
mihayloff14 avatar mihayloff14 824 Точки

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

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

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

0
20/10/2014 23:32:04
nikola.m.nikolov avatar nikola.m.nikolov 830 Точки

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

How To Create a Pure CSS Dropdown Menu

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

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

1
Filkolev avatar Filkolev 4482 Точки

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

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

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

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

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

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

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

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