Как растянуть горизонтальное меню по ширине экрана?

Страница 1 из 1 1
Модератор форума: dotbot

SL1de

Сообщений: 13

Репутация: 0

Сообщение # 1 | 20:33:56 15 Апр 2014

HTML код меню:

Код

<ul id="menu">
<div class='ribbon'>
<a href='/'><span>Главная</span></a>
<a href='http://allonlinegames.ru/index/top_brauzernykh_igr/0-4'><span>Браузерные</span></a>
<a href='http://allonlinegames.ru/index/top_klientskikh_igr/0-5'><span>Клиентские</span></a>
<a href='http://allonlinegames.ru/index/samye_populjarnye/0-6'><span>Самые популярные</span></a>
<a href='http://allonlinegames.ru/index/novinki/0-7'><span>Новинки</span></a>
<a href='/index/0-3'><span>Контакты</span></a>
</div>
</ul>

CSS код:

Код

.ribbon {display:inline-block; }
.ribbon:after, .ribbon:before {margin-top:0.5em;content: ""; float:left; border:1.5em solid #fff;}

.ribbon:after {
border-right-color:transparent;
}

.ribbon:before {
border-left-color:transparent;
}

.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}

.ribbon span {
background:#fff;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;

-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}

.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}

.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.fixed {
   position: fixed;
   z-index: 100;
   background: #444;
   top: 0;
}

Уже выбился из сил не могу сделать чтоб растягивалось на весь экран помогите пожалуйста.
Сайт где это хочу сотворить allonlinegames.ru

Татуированый

Сообщений: 545

Репутация: 115

Сообщение # 2 | 22:01:46 15 Апр 2014

SL1de, отличная идея по поводу сайта с играми от партнерки happy

. Почему я до такого не додумался...!?

Если ты его растянешь, оно упрется в лого...
Тем у кого монитор 17" норм. У меня монитор 24" оно же будет смотреться не красиво sad

Добавлено (15 Апр 2014, 22:01:46)
---------------------------------------------
.ribbon {
display: inline-block;
}

Допиши
width: 1061px;

Пока еще меню не заполнишь новыми пунктами, белая часть больше не растянется. Если только не дополнить его пустышками. И выровнять по центру.

Сообщение отредактировал Татуированый - Вторник, 15 Апр 2014, 21:52:03

SL1de

Сообщений: 13

Репутация: 0

Сообщение # 3 | 22:50:28 15 Апр 2014

Цитата

SL1de, отличная идея по поводу сайта с играми от партнерки

. Почему я до такого не додумался...!?

Ну вообще СРА тема щас в моде)

Цитата

Допиши
width: 1061px;

