• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Модератор форума: -SAM-  
Форум » Веб-разработка » Вопросы про uCoz » Создать кнопки для своего сайта (Нужна помощь с кнопками)
Создать кнопки для своего сайта
rekersil
 		Воскресенье, 22 Января 2017, 17:28 | Сообщение 1
Оффлайн
Проверенные
Сообщений:185
Награды: 1
« 13 »
Делаю кнопки для своего сайта ucoz через обычный текстовый документ. Но у меня появилась проблема со стилями. Вообщем,когда я навожу мышь на текст,кнопку можно открыть,а когда возле текста,нет

Более понятнее на скринах.(Так как мышка на скринах не показывается,я нарисовал вместе нее стрелочки 11a )





Добавлено (22.01.2017, 17:28)
---------------------------------------------

Код

<style type="text/css">
.menu{
height: 20px;
width: 210px;
text-align: center;
}

.menu-list {
list-style-type: none;
padding: 0 5px;
}

.menu-list li {
text-align: left;
background-color: #2b2b2b;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #383131;
border-top: 1px solid #504848;
border-right: 1px solid #443E3E;
border-bottom: 1px solid #211F1F;
border-left: 1px solid #3C3636;
border-radius: 4px;
}
.menu-list a {
text-decoration: none;
font-weight: 600;
color: #aaa;
padding-left: 16px;
}
.menu-list li:hover{
text-align: left;
background: #4e4e4e;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #383131;
border-top: 1px solid #504848;
border-right: 1px solid #443E3E;
border-bottom: 1px solid #211F1F;
border-left: 1px solid #3C3636;
border-radius: 4px;

}
.menu-list a:hover {
text-decoration: none;
font-weight: 600;
color: #e0e0e0;
padding-left: 16px;
}
</style>
<div class="menu">
<ul class="menu-list">
<li>
<a href="">Биографии</a>
</li>
<li>
<a href="">Боевики</a>
</li>
<li>
<a href="">Вестерны</a>
</li>
<li>
<a href="">Военные</a>
</li>
<li>
<a href="">Детективы</a>
</li>
<li>
<a href="">Документальные</a>
</li>
<li>
<a href="">Драмы</a>
</li>
<li>
<a href="">Исторические</a>
</li>
<li>
<a href="">Комедии</a>
</li>
<li>
<a href="">Криминал</a>
</li>
<li>
<a href="">Мелодрамы</a>
</li>
<li>
<a href="">Мультфильмы</a>
</li>
<li>
<a href="">Мюзиклы</a>
</li>
<li>
<a href="">Отечественные</a>
</li>
<li>
<a href="">Приключения</a>
</li>
<li>
<a href="">Семейные</a>
</li>
<li>
<a href="">Спортивные</a>
</li>
<li>
<a href="">Триллеры</a>
</li>
<li>
<a href="">Ужасы</a>
</li>
<li>
<a href="">Фантастика</a>
</li>
<li>
<a href="">Фэнтези</a>
</li>

</ul>

</div>
Прикрепления: 7261426.png (34.0 Kb) · 3245297.png (34.0 Kb)


Сообщение отредактировал
rekersil - Воскресенье, 22 Января 2017, 17:28
Страна: (UA)
waak
 		Воскресенье, 22 Января 2017, 17:39 | Сообщение 2
Оффлайн
Проверенные
Сообщений:588
Награды: 14
« 166 »
Код
.menu-list a {
text-decoration: none;
font-weight: 600;
color: #aaa;
padding-left: 16px;
}


Тут нужно добавить ешё строчку display: block;
Страна: (RU)
rekersil
 		Воскресенье, 22 Января 2017, 17:51 | Сообщение 3
Оффлайн
Проверенные
Сообщений:185
Награды: 1
« 13 »
Цитата waak ()
Тут нужно добавить ешё строчку display: block;

---------------

Спасибо вам большое)
Страна: (UA)
rekersil
 		Воскресенье, 22 Января 2017, 18:27 | Сообщение 4
Оффлайн
Проверенные
Сообщений:185
Награды: 1
« 13 »
Цитата waak ()
Тут нужно добавить ешё строчку display: block;

А теперь появилась новая проблемка.Ниже текста тоже нельзя открыть.

Там где 2 стрелки-не работает.

Добавлено (22.01.2017, 18:27)
---------------------------------------------
waak, Поможешь?

Прикрепления: 3654887.png (35.0 Kb) · 9188594.png (34.7 Kb)
Страна: (UA)
waak
 		Воскресенье, 22 Января 2017, 18:47 | Сообщение 5
Оффлайн
Проверенные
Сообщений:588
Награды: 14
« 166 »
Цитата rekersil ()
waak, Поможешь?

Чем смогу!
вот тут убери padding: 5px;
Код
.menu-list li {
text-align: left;
background-color: #2b2b2b;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #383131;
border-top: 1px solid #504848;
border-right: 1px solid #443E3E;
border-bottom: 1px solid #211F1F;
border-left: 1px solid #3C3636;
border-radius: 4px;
}


и добавь его вот сюда
Код
.menu-list a {
text-decoration: none;
font-weight: 600;
color: #aaa;
padding-left: 16px;
}

