нуждающийся в помощи, создающий вертикальное меню спрайта изображения - PullRequest
Новая
       31

нуждающийся в помощи, создающий вертикальное меню спрайта изображения

0 голосов
/ 22 октября 2011

У меня вопрос о создании вертикального меню спрайтов изображений.

вот мой 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>

вот изображение меню, которое я создал в фотошопе, и как оно выглядит на моем сайте: http://i1112.photobucket.com/albums/k487/Daan_Brittan/ScreenShot2011-10-22at145759.png

Я новичокдля создания веб-страниц, поэтому я нашел этот сайт, чтобы объяснить мне, как заставить работать спрайт, но что-то, что я пробую, не работает.(я нашел больше сайтов, но не могу опубликовать их здесь, потому что у меня недостаточно очков) 1. http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites

мой 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 Ответ

1 голос
/ 22 октября 2011

Похоже, вы не объявили свойство 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.
}
...