Горизонтальное меню в див-блоке (я просмотрел все темы по поиску)

[Eugene-N]

Ребята привет.

сайт 3d-journal.ucoz.ru

Разместил меню в левом блоке div (LeftMenu), потом решил его делать в верхнем блоке (под header (картинка с космосом), это блок header 2.

В левом блоке меню разместилось очень просто

HTML

<div class="LeftMenu">

<a class="menu" href="Форум.htm">Новости</a>

<a class="menu" href="Уроки.htm">Уроки</a>

<a class="menu" href="Видеоуроки.htm">Видеоуроки</a>

<a class="menu" href="Журнал.htm">Журнал</a>

<a class="menu" href="Галерея.htm">Галерея</a>

<a class="menu" href="Download.htm">Download</a>

<a class="menu" href="Форум.htm">Форум</a>

<img src="img/left.jpg">

</div>

CSS

.LeftMenu

{

float: left;

overflow: hidden;

background: url(img/left.jpg);

width: 180px; height: 800px;

padding: 0px;

float: bottom

}

.menu

{

background: url(img/knopka5.jpg);

padding: 5px;

text-decoration: none;

color: white;

display: block;

height: 30px;

padding-left: 22px;

padding-top: 13px;

font-size: 20px;

}

.menu:hover

{

color: blue;

background: url(img/knopka2.jpg);

}

При попытке перенести код в header 2, кнопки меню появляются, но во первых они появляются ниже блока header 2, а не в нем (хотя код находится внутри блока div), во вторых они шириной во весь блок, вот так (смотрите прикрепленную картинку)

Я прочитал 10-15 тем в поиске, пробовал вставлять готовый код из тем (почти везде делалось чере <li> ), но даже с готовым кодом не получается, единственное исключение

http://www.cyberforum.ru/html/thread421154.html

но там какой то огромный код, неужели нельзя поменьше?

Как-то задать расположение кнопок по горизонтали, и выровнять внутри div-блока.

Нашел в поиске вот такой параметр

white-space: nowrap;

запрещает переносы в строке

тоже не получилось.

Вот код.

HTML

<div class="header2">

<img src="img/verh3.jpg" alt="сайт о компьютерной графике">

<a class="menu" href="Форум.htm">Новости</a>

<a class="menu" href="Уроки.htm">Уроки</a>

<a class="menu" href="Видеоуроки.htm">Видеоуроки</a>

</div>

CSS

как и предыдущий (тот который написал выше)

Пробовал указать размеры (ширину и высоту header2 - не помогло)

На сайте в коде не прописаны ссылки в header2, потому что версия старая (а обновить не могу, забыл пароль к сайту (восстановить не получается)).

Edited June 4, 2012 by Eugene-N

[atew]

почему вы не используете ul и li?

[Eugene-N]

Ну я думал обойтись без них. Наверное не получится? Такие вещи делают с помощью них?

[Modestes]

для созданию меню без ul используют новый тег <nav>

структура простая

<nav>
<a href="#">Тык1</a>
<a href="#">Тык2</a>
<a href="#">Тык3</a>
<a href="#">Тык4</a>
<a href="#">Тык5</a>
</nav>

nav a{float:left;}
или
display:inline-block;

вот меню на ul

[Sensei]

Новый элемент nav используют не для создания меню без ul, а для любой навигации, в том числе и для меню на ul/ol, это семантика.

[Modestes]

Новый элемент nav используют не для создания меню без ul, а для любой навигации, в том числе и для меню на ul/ol, это семантика.

ну не так выразился)

[Sensei]

Да я понял, что вы имели ввиду, просто уточнил для тех, кто не знаком с html5)

[Int]

Задай кнопку ширину дай им float:left, например, будут в ряд

[Eugene-N]

Int - а куда ставить float: left; ? В css кнопки или div где она находится?

[Modestes]

Int - а куда ставить float: left; ? В css кнопки или div где она находится?

В CSS для тега <li>

