Страница 1 из 11
Модератор форума: dotbot 
Сообщество uCoz » Архивариус » Корзина » Горизонтальное меню (Проблема с шириной меню)
Горизонтальное меню
Дядька
Сообщений: 105
Репутация: 17

Сообщение # 1 | 13:36:10
на МОЕМ сайте есть горизонтальное меню, не моу понять, как сделать, чтобы оно растягивалось на 100%


Код
/*новая менюшка*/
.menu a {  
  text-decoration: none;  
  color: black; /*цвет текста*/
text-shadow: 0 1px ;  
  font-weight: ;  
  font-size: 14px;  
  float: left;  
  display: block;  
   
}  
.menu a:hover { color: #276a85; text-shadow: 0 1px #e1eff5; } /*цвет текста клика*/
.drop-down a {  
  float: none;  
  min-width: 90px;  
}  

.menu a {  
  display: block;  
  padding: 10px 15px;  
}  

.drop-down-menu {  
  float: left;  
  display: block;  
}  

.menu-title {  
  cursor: default;  
  padding: 10px 15px;  
}  

.activate {  
  display: none;  

  position: absolute;  
  cursor: pointer;  
  width: 100%;  
  height: 50px;  
  margin: 0 0 0 -15px;  
  opacity: 0;  
}  

@media only screen and (min-width: 100%) {  

  .drop-down-menu:hover .drop-down {  
  display: block;  
  }  

  .drop-down {  
  position: absolute;  
  }  

}  

@media only screen and (max-width: 100%) {  

  .menu a, .drop-down-menu {  
  float: none;  
  }  

  .activate {  
  display: block;  
  }  

}  

/* Skin */  

.menu a, .drop-down-menu {  
  background: black;  
  background: -webkit-gradient(linear, left top, left bottom, from(orange), to(orange)); /**/цвет кнопок
  background: -moz-linear-gradient(top, black, black);  
}  

.menu a:hover, .drop-down-menu:hover {  
  background: black;  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF8C00), color-stop(100%,#FF8C00));  
  background: -moz-linear-gradient(top, #feffff 0%, #a2cfe0 100%);  
}  

.drop-down a {  
  background: black;  
}  

.drop-down a:hover {  
  background: #111;  
}  

@media only screen and (min-width: 800px) {  

  .first {  
  border-top-left-radius: 8px;  
  border-bottom-left-radius: 8px;  
  }  

  .last {  
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;  
  }  

  .drop-down .last {  
  border-radius: 0;  
  border-bottom-left-radius: 8px;  
  border-bottom-right-radius: 8px;  
  }  

}  

@media only screen and (max-width: 799px) {  

  .menu {  
background:black ;  
  background: -webkit-gradient(linear, left top, left bottom, from(#44a7cf), to(#317794));  
  background: -moz-linear-gradient(top, black, #317794);  
}  
  :checked ~ .menu-title {  
  background: #495261;  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#495261), color-stop(100%,#38404b));  
  background: -moz-linear-gradient(top, #495261 0%, #38404b 100%);  
  }  

  .menu a, .drop-down-menu {  
  background: none;  
  }  

  .drop-down a {  
  background: #222;  
  }  

}  

/* IE */  

.ie8 .drop-down-menu:hover .drop-down { display: block; }  
.ie8 .drop-down { position: absolute; }  

.drop-down {  
  max-height: 0;  
  overflow: hidden;  
}  

.ie8 .drop-down-menu:hover .drop-down {  
  max-height: 200px;  
}  

@media only screen and (min-width: 800px) {  

  .drop-down-menu:hover .drop-down {  
  max-height: 200px;  
  }  

}  

@media only screen and (max-width: 100%) {  

  .activate:checked ~ .drop-down {  
  max-height: 200px;  
  }  

}  

.drop-down, .menu a, .drop-down-menu {  
  -webkit-transform: translateZ(0);  
  -webkit-transition: all 0.3s;  
  -moz-transition: all 0.3s;  
  -o-transition: all 0.3s;  
  transition: all 0.3s;  
}

Продвижение сайтов
Сообщение отредактировал Дядька - Понедельник, 25 Авг 2014, 13:38:04
Yuri_G
Модератор форума
Сообщений: 4195
Репутация: 899

Сообщение # 2 | 16:24:43
Дядька, в стилях что вы предоставили, строка номер 20 замените на:
Код
padding: 10px 17.7px;

Помогу в переводе сайта на SSL / https (поправлю базы данных если у вас крупный проект или форум), писать на почту yurij.geruk@gmail.com
Dohster
Сообщений: 25
Репутация: 3

Сообщение # 3 | 16:44:18
Странная конструкция меню у вас.... куда проще делать через список:

Код
<ul class="menu">

<li><a href="#">Ссылка 1</a></li>  
<li><a href="#">Ссылка 2</a> </li>  

</ul>

Добавлено (25 Авг 2014, 16:43:10)
---------------------------------------------
css: (пример)

Код
ul.menu{
display: block;
}

ul.menu li{
padding: 5px;
list-style: none;
display: inline-block;
}

ul.menu li a{
background: pink;
color: #fff;
}

Добавлено (25 Авг 2014, 16:44:18)
---------------------------------------------
И будет вам ширина в 100%


Как то раз мне показалось что меня повысили, но это было красиво высказанное увольнение. (с) Симпcоны
Yuri_G
Модератор форума
Сообщений: 4195
Репутация: 899

Сообщение # 4 | 16:46:24
Цитата Dohster ()
Странная конструкция меню у вас
верно, конструкция очень, не удобна для дальнейшей настройки под себя. И подогнать по текущей конструкции меню под 100% не просто, проще вовсе переделать меню.

Помогу в переводе сайта на SSL / https (поправлю базы данных если у вас крупный проект или форум), писать на почту yurij.geruk@gmail.com
Сообщество uCoz » Архивариус » Корзина » Горизонтальное меню (Проблема с шириной меню)
Страница 1 из 11
Поиск: