[CSS] Домашно CSS Overview - 2 задача - сезон 2012/2013


21

Нека коментираме задача 2 ( табличката със хората, техните националности и т.н. ) от CSS Overview тук.

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

https://www.dropbox.com/sh/7r8j1bumazak4ir/XWMEBcIRsL

Относно решението:

Обикновенна таблица с 4 колони и 5 реда. Стилове за цвят, използаме nth-child за да стилизирам през ред, флагчетата си ги правя с картинки.

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


Ето линк към старата тема от предишния курс: http://goo.gl/cniAc

 




Отговори



8

Ето и моето http://bobbykolev.com/others/css-overview-2/

Мисля, че през jsFiddle ще е по-удобно вместо да се теглят зипове.


от bobbykolev (4168 точки)


0
Мда jsFiddle ще е по-добър вариант. В следващи проекти ще използвам него.

от Teodor92 (13062 точки)

0
@bobbykolev - Не виждам къде ти е класа "brd" в .css файла ;).

от georgi.s.yankov (6219 точки)



5

И по това домашно вече има създадена тема ТУК. Това е от мен: http://jsbin.com/awazen/1/

Не трябва да се забравя <form>, заради инпутите, макар в случая да са disabled. За Мексико се ползва специалният символ в html-а: &eacute; 

За флаговете - и с бекграунд картинки може, идеален повод да се упражнят класовете, но и аз наблегнах на CSS3 селекторите. 


от dpeeva (1139 точки)


0
Темата към която е този линк е от мартенския курс, който има различния с този който е в момента. Мерси, че ми напомни за form - a бях го забравил.

от Teodor92 (13062 точки)

0
Курсовете са различни, но тази задача от домашното е една и съща. Поне аз не видях разлики. В плюс е да се изчете предната тема, там доста нещата са казани вече.

от dpeeva (1139 точки)



1

Тая задача ми взе здравето и пак не стана като хората :D
http://dox.bg/files/dw?a=92f98c95b1


от Mahata231 (1351 точки)


1

Здравейте колеги!

След по-задълбочено разглеждане на изображението от  домашно номер 2 си направих следните заключения:

1) Таблицата има бордер само от долу.

2) Бордера между отделните клетки е някак двоен ( което се оказа голям проблем),

3) Чекбоксовете са сиви..( под Opera става с селектора input [type='checkbox']{ some value} или чрез картинка, но не ми се струва удачно...

Ето линк  ЦЪК  към моята работа до момента.

п.с.Под Chrome, box-shadow работи, но някакси под Firefox се чупи. Съвети и мнения ще са от полза :)

 


от profesor4eto (0 точки)


0
не виждам кой точно box-shadow ти се чупи, но пробвай към CSS-a да добавиш -moz-box-shadow

от Mahata231 (1351 точки)

0
сложил съм го... Ще погледна кода отново!

от profesor4eto (0 точки)



3
Към JSFiddle: http://jsfiddle.net/kirov/gN6EB/
Архив в Dropbox: https://www.dropbox.com/s/bgit9g483iunuvt/02.Table.zip

от kirov (4821 точки)


0
Ето тук една част от CSS кода ти се повтаря:
td.country { padding-left: 33px; } td.country.germany { background: url("http://stkirov.files.wordpress.com/2012/12/germany.png") no-repeat 3px; } td.country.mexico { background: url("http://stkirov.files.wordpress.com/2012/12/mexico.png") no-repeat 3px; } td.country.uk { background: url("http://stkirov.files.wordpress.com/2012/12/uk.png") no-repeat 3px; }
Същото би могъл да го резлизираш с малко по-оптимизиран код:
td.country { background-repeat: no-repeat; background-position: 3px center; padding-left: 33px; } td.country.germany { background-image: url("http://stkirov.files.wordpress.com/2012/12/germany.png"); } td.country.mexico { background-image: url("http://stkirov.files.wordpress.com/2012/12/mexico.png"); } td.country.uk { background-image: url("http://stkirov.files.wordpress.com/2012/12/uk.png"); }
Както виждаш, всички общи неща съм ги изнесал в класа "country".

