[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

 




Отговори



0
На втория ред пробвам да сложа знамето през CSS, някой ще ми каже ли как да му дам padding-left за да изглежда по-добре? http://jsfiddle.net/dbrezoev/bMuYe/

от d.brezoev (212 точки)


0
Задай числови стойности на background-position вместо да му даваш left(с left го залепваш най в ляво) 5px 5% .... и така на татък.

от mitakis (218 точки)


0

Реших  знаменцата да са част от самия html. nth-child(2n) селектора прави всеки втори ред с друг фон. 

 
Направил съм бутона на 3тия ред disabled в самия html, което не знам дали не е по-добре да се прави в css-a.

от dzhenko (3893 точки)


1

http://jsfiddle.net/PetyaPetkova/re3P8/ едно решение и от мен.


от petyapetkova (402 точки)


0

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

Решение: https://github.com/MiroslavSimeonovIvanov/TelerikAcademy/tree/master/CSS_Styling_Course/CSS_Overview

Визия: https://drive.google.com/file/d/0B4osYVb7v4eRT3J1NS1NaTNObmc/edit?usp=sharing

За HTML - използвах <table>, също така знаменцата си ги подбрах от Google, а за CSS - tbody tr:nth-child(odd) и tbody tr:nth-child(even) за редуването на цветовете, а tbody:nth-last-child(odd) за най-долния border на таблицата. Това е моята визия за задачата, дано е полезна на някого. smiley