Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Горизонтальное меню

Автор: WantedFan 20.7.2008, 09:25

Доброе утро. Подскажите как сделать горизонтальное меню состоящее из (left_bg.png,bg.png,right_bg.png) с помощью css

Вообщем то то мне нужно я изобразил на картинке
http://ipicture.ru/Gallery/Viewfull/3850763.html
Заранее всем спасибо за помощь
smile

Автор: WantedFan 20.7.2008, 14:11

Не проходите мимо!! Уж очень нуждаюсь в вашей помощи smile

Автор: skyboy 20.7.2008, 14:31

делается свойством float и тремя div'ами.
либо одной таблицей с тремя ячейками в единственной строке.
либо тремя подряд идущими img'ами, если не боишься переноса при внезапном достижении края родительского блока(например, родительский блок имеет четко указанную ширину).

Добавлено через 59 секунд

Цитата(skyboy @ 20.7.2008, 13:31

)

делается свойством float и тремя div'ами.

надо читать: "тремя div'ами со свойством float"

Автор: WantedFan 20.7.2008, 15:03

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

Автор: skyboy 20.7.2008, 15:19

Код


<div style="float: left; width: 20px; background-image: url(images/left.png);" />
<div style="float: left; width: 80px; background-image: url(images/middle.png);" />
<div style="float: left; width: 20px; background-image: url(images/right.png);" />

Код


<table>
<tr>
<td><img src="images/left.png" /></td>
<td><img src="images/middle.png" /></td>
<td><img src="images/right.png" /></td>
</tr>
</table>

Код


<img src="images/left.png" />
<img src="images/middle.png" />
<img src="images/right.png" />

Автор: WantedFan 20.7.2008, 15:32

а почему все float left ?? почему right.png не float:right ?
Вставил код div- не работает ? smile

Автор: WantedFan 20.7.2008, 18:24

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

Автор: webster 20.7.2008, 18:42

http://www.dynamicdrive.com/style/csslibrary/category/C1/

Автор: WantedFan 20.7.2008, 20:30

чучуть не то... задолбался код разбирать.
Может есть варианты попроще и в тему ?
Нужно что-бы меню состояло из
left-bg.gif -----bg.gif-------- right-bf.gif
Ширина 1120px
высотаменю 32px
позиция посередине

Заранее спасибо smile

Автор: NDenis 21.7.2008, 10:46

Надеюсь, Вам этот код будет проще разобрать?

Код


<style type="text/css">
.left {
    background:url(_i/left.gif) no-repeat left top;
}
.right {
    background:url(_i/right.gif) no-repeat right top;
}
.nav {
    background:url(_i/bg.gif) repeat-x;
    height:53px;
    list-style:none;
    margin:0 15px;
}
.nav li {
    float:left;
    list-style:none;
    margin:0 25px;
}
.nav li a {
    line-height:53px;
}
</style>
<div class="left">
    <div class="right">
        <ul class="nav">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </div>
</div>

Автор: WantedFan 21.7.2008, 12:08

ура заработало. Спасибо за помощь

Автор: WantedFan 21.7.2008, 12:27

А как поверх этого меню поместить графическую ссылку(кнопку) ?
Такой способ подойдет ?

CSS

Цитата

    #forumbutton{
    background:url(images/topnav/forumbut.jpg);
    float:right;
    margin:0 25px;
}

HTML

Цитата

Добавлено через 3 минуты и 19 секунд
вот вообщем пример того что мне нужно

Там всё меню одним изображением.
Как разделить меню исделать части изображения активными ссылками ?

Автор: NDenis 21.7.2008, 13:16

Цитата

Как разделить меню исделать части изображения активными ссылками?

С помощью инструмента Slice в Photoshop'е.

Вырезаете каждую иконку пункта меню и вставляете его примерно таким кодом:

Код


.nav li.search {
    background:url(_i/search.gif) no-repeat;
    height:35px;
}
...
.nav li a {
    color:#fff;
    font:bold 10px Tahoma;
    padding-left:41px;
    text-decoration:none;
}

HTML примерно такой:

Код


<ul class="nav">
    <li class="search"><a href="#">maklet</a></li>
    <li class="foto"><a href="#">foto</a></li>
    <li class="iivv"><a href="#">1188</a></li>
</ul>

Автор: WantedFan 21.7.2008, 14:11

а что если кнопка выше чем само меню.
Меню 32px
Кнопка 50 px

вот что получилось из предоставленного кода

Как сровнять ?

Автор: NDenis 21.7.2008, 14:21

а что мешает поиграть координатами?
без кода, "по фотографии" лечить сложно
посмотрите, http://kuzma.xost.ru/100/hor_menu/menu.html представленное меню

Автор: WantedFan 21.7.2008, 14:37

CSS

Цитата

.left {
    background: url(images/topnav/left.jpg) no-repeat left top;
}
.right {
    background: url(images/topnav/right.jpg) no-repeat right top;
}
.nav {
    background: url(images/topnav/bg.jpg) repeat-x;
    height:32px;
    list-style:none;
    margin:0 15px;
}

.nav li.search {
    background: url(images/topnav/forumbut.jpg) no-repeat;
    background-position:center;
    height:50px;

}
.nav li a {
    color:#fff;
    font:bold 10px Tahoma;
    padding-left:41px;
    text-decoration:none;
}

и HTML

Цитата

А то что у вас получилось кокраз то что мне и нужно
[/QUOTE]

Автор: WantedFan 21.7.2008, 15:02

маленький вопрос.
С помощью какого кода css картинку переместить в правую сторону ?

Добавлено через 7 минут и 28 секунд
разобрался...
Спасибо вам огромное

Автор: WantedFan 21.7.2008, 15:25

возникла новая проблема.
Некорректно работает меню в таких браузерах как ОПЕРА(последняя версия) и IE 6 версия.
А точнее не работают ссылки - в этих браузерах их как будто вообще не существует.
Вот можете посмотреть http://77.93.8.64/

Дополнительно: Как сделать что-бы при нажатии на ссылку не было видно пунктирной рамочки.
А то весь вид поганит

Автор: NDenis 21.7.2008, 15:46

выдержка из вашего кода:

Цитата

Код


<li class="radiobutton"><a href="http://partyradio.ru"></a></li>

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

Код


<li class="radiobutton"><a href="http://partyradio.ru"><span>Радио</span></a></li>

Код


a span {
display:none;
}

Автор: WantedFan 21.7.2008, 17:37

Ещё раз спасибо огромное.
Проблема навигации решена

Автор: liliana2 29.1.2009, 09:32

Помогите и мне тоже, что-то никак нигде не могу найти, есть вертикально меню, и надо чтобы в меню слева при нажатии на пункт меню раскрывался список второго уровня, помогите отыскать скрипт или другую реализацию пример такого меню здесь:
http://www.zto.ru/ (Каталог например слева)
только с одной поправкой, чтобы когда другой пункт меню первого уровня тыкаешь предыдущее открытое закрывалось
-----
смотрела как подобные меню реализовано - понять не могу, там тока чистый хтмл и никакого скрипта, как оно тогда работает, если кто подскажет где найти пример и разобраться, буду очень признательна