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

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

Никой не иска да пусне тема за домашното :)

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

Код - GigHub.

01. Unresponsive-Homework - DEMO; /в preview-то под Google Chrome aside ми пада долу вдясно неясно защо, под Firefox е ок, при отваряне директно от компютъра при мен е добре - ако някой може да разбере защо се получава така.../;

02. Flowers Home - DEMO;

03. Bootstrap Boot Camp - DEMO.

 

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

Забележка: CSS-а ми не е от най-подредените - върху това имам да поработя.

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

Колега, на първа задача махни float:right и сложи vertical-align:top; и всичко трябва да се оправи.
На втора: текста на левия сайдбар трябва да е по средата на картинките. Десният сайдбар не си го направил както на картинката, излиза ми всичко едно след друго, няма нови редове.

1
24/10/2014 19:42:49
a.angelov avatar a.angelov 1316 Точки

Благодаря за коментара!

На втора задача оправих текста и картинките в левия сайдбар. За десния сайдбар не съм съгласен обаче с теб - текста е параграф и няма никакви нови редове, нормално е да излиза едно след друго - на картинките също е така ако погледнеш внимателно - личи си и на трите скрийншота.

На първа задача предполагам, че проблема е в самото github preview и засега ще го оставя така - и друг човек ги отваря на негов компютър с различни браузъри - нямаше проблеми.

0
24/10/2014 21:33:02
v1ppers0nn avatar v1ppers0nn 234 Точки

То не са празни редове а просто думата е дълга..

Виж при мен как излиза, и как трябва да е: http://i.imgur.com/Q1q9B1k.jpg.

Относно първа задача, не знам защо ги правиш float: left. Аз не ги правя така. Просто като си зададеш да са inline-block то си ги прави на един ред, задаваш им широчина и те си пасват.

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

Разбрах какво искаш да кажеш :) Аз понеже го гледам на 15 инчов монитор и затова не виждам като се разпъне повечко как изглежда. Явно трябва да задам фиксирана широчина за резолюция над 960 пиксела за да не се променят.

Благодаря и за съвета за първа задача!

ПС. Между другото не виждам причина да не ползвам float-ове - не би трябвало да има проблеми и с тях :)

1
25/10/2014 08:21:22
v1ppers0nn avatar v1ppers0nn 234 Точки

Колега, на трета задача хедъра не е зелен. :) Бутоните долу са зелени, трябва да са бели. И горе в дясно Click me зелено...

0
25/10/2014 22:56:25
a.angelov avatar a.angelov 1316 Точки

В условието пише да не apply-ваме същия style ;)

Create a Web page like the picture below. Make it responsive with steps by your choice. Use BOOTSTRAP FRAMEWORK to achieve the desired results. Do not use the same styles.

0
25/10/2014 23:01:14
v1ppers0nn avatar v1ppers0nn 234 Точки

Не съм го прочел, окей :)

0
Filkolev avatar Filkolev 4482 Точки

Колеги, може ли малко помощ с 2-ра задача. Как точно да регулирам броя снимки на ред в section-a? 

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

Аз съм го направил с настройване на width на снимката - първо е 24%, след това 32,2% и накрая 49%.

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

1
Filkolev avatar Filkolev 4482 Точки

Разположението не ми е проблем. Иначе и аз подхождам така, смалявам картинките (само че със зуум, което по-скоро не трябва да го ползвам май). Ще пробвам с проценти. 

За разположението: justify-content: space-between. Виж дали ще стане.

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

Не се получава..., намачква ми картинките :)

0
verito898 avatar verito898 265 Точки

На мен 2рата задача ми е горе доло 3мб  заради картинките .. как сте процедирали вие при качването  ? 

0
velio84 avatar velio84 241 Точки

От папката resources изтрий снимките на 1 и 2 задача, които показват как трябва да изглежда респонсива.

1
29/10/2014 23:40:20
verito898 avatar verito898 265 Точки

Еее то няма кой да гледа laughing // Благодаря !

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

То хубаво ни е казано да не променяме HTML файловете, само че да бяха добавили meta viewport-a. Аз реших да си го добавя все пак. Ачо, на първа задача може да сложиш един text-indent на параграфите в article, защото трябва първия ред да е изместен навътре. 

След като вчера мина изпита днес на-накрая започнах и това домашно. 

1. Unresponsive Homework - CODE , DEMO

2. Flowers Home - CODE , DEMO

3. Bootstrap Boot Camp - CODE , DEMO

0
30/10/2014 22:45:16
magdalena70 avatar magdalena70 96 Точки

Homework: Responsive Design. Bootstrap - тук всяка задача ми отнема по 5 часа...така че на изпита не знам как трябва да стигне времето...:(

1.Unresponsive Homework - DEMO  HTML  CSS

2.Flowers’ Home - DEMO  HTML  CSS

3-Bootstrap-Boot-Camp - DEMO  HTML  CSS

0
31/10/2014 15:36:44
nikola.m.nikolov avatar nikola.m.nikolov 830 Точки

На 1-ва задача имаш някакъв хоризонтален scroll. Махни от body  width: 100%; или го направи на max-width: 100%.

0
30/10/2014 15:22:05
magdalena70 avatar magdalena70 96 Точки

ok :) Пробвай дали се оправи....Развали ми се лаптопа и сега работя на едно малко лаптопче,дето не мога да преценя какво се случва....и на изпита ще трябвада ходя с него...:(

0
30/10/2014 16:08:49
nikola.m.nikolov avatar nikola.m.nikolov 830 Точки

Няма го скрола. Аз на изпит сядам на компюътрите на СофтЮни. Вчера отидох 1 час по-рано и почти всички компютри бяха свободни. Имат качени доста нещо по тях, така че за мен беше все едно съм на desktop компютъра вкъщи.

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