Номер 2

Медальный зачет

Ineska · 26.Декабрь.2015 16:11:16

А как же кнопка </>?

Lion · 26.Декабрь.2015 16:13:43

Действительно. Я что-то не заметил.
Я намудрил тут, я знаю. Но я пытался подстроиться под то, что видел. Зато сам пытался сделать)

html

`

2 испытание: медальный зачет

Нидерланды

`

css

`html, body{
margin:0;
padding:0;
}
body{
width:450px;
font-family:“Arial”, sans-serif;
font-size:16px;
}
h1{
padding:0 20px;
margin:0;
margin-top:20px;
font-size:18px;
font-weight:normal;
}
table {
border-collapse: collapse;
}
.grey {
background-color: #eeeeee;
}
.number {
color: #999999;
font-style: italic;
padding-right:5px;
}
td {
padding: 10px 19.5px;
}
.country {
padding-left: 3px;
}
.total {
text-align: right;
padding-left:25px;
}
.flag {
padding-left: 15px;
}
.nadpis {

}

/*
Все внутренние отступы кратны 5
Серый цвет фона: #eeeeee
Серый цвет цифр: #999999
*/`

Ineska · 26.Декабрь.2015 16:45:58

Ну, да… Перестарались троху) Отмечу самое главное. Сначала заголовок первого уровня. Вот зачем вы его сделали еще более “жирным”, да еще и в html-коде?) Каждый элемент (тэг) имеет свои стили по умолчанию. Заголовок и так будет выделяться.
Все оформление лучше делать в CSS.
Далее хотелось бы обратить ваше внимание на название классов. Транслитом лучше не пишите.
Таблицу не надо оборачивать в блок. Я понимаю, что вы хотели сделать ее уже, но в задании сказано, что не нужно изменять ширину таблицы или ячеек, работать только с отступами.
Отступы одинаковы для всех ячеек (по 10px сверху и снизу и по 20px справа и слева), за исключением столбца с флагами, где отступы справа и слева придется убрать совсем.
Если что-то не понятно, напишите еще.
И возьмите на заметку этот материал. Мне как новичку было очень полезно.
Удачи)

Lion · 26.Декабрь.2015 16:48:08

Спасибо. Попробую, но уже завтра, поскольку платной подписки у меня (пока) нет, а попытки закончились :c

Lion · 27.Декабрь.2015 12:25:31

Спасибо большое! Всё получилось. 100% результат)

AleXandra_1399 · 19.Январь.2016 18:31:57

Помогите, пожалуйста…(( медаль сместить вправо

Ineska · 20.Январь.2016 07:56:55

Вы объединили четыре ячейки в одну, а надо было только три. То есть три ячейки объединить в одну и оставить ее пустой, а золотая медаль отдельно в своей ячейке, так же как серебряная и бронзовая.

Ri4i · 20.Январь.2016 15:39:26

Подскажите пожалуйста, где у меня ошибка?

   <tr>
      <td colspan="3" ></td>
         <td class="gold"> <img src="/assets/ifmo/medal-gold.png"> </td> 
         <td class="silver"><img src="/assets/ifmo/medal-silver.png"> </td> 
         <td class="try"><img src="/assets/ifmo/medal-bronze.png"> </td> 
         <td class="total"><img src="/assets/ifmo/medal-total.png"> </td> 
        </tr>
 <tr class="grey" >
     <td class="number">1</td>
     <td class="flag"><img src="/assets/ifmo/germany.png"></td>
     <td class="country"> Германия</td>
     <td class="gold">	7</td>
     <td class="silver">	3 </td>
     <td class="try">2</td>
     <td class="total">12</td>
     </tr>  
     
     <tr >
         <td class="number">2</td>
         <td class="flag"><img src="/assets/ifmo/nederlands.png"></td>
         <td class="country">Нидерланды</td>
         <td class="gold">5</td>
         <td class="silver">5</td>
         <td class="try">7</td>
         <td class="total">17</td>
         </tr>
         
         <tr class="grey">
         <td class="number">3</td>
         <td class="flag"><img src=" /assets/ifmo/norway.png"></td>
         <td class="country">Норвегия</td>
         <td class="gold">5</td>
         <td class="silver">3</td>
         <td class="try">6</td>
         <td class="total">14</td>
         </tr>
         
         
         <tr >
         <td class="number">4</td>
         <td class="flag"><img src="/assets/ifmo/switzerland.png"></td>
         <td class="country">Швейцария</td>
         <td class="gold">5</td>
         <td class="silver">1</td>
         <td class="try">1</td>
         <td class="total">7</td>
         </tr>
         
         
         <tr class="grey">
         <td class="number">5</td>
         <td class="flag"><img src=" /assets/ifmo/russia.png"></td>
         <td class="country">Россия</td>
         <td class="gold">4</td>
         <td class="silver">7</td>
         <td class="try">5</td>
         <td class="total">16</td>
         </tr>

</body>

html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    font-family:"Arial", sans-serif;
    font-size:16px;
}
h1{
padding:0 20px;
margin:0;
margin-top:20px;
font-size:18px;
font-weight:normal;
}
table
{ border-collapse: collapse;
}
td
{border: 0px;}

.grey {
background-color: #eeeeee;
}
.number
{
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
color: #999999;
font-style: italic;
}
.flag
{
padding-bottom: 10px;
padding-top: 10px;
}
.country
{
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;

}
.gold
{
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px:
color: #999999;
}
.silver
{
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
color: #999999;
}
.try
{
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
color: #999999;
}
.total
{
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
font-weight: bold;
}

Ineska · 20.Январь.2016 18:02:49

Цвет текста в таблице черный во всех столбцах, кроме первого. Выравнивание текста для последнего столбца по правому краю. Обнулите отступы справа и слева для столбца с флагами.
В этом фрагменте:
.gold
{
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px:
color: #999999;
}

обратите внимание на выделенную мной строку. В конце должна быть точка с запятой.
P. S. Попробуйте немного сократить свой код, повторяющиеся правила можно объединить.

AleXandra_1399 · 21.Январь.2016 13:11:55

Спасибо, а что еще не так?

Ineska · 21.Январь.2016 13:12:59

А что еще? Не хватает вам до 100%?

AleXandra_1399 · 21.Январь.2016 16:56:19

Нет, я предполагаю, что дело в отступах…
html, body{
margin:0;
padding:0;
}
body{
width:450px;
font-family:“Arial”, sans-serif;
font-size:16px;
}
h1{
padding:0 20px;
margin:0;
margin-top:20px;
font-size:18px;
font-weight:normal;
}
i{
color: #999999;
}
table {
width:440px;
height:200px;
border-collapse: collapse;
padding:10px;

}
td {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
padding-left: 10px;
}
tr:nth-child(even) {
background-color: #eeeeee;
}

Ineska · 21.Январь.2016 20:33:36

Оу, это совсем не тот вариант css-кода. Я подсказала, как довести ваш первоначальный вариант до 100%.

AleXandra_1399 · 22.Январь.2016 16:49:07

В смысле? А что не так? Я и спрашиваю вашей помощи))

