Софтуерно Инженерство
Loading...
+ Нов въпрос
a.angelov avatar a.angelov 1331 Точки

[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 233 Точки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В условието пише да не 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 233 Точки

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

0
Filkolev avatar Filkolev 4428 Точки

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

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

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

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

1
Filkolev avatar Filkolev 4428 Точки

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

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

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

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

0
verito898 avatar verito898 SoftUni Team 290 Точки

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

0
velio84 avatar velio84 241 Точки

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

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

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

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

То хубаво ни е казано да не променяме 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 832 Точки

На 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 832 Точки

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

0