Вопросы по верстке (2)

Новые сообщения · Правила форума · Поиск

Оставить отзыв · Пожаловаться · RSS

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

Вопросы по верстке (2) (Тема : Меню сайта)

Kosmo_m Оффлайн

Проверенный

Дата: Четверг, 2015-08-20, 18:44 | Сообщение # 1

Есть вот такое меню (p.s: спрайты потом поправлю) :

Хочу сделать вот такой hover эффект :

Код меню :

Код

<div class="sb_nav">
<ul>
<li><a href="#"><i></i>Главная</a></li>
<li><a href="#"><i style="background-position: -16px 0"></i>Каталог файлов</a></li>
<li><a href="#"><i style="background-position: -31px 0"></i>Форум</a></li>
<li><a href="#"><i style="background-position: -48px 0"></i>Фотоальбом</a></li>
<li><a href="#"><i style="background-position: -64px 0"></i>Шаблоны</a></li>
<li><a href="#"><i style="background-position: -80px 0"></i>Гостевая</a></li>
</ul>
</div>

Прикрепления: 8460335.png (16.8 Kb) · 4070449.png (8.3 Kb)

Профиль

Kosmo_m Оффлайн

Проверенный

Дата: Четверг, 2015-08-20, 19:21 | Сообщение # 2

прописал hover через background , но теперь это выглядит вот так :

Код

.sb_nav ul li a:hover {
    background: url("../images/hover.png") no-repeat;


    width:322px;
    color:#72cc29;
    display:block;


}

Решил :

Код

.sb_nav ul li a {
  color:#000000;
  padding-left:20px;
  width:322px;
  display:block;

Прикрепления: 2771768.png (13.6 Kb)

Сообщение отредактировал Kosmo_m - Четверг, 2015-08-20, 19:29

Профиль

CbIPoK Оффлайн

Проверенный

Дата: Четверг, 2015-08-20, 19:31 | Сообщение # 3

Попробуйте так

Код

.sb_nav ul li a:hover {
    background: #DADADA;
    border-left: 5px solid #00CD00;
    width:317px;
    color:#00CD00;
    display:block;
}

Профиль

Kosmo_m Оффлайн

Проверенный

Дата: Четверг, 2015-08-20, 19:58 | Сообщение # 4

Не могу найти проблему

HTML :

Код

<!DOCTYPE html>
<html>
<head>
<title> TITLE </title>
<meta charset="windows-1251">
<link href="css/main.css"  rel="stylesheet" type="text/css">
</head>
<body>
<div id="page_align">
<div id="header">
<div id="header_cont">
<a href="#"><img src="images/logo.png"  style="" alt="Tonna.at.ua - Все для uCoz" width="167" height="33" ></a>

</div>
</div>

<div id="sidebar">
<div class="header_profile">
<div style="padding-left:20px; padding-top:10px">
<div class="f_left"><img src="images/avatar.gif" width="62px" height="62px" class="hp_photo"></div>
<div class="profile_mini">
<ul>

<li><img src="images/profile.png" style="padding-right:5px" width="16px" height="16px" ><a href="#">Мой профиль </a></li>
<li><img src="images/ls.png" style="padding-right:5px" width="16px" height="16px" ><a href="#">Личные сообщения (1)</a></li>
</ul>
</div>
</div>
</div>
<div class="search">
<form action="/search/">
<input class="search_submit" type="image" src="images/search.png">
<input class="search_text" name="q" type="text" placeholder="Поиск по сайту">
</form>
</div>

<div class="sb_nav">

<ul>

<li><a href="#"><i></i>Главная</a></li>
<li><a href="#"><i  style="background-position: -16px 0"></i>Каталог файлов</a></li>
<li><a href="#"><i style="background-position: -31px 0"></i>Форум</a></li>
<li><a href="#"><i style="background-position: -48px 0"></i>Фотоальбом</a></li>
<li><a href="#"><i style="background-position: -64px 0"></i>Шаблоны</a></li>
<li><a href="#"><i style="background-position: -80px 0"></i>Гостевая</a></li>

</ul>
</div>
</div>
</div>
</div>
<div id="content">
<div id="c_left f_left">

<div class="c_buttom">Кнопка</div>

</div>
</div>
<div class="clr"></div>
</div>
</body>
</html>

Сообщение отредактировал Kosmo_m - Четверг, 2015-08-20, 19:59

Профиль

brabus Оффлайн