• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как растянуть горизонтальное меню на сайте uCoz
Как растянуть горизонтальное меню на сайте uCoz
Kosten
Пятница, 29 Мая 2015 | Сообщение 1
Онлайн
Администраторы
Сообщений:44269
Награды: 70
Все испробовал и так не смог растянуть горизонтальное меню. Кажется в стилях все понятно, но оно не растягивается, а просто дублируется. Кто может знает как совладать и прописать правильно стили.



Код
<ul class="menu">
  <li><a class="first" href="/">Главная</a></li>
  <li><a href="/">Скрипты сайта</a></li>
   <li><a href="/">ZORNET.RU</a></li>  
<li><a href="/">Блог</a></li>  
  <li><a href="/">Шаблоны сайта</a></li>  
<li><a href="/">Все для uCoz</a></li>  
  <li><a href="/">Дизайн сайта</a></li>  
<li><a href="/">Связь</a></li>  

  </ul>


Это стили:

Код
ul.menu {list-style:none;padding:0;margin:0;width:1041px;height:36px;line-height:300%;font-weight:600;background:url('http://zornet.ru/CSS-ZORNET/ZER-1/back.jpg');font-size:12px; font-family:Tahoma;
}
ul.menu li {float:left;position:relative;height:36px;background:url('http://zornet.ru/CSS-ZORNET/ZER-1/separator.png') top right no-repeat;}
ul.menu li a {background:url('http://zornet.ru/CSS-ZORNET/ZER-1/href.png') top center no-repeat;color:#A8FCFF;text-decoration:none;display:block;height:36px;padding:0 11px;margin-right:3px;overflow:hidden;text-shadow:0 1px 1px #000;}
ul.menu li a.first {background:none;}
ul.menu li a:hover {background:url('http://zornet.ru/CSS-ZORNET/ZER-1/hover.png') top center no-repeat;}


Здесь: DEMO
Прикрепления: 3803623.jpg (56.9 Kb)
Страна: (RU)
First-1
Пятница, 29 Мая 2015 | Сообщение 2
Оффлайн
Пользователи
Сообщений:716
Награды: 22
Kosten, Как вариант это в фотошопе, меню не резиновое и нужно тянуть картинку....
Страна: (UA)
Kosten
Пятница, 29 Мая 2015 | Сообщение 3
Онлайн
Администраторы
Сообщений:44269
Награды: 70
First, привет, все понятно. То все испробовал, не чего не помогает в плане растяжке, дубль идет и все, на фиксированный сайт подойдет.
Страна: (RU)
๖ۣۜInspire
Суббота, 30 Мая 2015 | Сообщение 4
Оффлайн
Vip
Сообщений:598
Награды: 3
Код
  ul.menu{
background: url(http://zornet.ru/left.jpg) no-repeat left, url(http://zornet.ru/right.jpg) no-repeat right, url(http://zornet.ru/center.jpg);
}

вот так




Моё портфолио
Страна: (RU)
Kosten
Суббота, 30 Мая 2015 | Сообщение 5
Онлайн
Администраторы
Сообщений:44269
Награды: 70
๖ۣۜInspire, что то не получается, ๖ۣۜInspire, дай полные стили.
Страна: (RU)
๖ۣۜInspire
Суббота, 30 Мая 2015 | Сообщение 6
Оффлайн
Vip
Сообщений:598
Награды: 3
Код
ul.menu {list-style:none;padding:0;margin:0;width:1041px;height:36px;line-height:300%;font-weight:600;background: url('http://zornet.ru/left.jpg') no-repeat left, url('http://zornet.ru/right.jpg') no-repeat right, url('http://zornet.ru/center.jpg'); ;font-size:12px; font-family:Tahoma;  
}




Моё портфолио
Страна: (RU)
Kosten
Суббота, 30 Мая 2015 | Сообщение 7
Онлайн
Администраторы
Сообщений:44269
Награды: 70
๖ۣۜInspire, вот что получилось, это безусловно стало растянутое или как говорят резиновое меню. И была изменена сама суть его, это основа стала темнее , а вот навигация в желтом оттенке и можете посмотреть что вышло, код ниже приведен.



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

Код
<ul class="menu">  
   <li><a class="first" href="http://zornet.ru/">Главная</a></li>  
   <li><a href="http://zornet.ru/">Скрипты сайта</a></li>  
    <li><a href="http://zornet.ru/">ZORNET.RU</a></li>   
<li><a href="http://zornet.ru/">Блог</a></li>   
   <li><a href="http://zornet.ru/">Шаблоны сайта</a></li>   
<li><a href="/">Все для uCoz</a></li>   
   <li><a href="/">Дизайн сайта</a></li>   
<li><a href="/">Связь</a></li>   

   </ul>


Стили:

Код
ul.menu {list-style:none;padding:0;margin:0;width: inherit;height:36px;line-height:300%;font-weight:600;background: url('http://zornet.ru/SKRIPT/Menu/left.jpg') no-repeat left, url('http://zornet.ru/SKRIPT/Menu/right.jpg') no-repeat right, url('http://zornet.ru/SKRIPT/Menu/center.jpg'); ;font-size:12px; font-family:Tahoma;   
}

ul.menu li {float:left;position:relative;height:36px;background:url('http://zornet.ru/SKRIPT/Menu/separator.png') top right no-repeat;}  
ul.menu li a {background:url('http://zornet.ru/SKRIPT/Menu/href.png') top center no-repeat;color:#F3FFA6;text-decoration:none;display:block;height:36px;padding:0 11px;margin-right:3px;overflow:hidden;text-shadow:0 1px 1px #000;}  
ul.menu li a.first {background:none;}  
ul.menu li a:hover {background:url('http://zornet.ru/SKRIPT/Menu/hover-6754.png') top center no-repeat;}


Прикрепления: 5230766.jpg (37.4 Kb)
Страна: (RU)
๖ۣۜInspire
Суббота, 30 Мая 2015 | Сообщение 8
Оффлайн
Vip
Сообщений:598
Награды: 3
ну так так и нужно было, я скинул то что нужно было заменить



Моё портфолио
Страна: (RU)
Kosten
Суббота, 30 Мая 2015 | Сообщение 9
Онлайн
Администраторы
Сообщений:44269
Награды: 70
๖ۣۜInspire, я просил полный стиль biggrin
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как растянуть горизонтальное меню на сайте uCoz
  • Страница 1 из 1
  • 1
Поиск: