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

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

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

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

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

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



Поменяйте в коде второго меню которое вы вставляете с права стиль везде где встречается navigation на navigation2 и правьте потом ширину высоту цвет, всё, что хотите. БУДЕТ РАБОТАТЬ 2 разных меню с разными стилями и не конфликтовать друг с другом. 47-)

Для этого можно использовать блокнот Notepad++, открываете код блокнотом, нажимаете поиск и ищите navigation, потом жмёте на заменить всё, где встречается на navigation2, после замены блокнот покажет сколько раз заменил, то что вы искали.




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

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

Сообщение rusl81 » Чт май 19, 2011 09:55

СПАСИБО!!!



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

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

Сообщение Дмитрий » Вс май 22, 2011 21:49

Информация к размышлению:

Я бы советовал в html-кодах прописывать еще и кодировку UTF-8 а то при использовании только windows=1251 могут получиться казябры типа "??????????" пример сам я — у меня MozillaFirefox с UTF-8 и иногда нет текста,приходиться самому прописывать тег… 35-)



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

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

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

дмитрий писал(а):Информация к размышлению:

Я бы советовал в html-кодах прописывать еще и кодировку UTF-8 а то при использовании только windows=1251 могут получиться казябры типа "??????????" пример сам я — у меня MozillaFirefox с UTF-8 и иногда нет текста,приходиться самому прописывать тег… 35-)


Такая фигня только на Ucoz, там шиворот на выворот, на народе всё будет отображаться отлично и менять кодировку не надо.
Просто сам скрипт создания сайта на Ucoz работает только с кодировкой Utf-8 поэтому если прописана кодировка кириллицы он вместо русских буковок всякие квадратики и знаки вопросов рисует.

Там любые html страницы надо сохранять в блокноте с кодировкой Utf-8 без галочки БОМ.
Сам как то столкнулся с такой ерундой и кракозябрами, когда загрузил свой рукописный сайт на Ucoz, потом мануал там глянул и подправил. 36-)



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

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

Сообщение rusl81 » Пн май 23, 2011 15:23

Александр, подскажите пожалуйста, какие изменения нужно внести в код горизонтального меню, чтобы:
1. Пункты меню были в два ряда. Когда пункты меню выстраиваются в два ряда был отступ верхнего ряда от нижнего.
2. Ширина пунктов меню была одинаковая ( с данном вами коде ширина варьируется в зависимости от букв в названии пункта меню)



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

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

Сообщение Александр » Вт май 24, 2011 03:10

rusl81 писал(а):Александр, подскажите пожалуйста, какие изменения нужно внести в код горизонтального меню, чтобы:
1. Пункты меню были в два ряда. Когда пункты меню выстраиваются в два ряда был отступ верхнего ряда от нижнего.
2. Ширина пунктов меню была одинаковая ( с данном вами коде ширина варьируется в зависимости от букв в названии пункта меню)


А зачем так жизнь усложнять, не заморачивайтесь на меню, больше времени надо не красоте, а оптимизации и раскрутке страниц уделять, вот здесь ваш посетитель, а от того будет блестеть кнопка или нет квадратная она или круглая и на самом деле на нажатие не влияет. 47-)

Просто подустал сегодня нет времени см код.



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

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

Сообщение rusl81 » Вт май 24, 2011 23:10

Александр, у меня вопрос по поводу шрифта в меню.
В коде строчка: font-family: Verdana, Arial, Helvetica, sans-serif; /* Тип шрифта */
Я не пойму, почему тут несколько шрифтов и какой надо менять на свой?



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

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

Сообщение Александр » Вт май 24, 2011 23:36

rusl81 писал(а):Александр, у меня вопрос по поводу шрифта в меню.
В коде строчка: font-family: Verdana, Arial, Helvetica, sans-serif; /* Тип шрифта */
Я не пойму, почему тут несколько шрифтов и какой надо менять на свой?


Править надо первый шрифт.
Встречается так когда браузер или система не может распознать первый из списка шрифт и показать его тогда берётся автоматом второй далее третий.



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

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

Сообщение stalkerershov » Ср май 25, 2011 07:18

Где в коде нужно вставить
padding: 0;
margin: 0;
чтобы сделать точное позиционирование. Хочу убрать отступ слева от края у меню. Помогите пожалуйста я не очень разбираюсь в HTML кодах.



stalkerershov
Студент
Студент
 
Сообщений: 24
Зарегистрирован: Вт апр 26, 2011 20:28
Пункты репутации: 0

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

Сообщение Александр » Ср май 25, 2011 13:06

stalkerershov писал(а):Где в коде нужно вставить
padding: 0;
margin: 0;
чтобы сделать точное позиционирование. Хочу убрать отступ слева от края у меню. Помогите пожалуйста я не очень разбираюсь в HTML кодах.


Нужно в стили добавить отступы для тела кода: body { margin-left: -30px; margin-top: -10px; margin-right: 0px; margin-bottom: 0px;}

Горизонтальное меню с отступом 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">
  body  { margin-left: -30px; margin-top: -10px; margin-right: 0px; margin-bottom: 0px;}

    .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>



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

Пред.След.



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

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

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