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

[rusl81]

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

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

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

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

[rusl81]

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

[Александр]

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

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

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

[Elisheba]

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

http://aataganrog.narod.ru/

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

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

[Александр]

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

http://aataganrog.narod.ru/

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

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

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

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

[alex54]

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

[АнтонМищуков]

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

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

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

[Александр]

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

[АнтонМищуков]

Я знаю это, но не знаю куда именно поставить теги <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>

[Александр]

Ниже выделил вывод меню, который можно выровнять тегами 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>