[phpBB Debug] PHP Notice: in file /viewtopic.php on line 1026: date() [function.date]: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'Europe/Helsinki' for 'EEST/3.0/DST' instead
[phpBB Debug] PHP Notice: in file /viewtopic.php on line 1026: getdate() [function.getdate]: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'Europe/Helsinki' for 'EEST/3.0/DST' instead
infopodsolnux.ru • Просмотр темы - Простое вертикальное и горизонтальное меню на CSS.



Простое вертикальное и горизонтальное меню на CSS.

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

Модератор: Дмитрий

Простое вертикальное и горизонтальное меню на CSS.

Сообщение Александр » Чт фев 17, 2011 21:30



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

Пример горизонтального меню, которое меняет цвет фона при наведении: СМОТРЕТЬ ДЕМО


Привожу Код HTML такого меню.

Код: выделить все
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Created by Aleksandr Novikov checked by http://infopodsolnux.ru Copyright © 2011. -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример Горизонтального меню</title>

<style type="text/css">
.navigation {
   list-style: none; /* прячем маркеры */
}
.navigation li {
   float: left; /* выстраиваем элементы списка в один ряд */
   margin-right: 2px; /* делаем отступ чтобы пункты меню не сливались */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Тип шрифта */
   font-size: 14px; /* Размер текста ссылок */
   font-weight: bold; /* выделение ссылки жирным */
}
.navigation li a {
   display: block; /* меняем отображение на блок, чтобы иметь возможность задавать внутренние отступы */
   padding: 3px 5px;  /* отступы внутри блока */
   background: #CCCC99; /* цвет блок меню */
   color: #333333; /* цвет текста в блоке меню */
   text-decoration: none; /* убираем подчёркивание ссылок */
   position: relative; /* для IE6, чтобы ссылка была кликабильной по всей своей площади */
}
.navigation li a:hover {
   background: #FFFF9F; /* Цвет фона при наведении */
   color: #555555;  /* Цвет текста при наведении */
}

</style>
</head>
<body>

<ul class="navigation">
    <!-- Описание ссылок, и сами ссылки ставим свои. -->
   <li><a href="http://infopodsolnux.ru" target="_blank">Главная</a></li>
    <li><a href="http://infopodsolnux.ru/partner/fabrika-weblen" target="_blank">WEB Лентяй</a></li>
   <li><a href="http://you-sayt.narod.ru" target="_blank">Делаем сайт на Народе</a></li>
   <li><a href="http://context-kurs.narod.ru" target="_blank">Контекстная реклама</a></li>
   <li><a href="http://infopodsolnux.ru/forum" target="_blank">ФОРУМ</a></li>
</ul>


<body>
</body>
</html>



Подсказки вставил в самом коде, где и что меняем. 42-)


Пример вертикального меню которое меняет цвет фона при наведении: СМОТРЕТЬ ДЕМО

Привожу Код HTML такого меню.

Код: выделить все
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Created by Aleksandr Novikov checked by http://infopodsolnux.ru Copyright © 2011. -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример Вертикального Меню</title>

<style type="text/css">
.navigation {
   list-style: none; /* прячем маркеры */
   width: 170px;  /* ширена меню */
}
.navigation li {
   margin-top: 2px; /* делаем отступ по высоте, чтобы пункты меню не сливались */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Тип шрифта */
   font-size: 14px; /* Размер текста ссылок */
   font-weight: bold; /* выделение ссылки жирным */
}
.navigation li a {
   display: block; /* меняем отображение на блок, чтобы иметь возможность задавать внутренние отступы */
   padding: 3px 5px;  /* отступы внутри блока */
   background: #CCCC99; /* цвет блок меню */
   color: #333333; /* цвет текста в блоке меню */
   text-decoration: none; /* убираем подчёркивание ссылок */
   position: relative; /* для IE6, чтобы ссылка была кликабильной по всей своей площади */
}
.navigation li a:hover {
   background: #FFFF9F; /* Цвет фона при наведении */
   color: #555555;  /* Цвет текста при наведении */
}

</style>
</head>
<body>
<!-- Описание ссылок, и сами ссылки ставим свои. -->
<ul class="navigation">
   <li><a href="http://infopodsolnux.ru" target="_blank">Главная</a></li>
    <li><a href="http://infopodsolnux.ru/partner/fabrika-weblen" target="_blank">WEB Лентяй</a></li>
   <li><a href="http://you-sayt.narod.ru" target="_blank">Делаем сайт на Народе</a></li>
   <li><a href="http://context-kurs.narod.ru" target="_blank">Контекстная реклама</a></li>
   <li><a href="http://infopodsolnux.ru/forum" target="_blank">ФОРУМ</a></li>
</ul>


<body>
</body>
</html>


Подсказки вставил в самом коде, где и что меняем.


Надеюсь данная информация будет полезна вам.

Можете разместить ссылку на наш сайт если вам понравилась информация:

Код: выделить все
<a href="http://infopodsolnux.ru/forum" target="_blank" title="Форум сайта обучающих интернет видеокурсов на dvd дисках."><img src="http://you-sayt.narod.ru/img/knop_infopodsolnux.gif" border="0" width="88" height="31" /></a>





Аватар пользователя
Александр
Администратор
Администратор
 