пример:

ul li{

float:left;

}

[Eugene-N]

Ребята привет, я десятый раз уже наверное спрашиваю, но пока все еще не получается - зато теперь есть конкретный пример!

Итак, вот шаблон сайта (вложенный рисунок 1, и меню с активированной кнопкой рисунок 2).

Я расположил кнопки по горизонтали с помощью параметров css

.header2

{

height: 49px;

}

.header2 a

{

float: left;

width: 101px;

text-align: center;

}первый задал высоту блока, второй ширину отдельной кнопки.

Но нужно еще сделать выпадающий список.

Я поискал готовые варианты, почти все они сделаны на ul/li, у меня даже кое-что получилось

(вложенные рисунки 3,4,5, первое меню сделал с помощью сайта http://purecssmenu.com/ - там прямо генератор меню, и скачиваешь архив с html/css кодом, второе и третье с помощью уроков в интернете.)

Вроде бы неплохо, но меня не устривает, мне нужно вот так (я сам для себя такое хотел, а потом вспомнил что я такой вариант уже где-то видел)

(рисунок 6, 7)

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

Само меню находится на сайте 3Dmir.ru

Давайте по-порядку, как вообще делается такое меню

1) Для того чтобы создать список используется

ul/li

допустим я создал

2) дальше - все меню помещается в div-блок - ширину/высоту и варавнивание которого я задаю - правильно?

3) параметры css - какие параметры нужны вот именно для такого меню - я просто сейчас хочу сделать просто элемент сайта, а вообще параметров для меню может быть много, но мне нужны только 5 из них - с помощью которых создаются такие кнопки.

Т.е. это параметры для

а) выравнивания меню по горизонтали

б) фиксированной (указанной) ширины кнопок

в) ширина/высота кнопки

г) text-align: center;

это я знаю, выровнять текст внутри кнопки

д) цвет кнопки обычный

е) цвет кнопки активный (при наведении)

ё) цвет шрифта обычный

ж) цвет шрифта при наведении

з) размер/тип шрифта

и) margin/padding я сделаю (нужен я думаю только padding для выравнивания текста)

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

Оно вообще-то очень простое мне кажется, там кода должно быть немного (ну кроме текста).

Я пытался посмотреть код на 3Dmir, но если я не ошибаюсь когда открываешь исходный код - там в одном текста и html и css, сложно разобраться.

И еще такой вопрос, дублированное меню будет внизу сайта, подскажите параметры для того чтобы задать направление открывающегося меню - вниз/вверх

В итоге мое меню должно выглядеть вот так (рисунок 8)

Ну вроде бы и все. Давайте сделаем такое меню - я вам буду очень благодарен

[Modestes]

сколько букв

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

вы между прочим в справочнике находитесь, далеко ходить даже не нужно.

вот вам выпадающее меню.

Edited June 15, 2012 by Modestes

[Eugene-N]

Спасибо! Я как раз хочу вникать, и изучать основы Спасибо за ссылку!

[Eugene-N]

Modestes - привет! Меню супер, только я не могу добавить подпункты третьего уровня.

Я вставляю список третьего уровня, а новые подпункты не появляются. Причем у меня есть образец меню третьего уровня, я просто его копирую (html без css) в код, все равно не получается. Можете привести пример кода html для меню, ссылку на которое вы дали?

Я нашел подробную статью

http://www.seo-copywrite.ru/web9/

но если не ошибаюсь там css код включен в html, а я хочу чтобы он был отдельно.

Я создал меню с помощью Dreamweaver

Но не могу отрегулировать кнопки по высоте, и подпункты меню имеют неправильное форматирование (на картинке видно, кнопки подпунктов располагаются не симметрично относительно предыдущих подпунктов). К тому же как мне сказали оно на скриптах, и более медленное чем css.

Edited June 23, 2012 by Eugene-N

[Modestes]

http://jsfiddle.net/kj2SK/ в первом разделе 3 уровня