Ineska · 22.Январь.2016 18:24:43

Ой, извините, пожалуйста. В этой теме не только вы задавали вопрос. Запуталась немножко. Отступ слева 20px, высоту и ширину таблицы задавать не надо. В столбце с флагами отступы справа и слева обнулите. Если этого не хватит до 100%, пришлите картинку.

AleXandra_1399 · 22.Январь.2016 18:33:42

Ура, спасибо большое!

Igoreha · 11.Апрель.2016 07:11:49

Друзья вот хороший вариант на 100%. Не используя классы и прекрасно демонстрируя гибкость использования псевдоклассов, не загаживая ни html ни css коды

HTML

<table>
<tr>
    <th colspan="3"></th>
        <th><img src="/assets/ifmo/medal-gold.png"></th> 
        <th><img src="/assets/ifmo/medal-silver.png"></th> 
        <th><img src="/assets/ifmo/medal-bronze.png"></th> 
        <th><img src="/assets/ifmo/medal-total.png"></th>
            </tr>
<tr>
        <td>1</td>	
        <td><img src="/assets/ifmo/germany.png"></td>
            <td>Германия</td> 	
            <td>7</td>	
            <td>3</td> 	
            <td>2</td> 	
            <td>12</td> </tr>
<tr>
        <td>2</td>
            <td><img src="/assets/ifmo/nederlands.png"></td>	
            <td>Нидерланды</td> 	
            <td>5</td> 	
            <td>5</td> 	
            <td>7</td> 	
            <td>17</td> </tr>
<tr>        
        
        <td>3</td>
            <td><img src="/assets/ifmo/norway.png"></td>	
        <td>Норвегия</td> 	
        <td>5</td> 	
        <td>3</td> 	
        <td>6</td> 	
        <td>14</td> </tr>
<tr>    
        
        <td>4</td>
            <td><img src="/assets/ifmo/switzerland.png"></td>	
        <td>Швейцария</td> 	
        <td>5</td> 	
        <td>1</td> 	
        <td>1</td> 	
        <td>7</td> </tr>
<tr>    
        <td>5</td>
            <td><img src="/assets/ifmo/russia.png"></td>	
        <td>Россия</td> 	
        <td>4</td> 	
        <td>7</td> 	
        <td>5</td> 	
        <td>16</td> </tr>
        </table>

css

table {
    border-collapse:collapse;
}
tr:nth-child(2n) {
    background-color:#eeeeee;
    
}
td,th {
    padding:10px 20px;
    
}
td:first-child {
    font-style:italic;
    color:#999999;
}
td:nth-child(2) {
    padding:0px;
}

td:last-child {
    text-align:right;
    font-weight:bold;
}

Ineska · 11.Апрель.2016 07:53:44

Поправьте отображение своего кода.

Igoreha · 12.Апрель.2016 14:20:27

А что с ним не так?

Ineska · 12.Апрель.2016 17:39:33

Теперь так. Вы же исправили.