Домашно CSS Overview - 2 зад. Въпроси § Отговори


6
Тук обсъждайте 2 задача от първата лекция за CSS - Overview.



Отговори



0
Искам да маркирам редовете на таблицата през един и да им задам background-color: .... ; Може ли това да стане с помощта на псевдо клас или псевдо елемент ?

от xpuc7o (159 точки)


0
Един елегантен метод тук: http://www.w3.org/Style/Examples/007/evenodd Забележка: nth-child не работи под IE.

от Velidar (1099 точки)

0
все още не сме учили css3 така че просто си правиш 2 класа и ги слагаш на редовете

от paveld3 (17458 точки)



0

Структурата на самата таблица предполагам си я правим с <table>?

И също така оцветяването през един ред, как ще е по - добре да го направим със nth-child както предложи @Velidar или с класове ?


от lubomirivanov (0 точки)


0
с класове за предпочитане

от paveld3 (17458 точки)

0
Аз пък ще го правя с "id" щото съм мазохист :) А ако си направя таблицата с border-и с различна дебелина и цвят и различен радиус на ъглите взимате ли точки? collapse="collapse" също е забавно нещо :)




0
Когато задам:
td {
margin: 0;
}
между клетките пак остава място... Това може ли да се оправи със CSS или трябва да използвам cellspacing="0" ?

от xpuc7o (159 точки)


0
cellspacing...............

от paveld3 (17458 точки)

0
border-spacing:0px; при мен свърши чудна работа




3

Колеги, имам под опера следния проблем, на картинката съм го показал. Отначало почнах с <thead> и <th> за горните полета, но при тях беше още по бъгаво и затова минах направо всичко да е на <tr> и <td>. Как точно трябва да се реализира това напасване на горния ред върху долния, за да ми излизат бордерите нормално? В момента съм написал следния код който се отнася за редовете и клетките вътре:

 