Сообщений: 897
Зарегистрирован: Вс янв 30, 2011 16:24
Откуда: КРЫМ
Пункты репутации: 151
ПрофессорПрофессор

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение Александр » Пт фев 18, 2011 01:12

Олег.
А если сайт не на народе, то как вставить код меню, в готовую страницу сайта.
Что нужно убрать лишнего из кода приведенного на странице?


Для вставки на сайт сделанный в конструкторе на Яндекс Народе, вам нужно заменить все ссылки на все ваши страницы, добавить ещё если надо блоков ссылок.
Блок формируется в тегах <li>……</li>

Копируете изменённый код под ваш сайт, и вставляете его с помощью модуля вставка произвольного кода <>.

В коде можно тогда уменьшить шапку:
Код: выделить все
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Created by Aleksandr Novikov checked by http://infopodsolnux.ru Copyright © 2011. -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример Вертикального Меню</title>



Заменить её на это:
Код: выделить все
<html>
<head>


Не забывайте, при создании новой страницы в меню вам нужно добавить её туда самостоятельно!
:idea:




Аватар пользователя
Александр
Администратор
Администратор
 
Сообщений: 897
Зарегистрирован: Вс янв 30, 2011 16:24
Откуда: КРЫМ
Пункты репутации: 151
ПрофессорПрофессор

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение sergey67 » Пт фев 25, 2011 10:26

А как сам НАРОД относится к таким изменениям ? Я где то читал у Вас , что гибрид сайта недопустим !



sergey67
Специалист
Специалист
 
Сообщений: 25
Зарегистрирован: Чт фев 10, 2011 05:38
Пункты репутации: 0

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение Александр » Пт фев 25, 2011 16:04


Меню без проблем можно ставить и всё будет работать и на народе, только тут руками придётся в коде поработать.

Да и вообще с кодом учится рано или поздно придётся, хотя бы на уровне азов и понимания.

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

Или конструктор или мастерская, но теперь мастерская закрыта. 44-)



Аватар пользователя
Александр
Администратор
Администратор
 
Сообщений: 897
Зарегистрирован: Вс янв 30, 2011 16:24
Откуда: КРЫМ
Пункты репутации: 151
ПрофессорПрофессор

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение sergey67 » Сб фев 26, 2011 13:25

Можете разместить ссылку на наш сайт если вам понравилась информация:
Код: выделить все
   <a href="http://infopodsolnux.ru/forum" target="_blank" title="Форум сайта обучающих интернет видеокурсов на dvd дисках."><img src="http://you-sayt.narod.ru/img/knop_infopodsolnux.gif" border="0" width="88" height="31" /></a>


Сделайте баннер побольше , а то этот на сайте просто теряется !



sergey67
Специалист
Специалист
 
Сообщений: 25
Зарегистрирован: Чт фев 10, 2011 05:38
Пункты репутации: 0

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение sergey67 » Вт мар 01, 2011 11:18

Как сделать , чтобы меню ( вертикальное ) , можно было бы двигать по горизонтали ?



sergey67
Специалист
Специалист
 
Сообщений: 25
Зарегистрирован: Чт фев 10, 2011 05:38
Пункты репутации: 0

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение Александр » Вт мар 01, 2011 17:43

sergey67 писал(а):Как сделать , чтобы меню ( вертикальное ) , можно было бы двигать по горизонтали ?


Если вы хотите сделать меню которое выезжает при нажатии, то можно использовать вложенность:

в новую строку:

<li> <ul>
<li>Ссылка №1</li>
<li>Ссылка №2</li>
</ul></li>



Аватар пользователя
Александр
Администратор
Администратор
 
Сообщений: 897
Зарегистрирован: Вс янв 30, 2011 16:24
Откуда: КРЫМ
Пункты репутации: 151
ПрофессорПрофессор

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение sergey67 » Вт мар 01, 2011 19:36

Нет . Я имел ввиду , что при вставке внешнего кода на НАРОДЕ , меню смещалось от края примерно на 50 — 60 px .
Пришлось немного порыться в интернете , и из положения я вышел так :

padding: 0;
margin: 0;



sergey67
Специалист
Специалист
 
Сообщений: 25
Зарегистрирован: Чт фев 10, 2011 05:38
Пункты репутации: 0

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение Александр » Вт мар 01, 2011 20:07

padding: 0;
margin: 0;


Возможно, в шаблоне яндекс народа стоят отступы в колонках, и точное позиционирование вам помогло.

Покажите сайт, посмотрим, что получилось…



Аватар пользователя
Александр
Администратор
Администратор
 
Сообщений: 897
Зарегистрирован: Вс янв 30, 2011 16:24
Откуда: КРЫМ
Пункты репутации: 151
ПрофессорПрофессор

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение sergey67 » Ср мар 02, 2011 05:14

http://monter1967.narod2.ru . Выслушаю любую критику ( сайт создан раньше , чем я увидел Ваши видео уроки )
Теперь я его модернизирую . И ещё хотелось бы сделать его копию .



sergey67
Специалист
Специалист
 
Сообщений: 25
Зарегистрирован: Чт фев 10, 2011 05:38
Пункты репутации: 0

След.



Вернуться в Создание простых HTML сайтов и страниц

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1