Номер 2

Курсы Промежуточные испытания
1

Господа, помогите, пожалуйста со вторым номером. Уже второй день пытаюсь его пройти, но все тщетно. Что же не так с ним? Ведь сходство налицо. Да, есть небольшие различия, но ведь они совсем незаметные с первого взгляда? Помогите, плз.
Я не прошу сказать мне полный ответ. Просто намекните)
Ибо хочется самому сделать всё, ведь учусь я.

1A599RMUKzK7qA.png1505×882 92.1 KB

2

Нужен код ваш, полностью.

4

зачем удалили?(

5

Минутку. Нужно придумать как его вставить) Он большой, его не заскринить одним изображением. А сюда вставить не получается

6

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

7

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

html

`

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

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

1 Германия 7 3 2 12
2 Нидерланды 5 5 7 17
3 Норвегия 5 3 6 14
4 Швейцария 5 1 1 7
5 Россия 4 7 5 16
`

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
*/`

8

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

2 лайка
9

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

1 лайк
10

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

2 лайка
11

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

Имя файла изображения1366×768 175 KB

12

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

13

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

   <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;
}
14

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

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

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

16

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

17

Нет, я предполагаю, что дело в отступах…
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;
}

18

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

19

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

20

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

21

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

1 лайк