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

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

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

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

Сообщение Александр » Ср мар 02, 2011 20:50

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


Указал на ошибки и сделал предложения для вашего сайта, написал всё в другом форуме: Здесь..
Читайте и отвечайте про сайт там.



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

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

Сообщение rusl81 » Пт май 13, 2011 10:51

Александр, скопировал код вертикального меню, поменял на свои ссылки страниц и названия. Вставил во внешний код. При переходе в таком меню на страницы сайта выдает ошибку 404 (нет такой страницы). Как это исправить?

КОД МОЕГО МЕНЮ
Код: выделить все
<!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://farvaterpro.narod2.ru/ target="_blank">ГЛАВНАЯ</a></li>
    <li><a href="http://farvaterpro.narod2.ru/nashi_proekti/ target="_blank">ПРОЕКТЫ</a></li>
   <li><a href="http://farvaterpro.narod2.ru/sanpin/ target="_blank">СанПиН</a></li>
   <li><a href="http://farvaterpro.narod2.ru/snip/ target="_blank">СНиП</a></li>
   <li><a href="http://farvaterpro.narod2.ru/kontakti/ target="_blank">КОНТАКТЫ</a></li>
</ul>


<body>
</body>
</html>



rusl81
Бывалый
Бывалый
 
Сообщений: 120
Зарегистрирован: Вт май 03, 2011 11:36
Пункты репутации: 0

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

Сообщение Александр » Пт май 13, 2011 15:29



Вы допустили критическую ошибку при проставлении своих ссылок, удалили " после ссылок, двойной флеш должен идти в начале вывода ссылки и в конце ссылки.

Правильно должно быть так:

<li><a href="http://farvaterpro.narod2.ru" target="_blank">ГЛАВНАЯ</a></li>




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

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

Сообщение rusl81 » Пт май 13, 2011 18:26

Спасибо, я потом на примере горизонтального меню додумался. А ошибка эта у вас ( я скопировал то, что написали вы), проверьте, там нет "



rusl81
Бывалый
Бывалый
 
Сообщений: 120
Зарегистрирован: Вт май 03, 2011 11:36
Пункты репутации: 0

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

Сообщение Александр » Пт май 13, 2011 19:05

rusl81 писал(а):Спасибо, я потом на примере горизонтального меню додумался. А ошибка эта у вас ( я скопировал то, что написали вы), проверьте, там нет "


Да действительно один код был правильный, а второй нет. Поправил, теперь всё правильно. :oops:
СПАСИБО!



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

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

Сообщение Александр » Вс май 15, 2011 18:21

Tамара
Здравствуйте, Александр! Спасибо за уроки. Но, к сожалению, я даже не чайник, а самовар:)))).Если правильно поняла, то на на народовском сайте нельзя создать форум? И ещё. У меня не получается вставить код, чтобы увеличивались картинки, уверена, что делаю, что то не так и очень хотелось бы, чтобы, как на многих других сайтах,внизу страницы стояли цифры, то есть, чтобы старый материал уходил под эти цифры, а при нажатии на них, можно было бы его прочитать, что то вроде архива.
Извините, что беспокою Вас, но уроки были очень толковые и всё, что с моим познанием, можно было сделать-сделала. Сейчас пробую подать ссылку в каталог сайтов учеников. Спасибо за внимание.
Тамара.


Постраничную навигацию: 1-2-3-4-5-6-7-8-9… можно сделать из главного меню для этого:

1) Перенесите меню в низ и в свойствах страниц поменяйте описание анкора ссылки на цифры.

Тогда вам главное меню придётся сделать отдельно см пост выше воспользовавшись методом создания простого меню на css

Что касаемо увеличения картинки при наведении, то я не понял что у вас не получилось, там урок очень простой.



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

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

Сообщение rusl81 » Ср май 18, 2011 09:27

Добрый день, Александр. Столкнулся с такой проблемой на странице своего http://farvaterpro.narod2.ru/snip/. Сделал меню по вашему коду, но теперь хочу, чтобы справа было отдельное меню с некоторыми пунктами для данной страницы другого вида. Что мне нужно изменить в коде, чтобы у правого меню был другой вид т.к. КОГДА Я МЕНЯЮ ВИД ЭТОГО МЕНЮ (ширину, размер шрифта и тп) ИЗМЕНЯЕТСЯ И ВИД ОСНОВНОГО МЕНЮ. Надеюсь доходчиво объяснил. Спасибо.



rusl81
Бывалый
Бывалый
 
Сообщений: 120
Зарегистрирован: Вт май 03, 2011 11:36
Пункты репутации: 0

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

Сообщение Дмитрий » Ср май 18, 2011 17:57

немного не по теме, но все же-перестройте меню,так что бы страницы вашего сайта не открывались в новой вкладке, а то слишком много окон в браузере появляется,а это так раздражает!!!(удалите тег target="blank" с сылок)



Хочешь избежать критики? Ничего не делай, ничего не говори и будь никем.
Аватар пользователя
Дмитрий
Модератор
Модератор
 
Сообщений: 367
Зарегистрирован: Вт фев 08, 2011 20:37
Откуда: Кизел
Пункты репутации: 144
ПрофессорПрофессор

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

Сообщение rusl81 » Ср май 18, 2011 20:27

Спасибо, меня это тоже напрягало



rusl81
Бывалый
Бывалый
 
Сообщений: 120
Зарегистрирован: Вт май 03, 2011 11:36
Пункты репутации: 0

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

Сообщение Дмитрий » Ср май 18, 2011 20:54

Для того чтобы работало второе меню поменяйте ему название <title>пример вертикального меню</title> например на <title>пример вертикального меню2</title>



Хочешь избежать критики? Ничего не делай, ничего не говори и будь никем.
Аватар пользователя
Дмитрий
Модератор
Модератор
 
Сообщений: 367
Зарегистрирован: Вт фев 08, 2011 20:37
Откуда: Кизел
Пункты репутации: 144
ПрофессорПрофессор

Пред.След.



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

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

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