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


Делаю кнопки для своего сайта 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
Страна: (UA)
waak
Дата: Воскресенье, 22.01.2017, 17:39 | Сообщение # 2
Vip
Сообщений:283
Награды: 7


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


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


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


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

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

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


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

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

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

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

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


Цитата 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
Страна: (RU)
rekersil
Дата: Воскресенье, 22.01.2017, 18:55 | Сообщение # 6
Проверенные
Сообщений:186
Награды: 1


Цитата 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.01.2017, 18:58 | Сообщение # 7
Проверенные
Сообщений:186
Награды: 1


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

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


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

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


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


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

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


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

Код

<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
Страна: (RU)
Angerfist
Дата: Воскресенье, 22.01.2017, 19:24 | Сообщение # 11
Vip
Сообщений:761
Награды: 21


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

Код
.menu-list li


No regrets

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


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

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


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