Страница 1 из 11
Форум про uCoz » Создание сайтов uCoz » Вопросы по uCoz » Создать кнопки для своего сайта (Нужна помощь с кнопками)
Создать кнопки для своего сайта
rekersil
Дата: Воскресенье, 22.01.2017, 17:28 | Сообщение # 1
Проверенные
Сообщений:71
Награды: 0


Делаю кнопки для своего сайта 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(34Kb) · 3245297.png(34Kb)


Сообщение отредактировал rekersil - Воскресенье, 22.01.2017, 17:28
waak
Дата: Воскресенье, 22.01.2017, 17:39 | Сообщение # 2
Vip
Сообщений:179
Награды: 4


Код
.menu-list a {
text-decoration: none;
font-weight: 600;
color: #aaa;
padding-left: 16px;
}


Тут нужно добавить ешё строчку display: block;


Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
rekersil
Дата: Воскресенье, 22.01.2017, 17:51 | Сообщение # 3
Проверенные
Сообщений:71
Награды: 0


Цитата waak ()
Тут нужно добавить ешё строчку display: block;

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

Спасибо вам большое)
rekersil
Дата: Воскресенье, 22.01.2017, 18:27 | Сообщение # 4
Проверенные
Сообщений:71
Награды: 0


Цитата waak ()
Тут нужно добавить ешё строчку display: block;

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

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

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

Прикрепления: 3654887.png(35Kb) · 9188594.png(35Kb)
waak
Дата: Воскресенье, 22.01.2017, 18:47 | Сообщение # 5
Vip
Сообщений:179
Награды: 4


Цитата 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;
}


Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545


Сообщение отредактировал waak - Воскресенье, 22.01.2017, 18:48
rekersil
Дата: Воскресенье, 22.01.2017, 18:55 | Сообщение # 6
Проверенные
Сообщений:71
Награды: 0


Цитата 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, Только ховер кнопки увеличился,но в некоторых учатках кнока не работает.

rekersil
Дата: Воскресенье, 22.01.2017, 18:58 | Сообщение # 7
Проверенные
Сообщений:71
Награды: 0


Всё что изменилось.

Прикрепления: 5343490.png(34Kb)
waak
Дата: Воскресенье, 22.01.2017, 19:09 | Сообщение # 8
Vip
Сообщений:179
Награды: 4


Цитата rekersil ()
Всё что изменилось.

кинь весь код я сделаю тебе сам


Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
waak
Дата: Воскресенье, 22.01.2017, 19:17 | Сообщение # 9
Vip
Сообщений:179
Награды: 4


rekersil, прошу прошение затупил не заметил что ты весь код добавил сейчас поправлю и вышлю

Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
waak
Дата: Воскресенье, 22.01.2017, 19:23 | Сообщение # 10
Vip
Сообщений:179
Награды: 4


Вот тебе код и не нужно дублировать одинаковые значения для ховера вобщем я убрал всё лишнее

Код

<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>


Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
Angerfist
Дата: Воскресенье, 22.01.2017, 19:24 | Сообщение # 11
Vip
Сообщений:747
Награды: 20


Извиняюсь что влез
мне кажется добавить надо display:block к

Код
.menu-list li


No regrets

Сообщение отредактировал Angerfist - Воскресенье, 22.01.2017, 19:26
Angerfist
Дата: Воскресенье, 22.01.2017, 19:27 | Сообщение # 12
Vip
Сообщений:747
Награды: 20


всё вижу добавил, ссори)

No regrets
rekersil
Дата: Воскресенье, 22.01.2017, 19:30 | Сообщение # 13
Проверенные
Сообщений:71
Награды: 0


Всё работает.Спасибо
Форум про uCoz » Создание сайтов uCoz » Вопросы по uCoz » Создать кнопки для своего сайта (Нужна помощь с кнопками)
Страница 1 из 11
Поиск: