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

Сначала нужно убрать ограничение высоты подвала. У нас оно было выставлено 50px, чтобы пока он был пустой, мы все равно видели этот блок. Когда вы сотрете строчку в стилях height:50px; — footer будет растянут по содержимому, а иначе он просто спрячет часть текста.

Совет: проверяйте свой дизайн в нескольких навигаторах. Сайт должен быть кроссбраузерным, чтобы у пользователей других навигаторов была возможна комфортная работа с вашим сайтом. Чаще всего, забавное отображение получается у Internet Explorer, особенно ранних версий. Это объясняется криворукостью разработчиков и отсутствию поддержки некоторых стандартов.

Я вставил простой текст, чтобы посмотреть поведение страницы.

Чтобы текст не был черным по черному нам следует указать цвет всего текста на сайте в контейнере <body>:

body{
    background-color:#050204;
    color:#ffffff;
}

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

#footer td {
    vertical-align:top;
}

Для текста во всех элементов td контейнера подвала мы выставили прижатие текста к верхней границе блока. Чтобы прижать к нижней границе, пишите значение bottom. Значение по умолчанию вовсе не center, как хотелось бы обозвать по аналогии с горизонтальным выравниванием, а middle, что тоже означает середину. С полным списком значений вы познакомитесь самостоятельно, но пока рано забивать себе голову информацией, которая применяется довольно редко.

Совет: Старайтесь всегда размещать описания стилей элементов рядом с родительскими. Это позволит лучше ориентироваться в собственном коде. Иногда можно указать разделы свойств в стилях с помощью комментариев. Например, перед свойствами шапки поставьте текст /* TOP */, а после /* END TOP */. Тогда сразу видны начало и конец раздела стилей шапки. Между /* и */ размещаются многострочные комментарии css, которые игнорируются навигатором.

image13

Пример применения комментария в таблицах стилей

Так вот я отвлекся. Сделаем отступ в подвале от основного содержимого и поставим верхний бордюр. Делается это так:

#footer {
    width:100%;
    border-top-color:#FDE38C;
    border-top-width:1px;
    border-top-style:solid;
    margin-top:10px;
}

Остановимся подробнее на границах. Это отдельная и полезная тема, но коротко смогу рассказать здесь. У свойства border есть три свойства: color, width, style (цвет, толщина линии, тип или стиль линии). Цвет указывается по модели RGB (или по названию – red, Blue..), толщина в пикселах, а стилей несколько (solid/dotted/dashed/double/groove/ridge/inset/outset/hidden/none). Сами попробуйте изменить стили.

Можно применить рамку ко всему элементу, тогда это будет просто border. Или для конкретной стороны, как у нас в примере. Поддерживается и короткая запись: border-top:#FDE38C 1px solid;.Теперь мы логически отделили текст от подвала. Для удобного чтения, необходимо каждый абзац текста поместить в контейнер параграфа. Тогда зрительно будут отделены логически-законченные части текста друг от друга. Для этого можно заключить каждый абзац между тегами <p style=»text-align:justify;»> и </p>. При этом текст будет растянут по ширине. А можно и просто заключить в параграфы, а в стилях прописать:

#content p{
    text-align:justify;
}

При этом для всех параграфов внутри content будет применено данное правило.

Совет: В оформлении это очень важно, но пользоваться вторым способом нужно крайне осторожно. Такое широкое влияние может оказаться негативным. Особенно это проявляется, когда на странице в данном контейнере будет располагаться какая-то форма, или еще какой модуль с элементами <p>.

Еще одно интересное свойство параграфа, которое пригодится для текста – отступ первой строки абзаца: text-indent:20px;. Вы можете выставить и свою величину, но тут тоже нужна осторожность.

image14Итоговый внешний вид

На этом я заканчиваю тему блочной верстки. В следующих занятиях мы будем дальше знакомиться с новыми элементами оформления гипертекста и их свойствами, но обязательно вернемся к блочной верстке, так как это основа современного сайтостроения. Я добавляю архив с нашим сайтом для свободного скачивания. 

Добавить комментарий

Защитный код

Введите код с картинки в текстовое поле