Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Горизонтальное меню, помогите сотворить 
:(
    Опции темы
WantedFan
Дата 20.7.2008, 09:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 45
Регистрация: 5.7.2008

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

Вообщем то то мне нужно я изобразил на картинке
 user posted image
Заранее всем спасибо за помощь
 smile 

Это сообщение отредактировал(а) WantedFan - 20.7.2008, 09:26
PM MAIL   Вверх
WantedFan
Дата 20.7.2008, 14:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 45
Регистрация: 5.7.2008

Репутация: нет
Всего: нет
Не проходите мимо!! Уж очень нуждаюсь в вашей помощи  smile 
PM MAIL   Вверх
skyboy
Дата 20.7.2008, 14:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


неОпытный
****


Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

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

Добавлено через 59 секунд
Цитата(skyboy @  20.7.2008,  13:31 Найти цитируемый пост)
делается свойством float и тремя div'ами.

надо читать: "тремя div'ами со свойством float"
PM MAIL   Вверх
WantedFan
Дата 20.7.2008, 15:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 45
Регистрация: 5.7.2008

Репутация: нет
Всего: нет
а не мог бы ты пожалуйста примером показать...подкинуть идеи. А то я чайник теряюсь..
PM MAIL   Вверх
skyboy
Дата 20.7.2008, 15:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


неОпытный
****


Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260
Код

<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" />
PM MAIL   Вверх
WantedFan
Дата 20.7.2008, 15:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 45
Регистрация: 5.7.2008

Репутация: нет
Всего: нет
а почему все float left ?? почему right.png не float:right ?
Вставил код div- не работает ? smile 
PM MAIL   Вверх
WantedFan
Дата 20.7.2008, 18:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 45
Регистрация: 5.7.2008

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


Это сообщение отредактировал(а) WantedFan - 20.7.2008, 18:28
PM MAIL   Вверх
webster
Дата 20.7.2008, 18:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34
http://www.dynamicdrive.com/style/csslibrary/category/C1/
PM MAIL   Вверх
WantedFan
Дата 20.7.2008, 20:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 45
Регистрация: 5.7.2008

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

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

Это сообщение отредактировал(а) WantedFan - 20.7.2008, 20:31
PM MAIL   Вверх
NDenis
Дата 21.7.2008, 10:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8
Надеюсь, Вам этот код будет проще разобрать?
Код

<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>
PM MAIL   Вверх
WantedFan
Дата 21.7.2008, 12:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 45
Регистрация: 5.7.2008

Репутация: нет
Всего: нет
ура заработало. Спасибо за помощь 

Это сообщение отредактировал(а) WantedFan - 21.7.2008, 12:11

Присоединённый файл ( Кол-во скачиваний: 14 )
Присоединённый файл  d.jpg 225,40 Kb
PM MAIL   Вверх
WantedFan
Дата 21.7.2008, 12:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 45
Регистрация: 5.7.2008

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

CSS
Цитата

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



HTML
Цитата

<a id="forumbutton" href="localhst"></a>


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

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


Это сообщение отредактировал(а) WantedFan - 21.7.2008, 12:28

Присоединённый файл ( Кол-во скачиваний: 9 )
Присоединённый файл  lv_classic_intl_w.png 7,61 Kb
PM MAIL   Вверх
NDenis
Дата 21.7.2008, 13:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8
Цитата

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

С помощью инструмента 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>
PM MAIL   Вверх
WantedFan
Дата 21.7.2008, 14:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 45
Регистрация: 5.7.2008

Репутация: нет
Всего: нет
а что если кнопка выше чем само меню.
Меню 32px
Кнопка 50 px

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

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

Это сообщение отредактировал(а) WantedFan - 21.7.2008, 14:17

Присоединённый файл ( Кол-во скачиваний: 9 )
Присоединённый файл  __________.jpg 504,98 Kb
PM MAIL   Вверх
NDenis
Дата 21.7.2008, 14:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8
а что мешает поиграть координатами?
без кода, "по фотографии" лечить сложно
посмотрите, как я сделал представленное меню


Это сообщение отредактировал(а) NDenis - 21.7.2008, 14:26
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0842 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.