а по поводу этого то хотелось бы сделать что то вроде width: 100% ток как не пробовал не получается(

Татуированый

Сообщений: 545

Репутация: 115

Сообщение # 4 | 23:00:58 15 Апр 2014

SL1de, а зачем 100%?
Чтоб было от левого края монитора до правого?

DimoN1999

Сообщений: 48

Репутация: 0

Сообщение # 5 | 23:06:48 15 Апр 2014

Татуированый,

Цитата

SL1de, а зачем 100%?
Чтоб было от левого края монитора до правого?

Тогда 90-95%

Татуированый

Сообщений: 545

Репутация: 115

Сообщение # 6 | 23:10:14 15 Апр 2014

DimoN1999, Ну все равно кака выйдет. Если монитор 17" то нормально будет. У меня к примеру монитор 24", представь как это меню будет выглядеть...

brizing

Разработчик

Сообщений: 2556

Репутация: 1091

Сообщение # 7 | 23:34:13 15 Апр 2014

Код

<!DOCTYPE html>
<html>
<head>
<style>
body {background:#000;}

.ribbon {display:table; width:100%; padding:0 3em; position:relative;}
.ribbon>ul {display:table-row;}
.ribbon>ul>li {display:table-cell; text-align:center;}
.ribbon:after, .ribbon:before {margin-top:0.5em;content: ""; position:absolute; border:1.5em solid #fff;}
.ribbon:after {right:0em; bottom:0em;}
.ribbon:before {left:0em; bottom:0em;}

.ribbon:after {
border-right-color:transparent;
}

.ribbon:before {
border-left-color:transparent;
}

.ribbon a:link, .ribbon a:visited {
display:block;
color:#000;
text-decoration:none;
height:3.5em;
overflow:hidden;
}

.ribbon span {
background:#fff;
display:block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;

-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}

.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}

.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.fixed {
    position: fixed;
    z-index: 100;
    background: #444;
    top: 0;
}
</style>
</head>

<body>

<div id="menu">
<div class="ribbon">
<ul>
<li><a href='/'><span>Главная</span></a></li>
<li><a href='http://allonlinegames.ru/index/top_brauzernykh_igr/0-4'><span>Браузерные</span></a></li>
<li><a href='http://allonlinegames.ru/index/top_klientskikh_igr/0-5'><span>Клиентские</span></a></li>
<li><a href='http://allonlinegames.ru/index/samye_populjarnye/0-6'><span>Самые популярные</span></a></li>
<li><a href='http://allonlinegames.ru/index/novinki/0-7'><span>Новинки</span></a></li>
<li><a href='/index/0-3'><span>Контакты</span></a></li>
</ul>
</div>
</div>

</body>
</heml>

Я отправляюсь спать, поэтому публикую недоработанный вариант.
Можете воспользоваться.

Читайте книги role.su - Rolesu Authors Workshop.

SL1de

Сообщений: 13

Репутация: 0

Сообщение # 8 | 11:42:51 16 Апр 2014

Код

<!DOCTYPE html>
  <html>
  <head>
  <style>
  body {background:#000;}

  .ribbon {display:table; width:100%; padding:0 3em; position:relative;}
  .ribbon>ul {display:table-row;}
  .ribbon>ul>li {display:table-cell; text-align:center;}
  .ribbon:after, .ribbon:before {margin-top:0.5em;content: ""; position:absolute; border:1.5em solid #fff;}
  .ribbon:after {right:0em; bottom:0em;}
  .ribbon:before {left:0em; bottom:0em;}

  .ribbon:after {
  border-right-color:transparent;
  }

  .ribbon:before {
  border-left-color:transparent;
  }

  .ribbon a:link, .ribbon a:visited {
  display:block;
  color:#000;
  text-decoration:none;
  height:3.5em;
  overflow:hidden;
  }

  .ribbon span {
  background:#fff;
  display:block;
  line-height:3em;
  padding:0 1em;
  margin-top:0.5em;
  position:relative;

  -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
  -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
  -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
  -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
  transition: background-color 0.2s, margin-top 0.2s;
  }

  .ribbon a:hover span {
  background:#FFD204;
  margin-top:0;
  }

  .ribbon span:before {
  content: "";
  position:absolute;
  top:3em;
  left:0;
  border-right:0.5em solid #9B8651;
  border-bottom:0.5em solid #fff;
  }

  .ribbon span:after {
  content: "";
  position:absolute;
  top:3em;
  right:0;
  border-left:0.5em solid #9B8651;
  border-bottom:0.5em solid #fff;
  }
  .fixed {
     position: fixed;
     z-index: 100;
     background: #444;
     top: 0;
  }
  </style>
  </head>

  <body>

  <div id="menu">
  <div class="ribbon">
  <ul>
  <li><a href='/'><span>Главная</span></a></li>
  <li><a
href='http://allonlinegames.ru/index/top_brauzernykh_igr/0-4'><span>Браузерные</span></a></li>

  <li><a href='http://allonlinegames.ru/index/top_klientskikh_igr/0-5'><span>Клиентские</span></a></li>

  <li><a href='http://allonlinegames.ru/index/samye_populjarnye/0-6'><span>Самые
  популярные</span></a></li>
  <li><a href='http://allonlinegames.ru/index/novinki/0-7'><span>Новинки</span></a></li>
  <li><a href='/index/0-3'><span>Контакты</span></a></li>
  </ul>
  </div>
  </div>

  </body>
  </heml>

Данное решение к сожалению не работает(( есть еще у кого какие мысли по этому поводу.

сondor

Сообщений: 4661

Репутация: 1528

Сообщение # 9 | 11:49:49 16 Апр 2014

SL1de, вам нужно оба меню расширить?

Прикрепления: 8858318.jpg (21.1 Kb)

SL1de

Сообщений: 13

Репутация: 0

Сообщение # 10 | 20:36:44 16 Апр 2014

Цитата

SL1de, вам нужно оба меню расширить?

Простите но меню на сайте которое нужно растянуть одно. не пойму только откуда 1ый скрин?

сondor

Сообщений: 4661

Репутация: 1528

Сообщение # 11 | 12:19:40 17 Апр 2014

SL1de, 1 скриншот меню который у вас был до этого. Вижу что вы его убрали.

Цитата

.fixed {
position: fixed;
z-index: 100;
background: #444;
top: 0;
width: 100%;
}

Цитата

.ribbon li {
display: table-cell;
}

а это в меню дописывайте:

Цитата

<div id="menu" class="fixed">
<div class="ribbon">
<ul>
<li><a href="/"><span>Главная</span></a></li>
<li><a href="http://allonlinegames.ru/index/top_brauzernykh_igr/0-4"><span>Браузерные</span></a></li>
<li><a href="http://allonlinegames.ru/index/top_klientskikh_igr/0-5"><span>Клиентские</span></a></li>
<li><a href="http://allonlinegames.ru/index/samye_populjarnye/0-6"><span>Самые популярные</span></a></li>
<li><a href="http://allonlinegames.ru/index/novinki/0-7"><span>Новинки</span></a></li>
<li><a href="/index/0-3"><span>Контакты</span></a></li>
<li><a href="#dialog" name="modal"><span>Поиск по сайту</span></a></li>
</ul>
</div>
</div>

и далее добавляйте в css стили по примеру который вам дал brizing

SL1de

Сообщений: 13

Репутация: 0

Сообщение # 12 | 21:32:19 17 Апр 2014

Меню растянулось но не так как хотелось бы. тут посмотрите как оно стало. Мне кажется осталось чуток его допилить) Устанавливал по инструкции.

Как растянуть горизонтальное меню по ширине экрана?

Страница 1 из 1
1