Сообщение отредактировал
waak - Воскресенье, 22 Января 2017, 18:48
Страна: (RU)
rekersil
 		Воскресенье, 22 Января 2017, 18:55 | Сообщение 6
Оффлайн
Проверенные
Сообщений:185
Награды: 1
« 13 »
Цитата waak ()
Чем смогу!
вот тут убери padding: 5px;
Код: выделить всё
.menu-list li {
text-align: left;
background-color: #2b2b2b;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #383131;
border-top: 1px solid #504848;
border-right: 1px solid #443E3E;
border-bottom: 1px solid #211F1F;
border-left: 1px solid #3C3636;
border-radius: 4px;
}

и добавь его вот сюда
Код: выделить всё
.menu-list a {
text-decoration: none;
font-weight: 600;
color: #aaa;
padding-left: 16px;
}



щас проверю

Добавлено (22.01.2017, 18:55)
---------------------------------------------
waak, Только ховер кнопки увеличился,но в некоторых учатках кнока не работает.

Страна: (UA)
rekersil
 		Воскресенье, 22 Января 2017, 18:58 | Сообщение 7
Оффлайн
Проверенные
Сообщений:185
Награды: 1
« 13 »
Всё что изменилось.
Прикрепления: 5343490.png (34.4 Kb)
Страна: (UA)
waak
 		Воскресенье, 22 Января 2017, 19:09 | Сообщение 8
Оффлайн
Проверенные
Сообщений:588
Награды: 14
« 166 »
Цитата rekersil ()
Всё что изменилось.

кинь весь код я сделаю тебе сам
Страна: (RU)
waak
 		Воскресенье, 22 Января 2017, 19:17 | Сообщение 9
Оффлайн
Проверенные
Сообщений:588
Награды: 14
« 166 »
rekersil, прошу прошение затупил не заметил что ты весь код добавил сейчас поправлю и вышлю
Страна: (RU)
waak
 		Воскресенье, 22 Января 2017, 19:23 | Сообщение 10
Оффлайн
Проверенные
Сообщений:588
Награды: 14
« 166 »
Вот тебе код и не нужно дублировать одинаковые значения для ховера вобщем я убрал всё лишнее

Код

<style type="text/css">
.menu{
height: 20px;
width: 210px;
text-align: center;
}

.menu-list {
list-style-type: none;
padding: 0 5px;
}

.menu-list li {
text-align: left;
background-color: #2b2b2b;
margin-bottom: 10px;
border-top: 1px solid #504848;
border-right: 1px solid #443E3E;
border-bottom: 1px solid #211F1F;
border-left: 1px solid #3C3636;
border-radius: 4px;
}
.menu-list a {
display: block;
text-decoration: none;
font-weight: 600;
padding: 5px;
color: #aaa;
padding-left: 16px;
}
.menu-list li:hover{
background: #4e4e4e;

}
.menu-list a:hover {
color: #e0e0e0;
}
</style>
<div class="menu">
<ul class="menu-list">
<li>
<a href="">Биографии</a>
</li>
<li>
<a href="">Боевики</a>
</li>
<li>
<a href="">Вестерны</a>
</li>
<li>
<a href="">Военные</a>
</li>
<li>
<a href="">Детективы</a>
</li>
<li>
<a href="">Документальные</a>
</li>
<li>
<a href="">Драмы</a>
</li>
<li>
<a href="">Исторические</a>
</li>
<li>
<a href="">Комедии</a>
</li>
<li>
<a href="">Криминал</a>
</li>
<li>
<a href="">Мелодрамы</a>
</li>
<li>
<a href="">Мультфильмы</a>
</li>
<li>
<a href="">Мюзиклы</a>
</li>
<li>
<a href="">Отечественные</a>
</li>
<li>
<a href="">Приключения</a>
</li>
<li>
<a href="">Семейные</a>
</li>
<li>
<a href="">Спортивные</a>
</li>
<li>
<a href="">Триллеры</a>
</li>
<li>
<a href="">Ужасы</a>
</li>
<li>
<a href="">Фантастика</a>
</li>
<li>
<a href="">Фэнтези</a>
</li>

</ul>

</div>
Страна: (RU)
Angerfist
 		Воскресенье, 22 Января 2017, 19:24 | Сообщение 11
Оффлайн
Vip
Сообщений:767
Награды: 21
« 253 »
Извиняюсь что влез
мне кажется добавить надо display:block к

Код
.menu-list li
No regrets

Сообщение отредактировал
Angerfist - Воскресенье, 22 Января 2017, 19:26
Страна: (RU)
Angerfist
 		Воскресенье, 22 Января 2017, 19:27 | Сообщение 12
Оффлайн
Vip
Сообщений:767
Награды: 21
« 253 »
всё вижу добавил, ссори)
No regrets
Страна: (RU)
rekersil
 		Воскресенье, 22 Января 2017, 19:30 | Сообщение 13
Оффлайн
Проверенные
Сообщений:185
Награды: 1
« 13 »
Всё работает.Спасибо
Страна: (UA)
Форум » Веб-разработка » Вопросы про uCoz » Создать кнопки для своего сайта (Нужна помощь с кнопками)
  • Страница 1 из 1
  • 1
Поиск: