Приветствую Вас, Гость! Регистрация RSS

Tracker-On.ru

Четверг, 03.12.2020
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Инфо веб мастеру » Видео/Статьи » Создание Горизонтального меню по типу кнопок
Создание Горизонтального меню по типу кнопок
[npu3pak]Дата: Среда, 01.12.2010, 22:41 | Сообщение # 1
3e6ecT MoDeP [npu3pak]™
Группа: Постоянный
Сообщений: 613
Награды: 3
Репутация: 124
Статус: Offline

Вообще сделать меню из кнопок к примеру как у нас на форуме достаточно гимаройно, сейчас расскажу как сделать типо того но гораздо проще и легче.
Идея пришла когда увидел меню на форуме studioad, подумал как там сделано и придумал такой способ.
Мы делаем фон (прямоугольник с закруглёнными углами) на нём размещаем меню, между ссылок ставим картинку как бы пробел для кнопок, эта картинка конец одной кнопки и на чало второй. Всё просто, приступим к реализации.

В фотошопе я нарисовал такую заготовку

Далее с помощью инструмента "Раскройка" порезал картинку. Нам нужны 4 части, зачёркнутое выкидываем.

Html код
Code
div class="l"></div>  
<div class="p"></div>  
<div class='c'>  

<a href="/">Главная</a> <img src="images/x.jpg" alt="">  
<a href="/">Форум</a> <img src="images/x.jpg" alt="">  
<a href="/">Последние сообщения</a> <img src="images/x.jpg" alt="">  
<a href="/">Пользователи</a> <img src="images/x.jpg" alt="">  
<a href="/">Пользователи</a> <img src="images/x.jpg" alt="">  
<a href="/">rss - ленты</a>    

</div>

Css код
Code
.l {background:url(images/l.jpg) no-repeat /*не растягивающийся бекгроунд*/;  
height:40px /*высота*/;  
width:24px /*ширина*/;  
float:left /*сам элемент с лева всё обтекание с права*/;}/*левая часть*/  

.p {background:url(images/p.jpg) no-repeat;height:40px;width:30px;float:right;}/*правая часть*/  
.c {background:url(images/c.jpg) repeat-x;height:40px;width:100%;} /*фон*/  

.c a, .c img {float:left;} /*ставим обтекание картинкам и ссылкам, для того чтобы всё было в ряд*/  
.c a {margin:13px 6px 0 5px;} /*выравниваем ссылки*/


[Table]Помоги поднять репу !![/Table]
[Table][/Table]
[Table][/Table]
[Table]Мои услуги тут[/Table]
 
Dj_DimaMCДата: Четверг, 02.12.2010, 10:50 | Сообщение # 2
Генерал-полковник
Группа: Постоянный
Сообщений: 1148
Награды: 4
Репутация: 91
Статус: Offline
[npu3pak], повтор такую тему видел)

 
Dj_DimaMCДата: Четверг, 02.12.2010, 11:31 | Сообщение # 3
Генерал-полковник
Группа: Постоянный
Сообщений: 1148
Награды: 4
Репутация: 91
Статус: Offline
[npu3pak], вот ссылка на повтор : http://crove.ru/forum/77-206-1

 
Форум » Инфо веб мастеру » Видео/Статьи » Создание Горизонтального меню по типу кнопок
  • Страница 1 из 1
  • 1
Поиск: