Всем привет!
Подскажите, пожалуйста, как во втором задании промежуточных испытаний (“Медальный зачет”) устанавливать отступы? Точнее, какая в них логика?
Визуально получилось вроде похоже, но только на 92%. Не могу понять, как надо мыслить:)
Угадывать чудом =D. Вообще это одно из самых сложных испытаний, имхо, если конечно заранее не знать, где какой отступ. Решить его везде с кратностью пяти у меня получилось только попытки с пятой. До этого всегда подгонял колонки как придётся, попиксельно, выгоняя их на 100% каждую отдельно. Основная сложность в том, что там везде разные отступы. Но найти какую-то логику в этом задании для меня тоже кажется нереальным)
Если попытаться подсказать без лишних спойлеров, то скажу: в верхней строке у медалей (th) и у остальных строк под ними отступы разные, и их подобрать сложнее всего, а первые три столбца стоят особняком и ни на что дальше не влияют. Лучше наверное попытаться угадать сначала именно «медальные» отступы, и помнить, что их вполне можно сделать кратными пяти.
1 лайк
Судя по скрину, у вас слишком большие отступы — 55px, даже видно, что таблица сильно расползлась. Можно попытаться начать исправление таблицы с этого.
Извольте, не такое уж оно и сложное, Я бы даже сказал совсем не сложное. Все вполне кратно 5, прошел со 2-3й проверки.
@Dina_, Вот решение в другой теме. Посмотрите, пожалуйста, внимательно, там ссылка на песочницу (в css указаны комментарии).
Типичные Ваши ошибки, которые видны из скриншота - инлайн стили для TR (background), когда в в CSS вы показали умение пользоваться псевдоклассом :nth-child().
И зачем Вы стилизуете предпоследний столбец в строке с помощью злоупотребления соседнего селектора td+td+td+td? Проще ведь сделать левый оступ у последнего?
Вот про логику не так уж и сложно, сделайте для начала всем ячейкам внутренний отступ 10px, от сюда можно примерно смотреть, если сверху и снизу по 10px. То визуально можно “УмножатЬ” это расстояние для горизонтальных отступов и так играться (даже не нажимая на проверку каждый раз).
Что по столбику со страной - все просто, Таблица сама подгонит ширину по самой длинной ячейке в столбце. Поэтому логичней было бы сделать отступ побольше справа (чтобы не сливалось с медалями).
Левый отступ для последнего столбца просто из-за простоты и возможностей nth-child() / last-child
P.s. от себя хотел добавить идею, что скорее всего трудности возникают из-за отсутствия центра в столбцах с медалями. Если бы медали были ровно по центру над счетом, было бы более логично.
3 лайка
Спасибо за советы! Сейчас буду разбираться…
Согласен, примерно это я и имел в виду, когда говорил, что в похожих колонках разные отступы. Именно это поначалу и сбивает больше всего. И именно из-за этого я и сам «завис».
А про сложность — всё-таки думаю, что именно для новичков это испытание одно из самых сложных ) по крайней мере, это первое испытание, где нужно всерьез подумать, как расположить элементы, а не просто расставить правильные теги и отступы. Все предыдущие решались легко за десять минут или чуть больше: всего-то делов, правильно сделай разметку а потом подровняй в CSS. А тут впервые возникает проблема, как и что подогнать, чтоб это было верным. В более ранних вроде отступы если и были, то были равными в одних и тех же столбцах, например.
1 лайк
Здравствуйте. Очень хочется выяснить про упомянутый ранее селектор td+td+td+td. Не совсем понимаю принцип его действия. Вместо него я использовала селектор td:nth-child(n+4) и с ним всё понятно. А вот о загадочном соседнем селекторе из 4-х элементов, хотелось бы узнать подробнее. Объясните, пожалуйста.
Эти два селектора по сути означают одно и то же. Просто способы разные.
Селектор с псевдоклассом означает в этом случае что-то вроде «начиная с четвёртого».
Селектор с плюсами называется соседним, и он означает, что перед td обязательно должны быть ещё три других. То есть, по сути это то же самое, просто разными способами.
1 лайк
В этом уроке есть информация на эту тему. К примеру, если написать td + td, это будет означать, что стили применятся к элементу td, если перед ним стоит другой td, а если td.row + td, то такая запись выберет элемент td, который идёт после td с классом row. Ещё пример: main h1 + p, тут будет выбран параграф, расположенный сразу же после заголовка, при том, что оба находятся в блоке main.
Поскольку почти любые селекторы можно комбинировать, то имеет смысл и запись td + td + td + td. В этом случае будет выбран td, который находится после td, который, в свою очередь, тоже после td — ну а уже перед ним тоже ещё один. Или, если проще, перед td должны обязательно стоять три таких же. То есть такая запись получится полностью совпадающей с td:nth-child(n+4).
Думаю, использовать селектор с псевдоклассом в этом случае намного проще.
1 лайк
@Pixikom, поясню, почему я написал именно так.
Дело в том, что такой способ задания - не очень рационален.
На самом деле незачем отсчитывать какой по счету будет столбец, проще сказать последнму: а ну ка сдвинься вправо (левым внутренним отступом).
Или если на то пошло, то не стоит использовать :nth-child(n+4), лучше уж тогда nth-child(4). Так вы железно зададите 4му столбцу, а в вашем примере, как и сказал выше @Leo: "Начиная с 4го, т.е. отступ задается 4,5,6,7…n стобцам)
Доброго времени суток!
Помогите, пожалуйста, разобраться! никак не пойму, как и что нужно добавить, чтобы табличка поднялась наверх.
Картинка:
код:
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 {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
padding-left: 20px;
}
tr:nth-child(2n) {
background:#eeeeee;
}
td:last-child {
text-align:right;
}
em {
color: #999999;
}
.flags {
padding-left: 0px;
padding-right: 0px;
}
уже всю голову сломала…
Чтобы понять, почему так, нужен ещё HTML-код. Приложите и его, пожалуйста.
html
<!DOCTYPE html>
<html>
<head>
<title>2 испытание: медальный зачет</title>
<meta charset="utf-8">
</head>
<body>
<h1>Медальный зачет</h1>
<table>
<tr class="medal">
<td colspan=3></td>
<td><img src="/assets/ifmo/medal-gold.png"></td>
<td><img src="/assets/ifmo/medal-silver.png"></td>
<td><img src="/assets/ifmo/medal-bronze.png"></td>
<td><img src="/assets/ifmo/medal-total.png"></td>
</tr>
<tr>
<td><em>1</em></td>
<td class="flags"><img src="/assets/ifmo/germany.png"></td>
<td>Германия</td>
<td>7</td>
<td>3</td>
<td>2</td>
<td><b>12</b></td>
</tr><br>
<tr>
<td><em>2</em></td>
<td class="flags"><img src="/assets/ifmo/nederlands.png"></td>
<td>Нидерланды</td>
<td>5</td>
<td>5</td>
<td>7</td>
<td><b>17</b></td>
</tr>
<tr>
<td><em>3</em></td>
<td class="flags"><img src="/assets/ifmo/norway.png"></td>
<td>Норвегия</td>
<td>5</td>
<td>3</td>
<td>6</td>
<td><b>14</b></td>
</tr>
<tr>
<td><em>4</em></td>
<td class="flags"><img src="/assets/ifmo/switzerland.png"?</td>
<td>Швейцария</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td><b>7</b></td>
</tr>
<tr>
<td><em>5</em></td>
<td class="flags"><img src="/assets/ifmo/russia.png"></td>
<td>Россия</td>
<td>4</td>
<td>7</td>
<td>5</td>
<td><b>16</b></td>
</tr>
</table>
</body>
</html>Я убрал br после строки с Германией, и всё заработало.
…>1</em></td> <td class="flags"><img src="/assets/ifmo/germany.png"></td> <td>Германия</td> <td>7</td> <td>3</td> <td>2</td> <td><b>12</b></td> </tr> <!--<br>--><!-- этот перенос убран --> <tr> <td><em>2</em></td> <td clas…
Видимо, внутри таблиц тег переноса вообще не работает, или работает как-то иначе) но у меня почему-то не вышло быстро нагуглить инфы на эту тему.
1 лайк
точно! спасибо огромное! заработало 
Попробуйте задавать ячейкам не ширину, а внутренние отступы.
Спасибо! Получилось более криво для восприятия глаза, но для браузера оказалось понятнее. 90%
Как восстановятся попытки - проверю что получилось.
Я смотрю не я один пытаюсь понять логику выполнения задания.
Повторю то, что написал в комментариях к заданию:
Что то грустно. Мне лично не хватает какой то внутренней логики, алгоритма что ли.
Типа: сначала задайте внутренние отступы для всей таблицы, а потом смотрите каждый столбец. Или наоборот: сначала подберите ширину колонок заголовка таблицы, потом каждой отдельной колонки… Не ясно за что хвататься. То ли бороться за каждую ячейку, то ли за каждый столбец в отдельности. И не понятно съедет ли то что уже сделал до этого.
Нет какого то общего подхода… После испытания: взломанный котопрофайл, то же руки опускаются.
В общем непонятно с чего начинать, как продолжать и чем закончить 
Сегодня хотел записаться на базовый интенсив, но теперь сомневаюсь, может это совсем не мое, и не стоит тратить свое время и время наставников ?
Ну…((
Что-то вы совсем загрустили. Первые трудности и сразу сдаетесь. Не надо так. Никто не говорил, что всё будет легко и с первого раза получаться. Терпение и, как говорил здесь один из учеников, “В”- “внимательность”.
Для каждого задания есть свой алгоритм. Совсем недавно здесь, на форуме уже был вопрос по второму промежуточному испытанию. Посмотрите здесь.
На форуме много полезной информации. Множество примеров разобранных заданий.
1 лайк