Страница 1 из 11
Форум » Web дизайн » HTML и CSS » Меню быстрого приготовления - часть 2 (Часть вторая - код)
Меню быстрого приготовления - часть 2
Reddy Дата: Вторник, 05.10.2010, 21:30 | Сообщение # 1
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
Итак, мы нарисовали наши кнопки, теперь осталось для них прописать HTML и CSS коды. По старой доброй традиции начнём с HTML:

Code
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Меню сайта</title>
<link  href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div align="center" id="container">    
<div id="menu">

<!-- Старт меню -->
<ul class="navigation">
<li id="m1"><a href="/" title="Ваш текст описания"></a></li> <!-- 1 пункт меню -->
<li id="m2"><a href="/forum/" title="Ваш текст описания"></a></li> <!-- 2 пункт меню -->
<li id="m3"><a href="/gb/" title="Ваш текст описания"></a></li> <!-- 3 пункт меню -->
<li id="m4"><a href="/index/0-3/" title="Ваш текст описания"></a></li> <!-- 4 пункт меню -->
</ul>
<!-- /Старт меню -->

</div>
</div>

</body>
</html>

div с id "container" служит для позиционирования меню на странице: в данном случае мы задаём для меню положение по центру.
div "menu" нужен для придания стиля меню: путь к фоновой картинке меню, его высота и т.д.

Теперь перейдём к таблице стилей:

Code
body {
            background: #000000;
            font-family: Verdana;
            font-size: 11px;
}
#container {
}

/* стиль меню */
#menu {
            background: url('menu.png'); /* путь к фоновой картинке меню */
            height: 27px; /* высота меню. Фоновое изображение должно быть больше этого значения в два раза! (см. урок для ФШ)*/
            width: 500px; /* ширина меню, равняется ширине фоновой картинки */
}
.navigation {
            margin: 0 0 0 15px; /* отступ начала меню от левого края */
            padding: 0;
}
.navigation li {
            float: left; /* выравнивает элемент по левому краю, а все остальные элементы обтекают справа, чтобы получить эффект горизонтального расположения пунктов меню. */
            list-style-type: none; /* убираем маркеры для списка */

}
.navigation li a {
            display: block; /* отображает данный элемент как блок*/
            height: 27px;  /* высота пункта меню */
            width: 117px;  /* ширина одного пункта меню */
}
#m1 a:hover {
            background: url('menu.png') -15px 27px; /* цвет фона активного меню, смещение по горизонтали и вертикали */
}
#m2 a:hover {
            background: url('menu.png') -132px 27px; /* цвет фона активного меню, смещение по горизонтали и вертикали */
}
#m3 a:hover {
            background: url('menu.png') -249px 27px; /* цвет фона активного меню, смещение по горизонтали и вертикали */
}
#m4 a:hover {
            background: url('menu.png') -366px 27px; /* цвет фона активного меню, смещение по горизонтали и вертикали */
}

Если всё сделано правильно, то нас должен ждать примерно такой результат.

спец по кнопачкам
 
Renkoji Дата: Четверг, 28.04.2011, 22:24 | Сообщение # 2
Renkoji
Прохожий
Сообщений: 3
Репутация: 3
Страна: Латвия
Город: Rīga
Область: Rīga
Статус: Offline
Хотелось бы, чтобы эта часть урока была расписана поподробнее. :) То есть, что есть какой тег и что он даёт, ещё неплохо было бы отмечать каким-то способом (например, цветом), какой тег обязателен, какой - нет.
Особенно касается CSS...
Не очень понятно, каким образом сделать так, чтобы собственно меню начало работать. Что куда отступать и т.д. %)
 
Reddy Дата: Пятница, 29.04.2011, 22:07 | Сообщение # 3
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
Quote (Renkoji)
То есть, что есть какой тег и что он даёт, ещё неплохо было бы отмечать каким-то способом (например, цветом), какой тег обязателен, какой - нет.

кое-что подправил и добавил. Надеюсь, что информативность возросла thing

Quote (Renkoji)
Не очень понятно, каким образом сделать так, чтобы собственно меню начало работать. Что куда отступать и т.д.

постараюсь добавить в скором времени механизм расчёта отступов yes

спец по кнопачкам
 
Форум » Web дизайн » HTML и CSS » Меню быстрого приготовления - часть 2 (Часть вторая - код)
Страница 1 из 11
Поиск:
Rambler's Top100 Рейтинг@Mail.ru Яндекс.Метрика
Полное или частичное копирование материалов только с указанием гиперссылки на www.otherside.ws

© 2010-2017 Other Side | Хостинг от uCoz