Страница 1 из 11
Форум про uCoz » Всё для web-мастера » Web мастеру » Как растянуть горизонтальное меню на сайте uCoz
Как растянуть горизонтальное меню на сайте uCoz
Kosten
Дата: Пятница, 29.05.2015, 00:28 | Сообщение # 1
Администраторы
Сообщений:12696
Награды: 39


Все испробовал и так не смог растянуть горизонтальное меню. Кажется в стилях все понятно, но оно не растягивается, а просто дублируется. Кто может знает как совладать и прописать правильно стили.



Код
<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(57Kb)


First
Дата: Пятница, 29.05.2015, 01:16 | Сообщение # 2
Vip
Сообщений:383
Награды: 11


Kosten, Как вариант это в фотошопе, меню не резиновое и нужно тянуть картинку....

Kosten
Дата: Пятница, 29.05.2015, 01:19 | Сообщение # 3
Администраторы
Сообщений:12696
Награды: 39


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

๖ۣۜInspire
Дата: Суббота, 30.05.2015, 00:42 | Сообщение # 4
Администраторы
Сообщений:598
Награды: 2


Код
  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);
}

вот так




Моё портфолио
Kosten
Дата: Суббота, 30.05.2015, 01:11 | Сообщение # 5
Администраторы
Сообщений:12696
Награды: 39


๖ۣۜInspire, что то не получается, ๖ۣۜInspire, дай полные стили.

๖ۣۜInspire
Дата: Суббота, 30.05.2015, 01:20 | Сообщение # 6
Администраторы
Сообщений:598
Награды: 2


Код
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;  
}




Моё портфолио
Kosten
Дата: Суббота, 30.05.2015, 02:19 | Сообщение # 7
Администраторы
Сообщений:12696
Награды: 39


๖ۣۜ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(37Kb)


๖ۣۜInspire
Дата: Суббота, 30.05.2015, 15:06 | Сообщение # 8
Администраторы
Сообщений:598
Награды: 2


ну так так и нужно было, я скинул то что нужно было заменить



Моё портфолио
Kosten
Дата: Суббота, 30.05.2015, 21:26 | Сообщение # 9
Администраторы
Сообщений:12696
Награды: 39


๖ۣۜInspire, я просил полный стиль biggrin

Форум про uCoz » Всё для web-мастера » Web мастеру » Как растянуть горизонтальное меню на сайте uCoz
Страница 1 из 11
Поиск: