#css #menu #position #sprite
#css #меню #положение #спрайт
Вопрос:
У меня вопрос о создании вертикального меню спрайтов изображения.
Вот мой HTML:
<div id="menu">
<ul id="menulijst">
<li id="index"> <a href="index.html"> home </a> </li>
<li id="auteur"> <a href="auteur.html" > de auteur </a> </li>
<li id="recensies"> <a href="recensies.html"> recensies </a> </li>
<li id="siberie"> <a href="siberie.html"> siberie </a> </li>
</ul>
</div>
Вот изображение меню, которое я создал в Photoshop, и как оно выглядит на моем сайте:
Я новичок в создании веб-страниц, поэтому я нашел этот сайт, чтобы объяснить мне, как заставить спрайт работать, но почему-то, что бы я ни пробовал, это не так. (Я нашел больше сайтов, но я не могу опубликовать их здесь, потому что у меня недостаточно очков)
Мой CSS:
@charset "UTF-8";
/* CSS Document */
*
{
margin: 0;
padding: 0;
}
body
{
color: rgb(0,0,0);
background-color: #ffffff;
line-height: 1.6;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
div#wrapper
{
width: 790px;
background-color: #cccccc;
margin: auto;
}
div#header
{
padding: 10px 20px;
background-color: #333333;
text-align: center;
color: #ffffff;
}
div#menu
{
width: 160px;
float: left;
height: 335px;
border: 1px rgb(153,153,153);
}
#menulijst
{
float: left;
width: 160px;
height: 335px;
background-image:url(../isweb/menuknoppen.png);
position: relative;
}
#menulijst li
{
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#menulijst li, #menulijst a
{
height: 200px;
display: block;
}
#index {left: 0; width: -95px;}
#auteur {left: 0; width: -75px;}
#recensies {left: 0; width: -110px;}
#siberie {left: 0; width: -117px;}
div#menu ul li
{
margin: 10px;
}
div#content
{
width: 590px;
padding: 10px 20px;
background-color: #999999;
float: right;
}
div#footer
{
clear: both;
padding: 10px 20px;
background-color: #333333;
text-align: center;
color: #ffffff;
}
div#footer ul li
{
display: inline;
margin: 10px;
}
h1
{
font-size: 16px;
text-transform: uppercase;
}
a
{
color: rgb(204,204,204);
text-transform: uppercase;
text-decoration: none;
}
p
{
margin: 10px 0px 0px 0px;
}
.zijwolf
{
float: left;
padding: 15px 15px 5px 0px;
}
li
{
list-style: none;
}
Я создал меню на основе меню в первой ссылке, но со своей изюминкой (вертикальное, другого цвета и т.д.)
Я поместил более темный цвет за более светлый цвет для эффекта наведения, описанного в первой ссылке, но, похоже, я не могу расположить ссылки за правым полем.
Ответ №1:
Похоже, вы не объявили свойство on hover и положение фона.
Попробуйте добавить и настроить.
ul#menulist li a.index {
width: //add width px;
background-position: 0 0;
}
ul#menulist li a.index:hover {
background-position: -50px 0; //move the pixel position according to your sprite.
}