Оформляем сайдбар

Сегодня займемся оформлением сайдбара.

Убирать шаблонный текст в файле index.html внутри блока «sideRight» не советую, т.к. наш сайдбар будет «резиновым» и если не оставить ни одной строчки, то он просто «сложится» в одну линию.

Во-первых, изменим внешний вид самого сайдбара – зададим границу выбранного цвета непрерывной линией в 1 пиксель, изменим цвет фона и установим внешние поля в 10 пикселей.

Хочу обратить ваше внимание, что ширина границы и полей добавляется к ширине сайдбара (она была у нас 200 пикселей), поэтому, чтобы сохранить общую ширину страницы (800 пикселей) нужно на эту же величину уменьшить ширину блока «sideRight» или обтекающего его слева блока «content». Я уменьшила ширину блока «content» на 25 пиксель (2 пикселя границы слева и справа + 20 пикселей левое и правое поля + 3 пикселя добавила произвольно).

Для этого в файле style.css вносим изменения:

Теперь перейдем к файлу index.html

Внутрь блока «sideRight» добавляем пункты меню (снова в виде маркированного списка):

<ul>

<li><a href=»#»>Уссурийский тигр</a></li>

<li><a href=»#»>Красный волк</a></li>

<li><a href=»#»>Ирбис</a></li>

<li><a href=»#»>Гривастый ленивец</a></li>

<li><a href=»#»>Южноафриканский еж</a></li>

<li><a href=»#»>Кольцехвостый лемур </a></li>

<li><a href=»#»>Гигантская панда</a></li>

<li><a href=»#»>Белый медведь </a></li>

<li><a href=»#»>Орангутанг </a></li>

<li><a href=»#»>Морской котик Хуана Фернандеса</a></li>

<li><a href=»#»>Гигантский армадилл </a></li>

<li><a href=»#»>Амазонский дельфин</a></li>

<li><a href=»#»>Морской лев</a></li>

<li><a href=»#»>Окапи </a></li>

<li><a href=»#»>Сайгаки</a></li>

<li><a href=»#»>Алтайский горный баран</a></li>

<li><a href=»#»>Зубр</a></li>

</ul>

Как видим, внешний вид вертикального меню пока далек от образца. Как и для горизонтального меню, изменить его можно инструкциями для тегов <ul> и <а>. Поэтому вернемся к файлу style.css.

Теперь изменим вид самих ссылок – будем показывать их как блочные элементы шириной 180 пикселей с нижней границей в виде прерывистой линии. Кроме того сделаем отступы (поля) для каждой ссылки – снизу и сверху по 3 пикселя, а слева и справа – по 10 пикселей. Если вы захотите изменить ширину боковых полей, учтите, что общая сумма величин полей и блочного элемента не должна превышать ширину сайдбара (в нашем случае – это выполняется: 10+180+10=200) .

Чтобы перемещение по меню было более наглядным, воспользуемся псевдоклассами ссылок. Нам понадобятся три псевдокласса:

link – применяется к ссылкам, по которым еще не было переходов;

visited – применяется к ссылкам, по которым уже был хотя бы один переход:

hover – применяется к ссылке, над которой находится курсор (при наведении мыши)

Посещенные и непосещенные ссылки будут у нас иметь одинаковый вид. Для них задаем цвет и отменяем подчеркивание:

При наведении будет меняться цвет ссылки и цвет фона, на котором она выводится:

Важно! Описание псевдокласса hover должно следовать после описаний link и visited.

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

Осталось вывести заголовок. Для этого в файле index.html перед выводом пунктов меню (маркированным списком) вставляем блок «navTitle».

<div class=»navTitle»></div>

Обратите внимание, что здесь задан класс. Это позволит использовать заголовок несколько раз (например, если в вашем меню будут подзаголовки).

Внешний вид этого блока задаем в файле style.css, определяя высоту и цвет фона:

Саму надпись в этом блоке выводим в виде заголовка третьего уровня (использование в навигации тегов заголовка поможет вам при оптимизации страницы). Окончательный вид блока «navTitle» в файле index.html будет таким:

<div class=»navTitle»><h3>КРАСНАЯ КНИГА</h3></div>

Соответственно, стиль заголовка третьего уровня задаем в файле style.css, определяя размер шрифта (по отношению к основному шрифту на странице), цвет и отступы (поля) от границ блока:

И как обычно, посмотрим, что у нас получилось:

Опубликовал 13th Февраль 2011.
Размещено в Сайт с нуля.
Метки: , , , ,

К записи 3 комментария

многого не знал про оформление блога, в основном пользовался генератором тем для wordpress, а тут забрел на ваш блог, почитал и уже кое — что применил на практике, про верстку особенно понравилось, мало кто пишет про это, а у вас тут все по полочкам разложено ))пользуюсь вашим блогом как помощником в трудных вопросах.

Спасибо, приятно, что мой опыт еще кому-то пригодился

Здраствуйте)
Не желаете обменяться ссылками?

Нужна помощь?