CSS меню с картинка

Първо си сваляте тази картинка или си правите ваша с Photoshop.

Ето гo самия код :

<html>
<head><title>Menu</title>
<style type="text/css">
.menu {
width:120px; /*задаваме широчина*/
height:60px; /*задаваме височина*/
padding:3px 40px; /*задаваме вътрешните отстъпи*/
color:#000; /*цвят на текста в нормално състояние*/
font-weight:bold; /*форматиране на текста,в случая текста ще бъде удебелен*/
letter-spacing:0.5px; /*разстояние между буквите*/
background:#333 url('menu.jpg') 0 0px no-repeat; /*задаваме фон на бутона в нормано състояние*/
border:1px solid #000; /*задаваме рамка на бутона*/
text-decoration:none; /* задаваме да няма подчертаване на линковете*/
}

.menu:hover {
color:#FFF; /*цвят на текста когато сме посочили бутона*/
background-position: 0 -32px; /*посочваме стойностите откъде докъде да използва картинката за фон*/
}

</style>
</head>

<body>
<a href="#" class="menu">Link</a><br><br>
<a href="#" class="menu">Link</a><br><br>
<a href="#" class="menu">Link</a><br><br>
<a href="#" class="menu">Link</a><br><br>
<a href="#" class="menu">Link</a><br><br>
<a href="#" class="menu">Link</a>
</body></html>








/ Трябва да сте регистриран за да напишете коментар /
От: gryp
13:19 05-11-2009
не работи под IE
От: vencisf
9:53 23-11-2009
Браво рабити под IE
От: thalia
20:57 10-12-2009
Изпробвах менюто. Стана само ако всички линове са в по 4 букви. Какво да правя, ако са по-дълги.
От: Aleksander
15:13 27-02-2010
Ами единия вариант за да оправите проблема с буквите е
background:#333 url('menu.jpg') 0 0px repeat-x; /*задаваме фон на бутона в нормано състояние*/
Задавате да се повтаря картинката по x-оста
От: Aleksander
15:17 27-02-2010
Пък и си има коментар
background-position: 0 -32px; /*посочваме стойностите откъде докъде да използва картинката за фон*/
От: misho
10:08 02-09-2010
Благодаря много за урока! ;)
От: batmanabg
13:16 22-07-2011
Полезен урок.
От: batmanabg
13:17 22-07-2011
Полезен урок.
1