tr:first-child td { border: 1px solid #3a8f08; }
td { border: 1px solid #c7c5ae; }
 
Пробвах да задам и с класове и ID да дам за тежест (и със z-index даже опитах :D) на всяко най-горно <td> и на <tr> пробвах, никъде нищо не се случва. Другото което се сещам което ще тръгне на 100% е да наблъскам 2 таблици една под друга, и така ще тръгне, но ми се иска да видя някакъв начин за подкарване на бордерите в една таблица. Така че давайте идеи и да видим кой е най-удачния начин това да се направи.
 
Пробвах и едни друг вариант, при който на втория ред задавам на клетките отгоре да нямат рамка ( border-top: none; ), обаче при този вариант, излиза следната гадост
 
 

от Viktor_Ivanov (2505 точки)


0
Опитай да размениш редовете. Пробвай така:
td { border: 1px solid #c7c5ae; } tr:first-child td { border: 1px solid #3a8f08; }

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

0
ок пробвах, но няма ефект, а и по принцип мисля че трябва да са подредени в този вариант
tr:first-child td { border: 1px solid #3a8f08; } td { border: 1px solid #c7c5ae; }
защото така вървят по ред и като значимост, все пак първия ред от кода се отнася и за първия ред на таблицата, ама де да знам...

от Viktor_Ivanov (2505 точки)



7

Колеги, предлагам ви архив от 56 икони на знамена в gif формат. Необходимите за задачата също са включени - World Flag Emotes.


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


1

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

Това ми е крайният резултат:

За сведение на колегата @Виктиор Иванов - няма вдлъбнат пиксел под Опера!

Някои насоки как съм го реализирал:

1. html код: http://pastebin.com/XmmchY2s
2. css код: http://pastebin.com/yk5ZkkHJ

Фрагментите код предимно са свързани с възникналия проблем на колегата, без да включват цялостно решение на задачата.

Много исках да съкратя кода в "colgroup" на:

<col span="4" class="main-border" />

...посредством "span", но така написано под Chrome не ми се виждат бордерите на колоните. Ако имате идеи защо, пишете.

Поздрави!


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


0
А защо ти е наистина е по-дълго, но поне намирам смисъл.


0
истината е че има яко бъгове с тия таблици и бордери, докато тествах най-различни варианти се сблъсках с какви ли не :D Накрая ше наблъскам 15-20 вложени таблици и ще заспи. :D

от Viktor_Ivanov (2505 точки)



0

Някой реализирал ли е изписването на "Mexico" по този начин:

Предполагам тук се задава някакъв друг език, различен от английски... Някой би ли споделил идеи, ако е отделял време да си поиграе с това?


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


0
Аз се сетих за è (HTML кода на символа è), но не зная дали това е по-коректния вариант в случая пред това да се избере друг език?

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

0
При мен държавите и имената на хората са други :)




0

Здравейте!

Проблемът с колоната "Country" съм решил, като оставям празно съответното <td class="germany"></td> и стилизирам:

 

.germany:before {
     content: "Germany";
     background-image: url("germany.gif");
     background-repeat: no-repeat;
     padding-left: 30px;
}
По този начин съответната клетка се запълва автоматично.
Обаче, по-правилно ми се струва да се задеде class на целия ред <tr class="country">, и да се стилизира третата клетка от реда.
Някой знаели как ще стане нещо от сорта:
tr.germany > td +... 3-та клетка. Нещо не мога да го измисля.

от ipankov (425 точки)


0
проблема не е с колоната "Country", а с бордерите, че под опера долния застъпва горния, ако се ползва border collapse="collapse" на елемента table. Нещо не те разбрах за какво решение и какъв проблем говориш.

от Viktor_Ivanov (2505 точки)

0
Може да го направиш с CSS3:
tr.germany > td:nth-child(3):before { ... }

от Yavor Atov (0 точки)



0
Добре де, аз като по-будала да питам....
Толкова ли ви е лесно да се чудите 2-3 часа как да направите трета клетка от пети ред да е с червен фон??
Много по-лесно ми се вижда варианта с класове и ID-та... Много по-често бихме ползвали този тип на стилизиране от колкото псевдо-елементи/класове и т.н...
Това, че има 2-3-5-10 варианта да се постигне нещо, съвсем не означава да търсим най-трудния.... Но пък всеки си знае...
Аз само любопитствам защо сте мазохисти. :)

от alloces (280 точки)


0
колега, точно горе в поста ми съм описал лесния начин с най млако код и разправии, ама пуста опера, бъгляса се :)

от Viktor_Ivanov (2505 точки)


0
Искам помощ със страничните бордари на колоните как трябва да се направят. Четах пробвах не ми се получава. На кое трябва да се зададе бордер за да имат само колоните и да не се допират 2 бордара в смисал навсякаде да е 1px поне така изглежда на снимката.

от Alekdandur88 (128 точки)


0
Най-простото решение е border-collapse: collapse на цялата таблица. Това ще слее рамките и ще игнрорира всякакъв border-spacing или атрибут cellspacing. Друго решение, в отговор на проблема с врязания пиксел, съм предложил по - горе (предпоследното мнение в първия пост на г-н Янков). Накратко е следното: border-spacing: 0 на таблицата (долепва ги) и после слагаш нужните рамки само частично на по 2 от страните. Примерно на td и th от таблицата слагаш border-left и border-bottom. По тоя начин излиза като с border-collapse: collapse.

от Velidar (1099 точки)

0
ок ето малко от кода който написах за тия пусти бордери.
td.t_head { border-left: 1px solid #3a8f08; border-top: 1px solid #3a8f08; border-bottom: 1px solid #3a8f08; border-right: 1px solid #6cc71f; } Това е класа на първите 3 клетки на най горния ред който съм задал.
td.t_head_last { border: 1px solid #3a8f08; } А това е класа който съм задал на последната клетка
Това е за надолу редовете и първите 3 клетки отново td.body { border-left: 1px solid #c7c5ae; }
Това е за последната клетка за редовете надолу td.body_last { border-right: 1px solid #c7c5ae; border-left: 1px solid #c7c5ae; }

от Viktor_Ivanov (2505 точки)