Перейти к содержимому

Реферальная программа Мегаплана


Помогите реализовать горизонтальное меню

#1 WebMaster

WebMaster
  • Пользователь
  • 97 сообщений
  • Репутация: 3
0

Отправлено 21 Август 2012 - 07:36

Начал верстать шаблончеГ тестовый, и вот столкнулся с ситуацией. Не знаю, как рационально графику нарезать? Там первая кнопка меньше, потом идут побольше последняя вообще поиск. Фоном пускать целое изображение и потом подключать другие изображения для каждой кнопки при наведении, тоже не рационально. Как вот вы бы его реализовали??

Всяко пробовал. first-child делал, но у меня все ячейки тогда становятся как first-child

<nav id="h-navigation">
	<ul>
	  <li><a href="<?php bloginfo('url'); ?>/#" title="Домашняя страница"></a></li>
	  <li><a href="<?php bloginfo('url'); ?>/#" title="Обо мне">Об авторе</a></li>
	  <li><a href="<?php bloginfo('url'); ?>/#" title="Делюсь полезным бесплтано!">Бесплатное</a></li>
	  <li><a href="<?php bloginfo('url'); ?>/#" title="Над чем я работаю">Мои проекты</a></li>
	  <li><a href="<?php bloginfo('url'); ?>/#" title="Мои платные издания на DVD-дисках">Курсы на DVD</a></li>
	</ul>
	<div id="search">
	  <form action="" method="">
	  <input type="text" value="Поиск" id="" name=""/>
	  </form>
	</div>
  </nav>

nav#h-navigation {
  width:960px;
  height:77px;
  clear:both;
  background:url('../images/menu-h.png') no-repeat;
  color:#fff;
  }
  nav#h-navigation ul{
   width:660px;
   }
   nav#h-navigation ul li {
   float:left;
   display:block;
   height:77px;
   }
   nav#h-navigation li a {
   color:#fff;
   text-decoration:none;
   line-height:82pt;
   display:block;
   height:77px;
   text-align:center;
   width:147px;
   }
div#search {
  float:right;
  width:300px;
  height:77px;
  }

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

Прикрепленные изображения

  • Главное-меню.jpg

 

 

  • 0

#2 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 21 Август 2012 - 07:54

я не думаю, что это будет очень накладно в плане веса, если у тебя конечно dial-up модем, то сделай узкую полоску бэкграeнда и примени ему свойство repeart-y а иконки отдельно поставь, ну и текст напиши
  • 0

#3 WebMaster

WebMaster
    Topic Starter
  • Пользователь
  • 97 сообщений
  • Репутация: 3

Отправлено 21 Август 2012 - 08:58

У меня все быстро грузится...и мой вариант отлично работает, просто вдруг что... вдруг у кого то диал ап))
  • 0

#4 Crusader

Crusader
  • Пользователь
  • 23 сообщений
  • Репутация: 0

Отправлено 24 Сентябрь 2012 - 21:34

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

А я бы именно так и поступил. Зачем изобретать велосипед? Переживаете, что долго будет грузиться? Не беда - диал-апом уже лет пять никто не пользуется, насколько я знаю. Поэтому смысла подстраиваться под нескольких "уникальных" пользователей не вижу никакого смысла.
  • 0


Оформление форума – IPBSkins.ru