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

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

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

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

Сообщение rusl81 » Ср сен 28, 2011 09:17

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


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

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


И все же, я снова столкнулся с тем, что мне нужно, чтобы ширина пунктов меню была одинаковая и не зависела от количества букв в названии и размера шрифта. А по поводу замечания Александра, хочу сказать, что надоело оптимизировать и раскручивать. Я хочу заняться разработкой оригинальных дизайнов для сайтов.
Посетив большое количество ресурсов с предложениями о создании сайтов за деньги, пришел к выводу, что у многих шаблоны скучные и однообразные. А мне нравится творить, и заказчики сайтов-визиток, я думаю, клюют на оригинальность и красоту.



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

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

Сообщение rusl81 » Пт ноя 04, 2011 10:28

Доброго времени суток. Александр, подскажите пожалуйста можно ли разместить на странице 2 вертикальных меню, но с разным дизайном. Вот пример, чтобы было понятно: страница моего сайта http://www.zdorovnm.ru/produkti_pchelovodstva/akatsievii_med/, слева основное меню, под ним печень меда (он там т.к. не могу поставить его в правый сайтбар с другими размерами). В "управлении файлами" для данной страницы вставляю папку "css" с другим названием и соответственно содержанием (длина пунктов меньше и другой цвет), во внешнем коде прописываю нужный путь к css. В итоге меняется и главное меню, хотя подключенный к нему css-стиль имеет другое название и первоначальное содержание.



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

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

Сообщение Александр » Сб ноя 05, 2011 05:37

rusl81 писал(а):Доброго времени суток. Александр, подскажите пожалуйста можно ли разместить на странице 2 вертикальных меню, но с разным дизайном. Вот пример, чтобы было понятно: страница моего сайта http://www.zdorovnm.ru/produkti_pchelovodstva/akatsievii_med/, слева основное меню, под ним печень меда (он там т.к. не могу поставить его в правый сайтбар с другими размерами). В "управлении файлами" для данной страницы вставляю папку "css" с другим названием и соответственно содержанием (длина пунктов меньше и другой цвет), во внешнем коде прописываю нужный путь к css. В итоге меняется и главное меню, хотя подключенный к нему css-стиль имеет другое название и первоначальное содержание.


Попробуйте сделать единый файл стилей, только в нём добавьте копию стилей с идентификатором 1 или 2 как вам удобно, а самих меню меняйте вызов 1 или второго. Соответственно стили для каждого будут свои.

Так путаницы не будет с большим количеством подключений стилей к странице. Сейчас у вас работает последний стиль который вызываете, классы, то схожие. 40-)



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

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

Сообщение Elisheba » Ср ноя 16, 2011 12:51

Меню сделала, но есть проблемы

http://aataganrog.narod.ru/

1) когда первый раз заходишь на сайт и выбираешь любой пункт меню, то открывается еще одно окно в браузере (везде стоит parent)? далее уже при нажатии на меню открывается в том же окне

2) не поняла как отцентрировать горизонтальное меню, выравнено по левому краю



Аватар пользователя
Elisheba
Студент
Студент
 
Сообщений: 9
Зарегистрирован: Пн ноя 07, 2011 13:19
Пункты репутации: 0

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

Сообщение Александр » Ср ноя 16, 2011 22:15

Elisheba писал(а):Меню сделала, но есть проблемы

http://aataganrog.narod.ru/

1) когда первый раз заходишь на сайт и выбираешь любой пункт меню, то открывается еще одно окно в браузере (везде стоит parent)? далее уже при нажатии на меню открывается в том же окне

2) не поняла как отцентрировать горизонтальное меню, выравнено по левому краю



1) Уберите в коде у каждой ссылки открывание во всплывающей странице вот этот кусок кода: target="__parent"
Будет всегда открываться в этом же окне. 40-)

2) По выравниванию на народе могут быть проблемы, конфликт стилей шаблона и ваших стилей меню. Приоритет у стилей шаблона.
Писал где то и давал ответ уже на этот вопрос. Просмотрите этот форум.



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

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

Сообщение alex54 » Чт дек 01, 2011 07:26

Привет всем! Подскажите, подалуйста, как сделать вложенное меню (горизонтальное)?



alex54
Студент
Студент
 
Сообщений: 2
Зарегистрирован: Чт дек 01, 2011 06:05
Пункты репутации: 0

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

Сообщение АнтонМищуков » Пт мар 29, 2013 20:49

Приветствую! Помогите, пожалуйста, поставить меню по центру. У меня не получается :(

Код: выделить все
<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тестовая страница в программе Front Page</title>
<meta name="keywords" content="как сделать сайт в Front Page">
<meta name="description" content="Тестовая обучающая страница">
<center><img border="0" src="file:///C:/Users/Mishukov/Desktop/LOGO.png" width="1400" height="400"></center>
<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 link="#000000" vlink="#000000" alink="#000000" bgcolor="#C0C0C0">

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

<div align="center">

   <table cellpadding="25" cellspacing="0" width="1400" bgcolor="#FFFFFF">
      <!-- MSTableType="layout" -->
      <tr>
         <td height="450" valign="top">
         <h3 align="center" style="font-family: Geneva, Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">
         &nbsp;</h3>
         </td>
      </tr>
   </table>
   <p><font face="Tahoma"><em style="font-style: normal"><span lang="ru">Автокомфорт </span></em>
   </font>
   <span style="color: rgb(0, 0, 0); font-family: 'Tahoma'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 16.3125px; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; display: inline !important; float: none">
   © 2013</span></div>

</body>

</html>



АнтонМищуков
Студент
Студент
 
Сообщений: 2
Зарегистрирован: Пт мар 29, 2013 20:46
Пункты репутации: 0

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

Сообщение Александр » Сб мар 30, 2013 00:35

Если Вам нужно просто выровнять меню по центру страницы, то заключите вывод меню в теги <center> МЕНЮ </center>
Всё, что внутри выровняется по центру.



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

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

Сообщение АнтонМищуков » Сб мар 30, 2013 11:41

Я знаю это, но не знаю куда именно поставить теги <center> и </center> :(
Поставьте в этом коде, пожалуйста:

Код: выделить все
<html>

<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тестовая страница в программе Front Page</title>
<meta name="keywords" content="как сделать сайт в Front Page">
<meta name="description" content="Тестовая обучающая страница">
<center>
<img border="0" src="file:///C:/Users/Mishukov/Desktop/LOGO.png" width="1400" height="400"></center>
<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 link="#000000" vlink="#000000" alink="#000000" bgcolor="#C0C0C0">

<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>
<p>&nbsp;</p>
<div align="center">

   <table cellpadding="25" cellspacing="0" width="1400" bgcolor="#FFFFFF">
      <!-- MSTableType="layout" -->
      <tr>
         <td height="450" valign="top">
         <h3 align="center" style="font-family: Geneva, Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">
         &nbsp;</h3>
         </td>
      </tr>
   </table>
   <p><font face="Tahoma"><em style="font-style: normal"><span lang="ru">Автокомфорт </span></em>
   </font>
   <span style="color: rgb(0, 0, 0); font-family: 'Tahoma'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 16.3125px; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; display: inline !important; float: none">
   © 2013</span></div>

</body>

</html>



АнтонМищуков
Студент
Студент
 
Сообщений: 2
Зарегистрирован: Пт мар 29, 2013 20:46
Пункты репутации: 0

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

Сообщение Александр » Вс мар 31, 2013 02:27

Ниже выделил вывод меню, который можно выровнять тегами div или center

<div align="center"> вывод меню в HTML </div>
ИЛИ тегами center
<center> вывод меню в HTML </center>


Код: выделить все

<center>
   <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>
</center>




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

Пред.



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

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

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