от georgi.s.yankov (6219 точки)

0
Благодаря ти! Не се бях замислил. :)

от kirov (4821 точки)


0
Много ще се радвам на критика за моето решение като начинаещ, за да не допускам същите грешки и следващия път. https://www.box.com/s/mpad1ckqxrj596t1478i

от rcson (360 точки)


0
Ето някои неща който ми направиха впечатление: I. HTML: 1. Липсват ти атрибутите alt, width, height на таговете. 2. Защо ти се повтаря 2 пъти checked ? 3. Защо имаш 2 tbody тага ? 4. Единият ти checkbox трябва да е disabled - виж картинката пак. II. CSS 1. Форматирай си кода - всяко правило на нов ред, индент, коментари - не е задължително, но е добра практика. 2. Опитай се да направих таблицата да прилича още повече на картинката - поиграй си с бордера, разстоянието между клетките и т.н.

от Teodor92 (13062 точки)

0
Колега хвърлих едно око на твоята работа. Аз също съм начинаещ, но бих ти препоръчал следните в случая. 1) Мисля, че е по семантично да сложиш цялата таблица във една форма. Все пак имаш ; 2) Използвай table { border-collapse:collapse; }; 3) Използвай padding за клетките да не е залепен текста за тях; 4) Препоръчвам да използваш border-style:solid; 5) Обърни внимание на детайлите: няма отвсякъде бордери ( трябва да се махнат) и самият бордер е някак двоен с ралични цветове( например, photoshop много помага да се види разликата и да си определиш точните цветове); 6) Аз изполвах box-shadow за да се доближа до желаният ефект. Мисля, че става и с outline(външен бордер).
Дано сам помогнал. Поздрави!!!

от profesor4eto (0 точки)



0
https://www.dropbox.com/s/vaz8rduqtw4dmg2/2.0%20Promotion%20List.rar Ето моето решение, моля за критки и коментари ! :)

от Georgi Georgiev 1 (0 точки)


0
Разгледах ти домашното и няколо неща ми направиха впечатление: 1. Хубаво е да сложиш име на формата, както и action. 2. Няма нужда да използваш headingRow в thead-а, тъй като можеш да селектираш елементите само по th тага. 3. Липсват ти widht и height в img таговете. Слагат се, за да може браузъра предварително да задели необходимото място за картинките. 4. Хубаво е да сложиш padding на td таговете, за да не ти е толкова забит текста в рамката на таблицата.
Това е, което ми направи впечатление, надявам се да съм била полезна :)


0
Благодаря за коментара. Доста елементарни грешки явно от бързане да го направя. width и height принципно слагам, не знам защо съм ги пропуснал...

от Georgi Georgiev 1 (0 точки)


0
Това е от мен, не се получи както исках но като за първо домашно става.
http://jsfiddle.net/Hrisi/WrReX/

от hrisi (224 точки)


0
Защо? Трябва малко с бордера да си поиграеш и последната колона не трябва да е толкова широка. Иначе изглежда добре.

от Mitko_Mitev (1276 точки)

0
Да наистина тези две неща ми бягат , но ще ги оправя задължително(утре :)). Мерси за help-а

от hrisi (224 точки)



0
http://jsfiddle.net/FLISEN/KRgbZ/1/
Мился, че успях почти на 100% да го докарам. Казвайте, ако нещо не е както трябва. :)

от Mitko_Mitev (1276 точки)


0
Като слагаш картинки в кода през JSFiddle, е добре да слагаш целия линк към тях, а не релативен път, водещ към твоята папка. Не че е проблем, просто така решението ти ще е по-пълно. Виж аз как съм ги сложила при мен: http://jsfiddle.net/AcU2q/1/


0
е ясно да, но аз обработват размерите чрез програма и т.н. важне е идеята... :)

от Mitko_Mitev (1276 точки)



0
https://www.dropbox.com/s/sd2sxu6bi2unrpk/table%202.rar Още един вариант на задачата :))