<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

Данный курс научит Вас программировать на языке C#, который является одним из самых востребованных языков программирования в мире. Курс состоит из 7 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

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

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Ошибки новичков при верстке сайтов #3

Ошибки новичков при верстке сайтов #3

Продолжим разбор с ошибок при верстке сайта, которые допускают начинающие верстальщики. Рекомендую начать с первой и второй части статьи, если кто не видел.

Ошибка #10. Фиксированная высота у блоков

Речь пойдет о блоках с текстом внутри. Верстальщик прописывает фиксированную (height) высоту блоку, радуется что демо текст помещается, вроде все выглядит хорошо. На самом деле, сам того не подозревая, верстальщик уже совершил ошибку, которая пока незаметна. А проявится она уже в руках заказчика. Стоит заказчику добавить немного больше текста и он начнет вылазить за пределы блока. Чтобы избежать такого сценария, нужно протестировать верстку на переполненность контентом и использовать свойство min-height.

.box-info {
    padding: 0 0 20px 0;
    min-height: 150px;
}

Дополнительный контент поломает верстку и рано или поздно эта ошибка проявится. Чтобы убедиться, что такого не случится, нужно всегда тестировать верстку на переполненность контентом и предусмотреть это в CSS свойствах.


Ошибки новичков при верстке сайтов.

Ошибка #11. Путаница между margin/padding

Начинающему верстальщику бывает не ясно, в чем разница между свойствами margin и padding. Ведь оба свойства являются отступами и ошибка может остаться незамеченной. Если быть точным, то все-таки padding правильно называть полем и оно служит пространством между границей блока и контентом внутри него. Пространство нужно, чтобы текст не прилипал к границе. Элемент может иметь одинаковую ширину полей, как на примере ниже. Но это необязательно, для каждой стороны поля можно задавать свою ширину или ставить нулевое значение.

.box {
    padding: 30px 30px 30px 30px;
    // сокращенная запись padding: 30px;
}

Зеленая область - это padding

Ошибки новичков при верстке сайтов.

Margin - это внешний отступ для отделения одного элемента от другого элемента. Мы отделяем заголовок h1 от абзаца с текстом.

// HTML
<h1>Документация</h1>
<p>...</p>

Эта запись обозначает буквально следующее, что у заголовка h1 нет верхнего, правого и левого отступа. Но нижний отступ равняется 20 пикселям.

// CSS
h1 {
    margin: 0 0 20px 0;
}

Желтая полоска - это margin

Ошибки новичков при верстку сайтов.

Пример, как не нужно делать

Сейчас я покажу на примере, как легко запутаться в этих двух свойствах. У данного блока отступ между иконкой и заголовком (зеленая область) задан паддингом. Несмотря на то, что внешне все выглядит хорошо, здесь вместо паддинга нужно использовать маржин. Поскольку мы имеем дело с отступом между элементами. Вот так легко можно допустить ошибку и даже ее не заметить.

// HTML
<div class="box-icon ">..</div>
<h1>Документация</h1>

// CSS
.box-icon {
    padding: 0 0 30px 0;
}

Ошибки новичков при верстке сайтов.

Пишем код правильно

// CSS
.box-icon {
    margin: 0 0 30px 0;
}

Ошибка #12. Не проверяют межстрочный интервал

Данная проблема может возникнуть, если у заголовка большой размер шрифта и получается слишком большой межстрочный интервал. Пока заголовок помещается на одной строке, то внешне все в порядке и ваша верстка соответствует макету. Однако верстальщик не может и не должен знать, какой длины заголовок появится на месте дефолтного, когда сайтом начнут пользоваться. Опытный верстальщик уже заранее просчитывает такую ситуацию и прописывает нужное свойство элементу.

.box-icon {
    line-height: 1.2;
}

Ошибки новичков при верстке сайтов.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.