Меню с една картинка

[3o6k0]

Kaк мога да направя меню само с една цяла картинка на менюто + rollовер ?
Пр:Тук

 

[akolevutd]

Правиш една картинка 400 на 400 примерно. Горните ти 200 пиксела са a: а долните 200 са ти hover:

a:link, a:visited { 
display: block; 
width: 400px; 
height: 200px;
background: url(img.gif) no-repeat left top;}

a:hover {
backgroun: url(img.gif) no-repeat left bottom;}

 

[camerb]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
<style type="text/css">
* {
border:medium none;
list-style-image:none;
list-style-positionutside;
list-style-type:none;
margin:0px;
padding:0px;
}

#menu {
background:transparent url(img/kartinka.jpg) no-repeat left top;
height: 166px; width: 275px; margin: 200px auto;
}

#menu li {
float:left;
height: 166px;
}

#menu li a {
background-image:url(img/menu.jpg);
display: block;
height: 166px;
}

#menu li a span {
display:none;
}

a#home {
width: 68px;
}

a#home:hover {
background-position: 0px -166px;
}

a#about {
background-position: -68px 0px;
width: 68px;
}

a#about:hover {
background-position: -68px -166px;
width: 68px;
}

a#projects {
background-position: -136px 0px;
width: 60px;
}

a#projects:hover {
background-position: -136px -166px;
width: 60px;
}

a#mebel {
background-position: -196px 0px;
width: 40px;
}

a#mebel:hover {
background-position: -196px -166px;
width: 40px;
}

a#contacts {
background-position: -235px 0px;
width: 36px;
}

a#contacts:hover {
background-position: -235px -166px;
width: 36px;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<a id="home" href="#">
<span>начало</span>
</a>
</li>
<li>
<a id="about" href="#">
<span>за нас</span>
</a>
</li>
<li>
<a id="projects" href="#">
<span>проекти</span>
</a>
</li>
<li>
<a id="mebel" href="#">
<span>мебел</span>
</a>
</li>
<li>
<a id="contacts" href="#">
<span>контакти</span>
</a>
</li>
</ul>
</body>
</html>

 

[3o6k0]

@akolevutd: A ако са няколко бутона ?
@camerb:Знам как мога да си изкарам кода на една страница :? ...

A и за да не отварям нова тема: За какво служи display:block ?

 

[camerb]

@akolevutd: A ако са няколко бутона ?
@camerb:Знам как мога да си изкарам кода на една страница :? ...

A и за да не отварям нова тема: За какво служи display:block ?

 <style type="text/css">
* {
border:medium none;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px;
padding:0px;
}

#menu {
background:transparent url(img/kartinka.jpg) no-repeat left top;
height: 166px; width: 275px; margin: 200px auto;
}

#menu li {
float:left;
height: 166px;
}

#menu li a {
background-image:url(img/menu.jpg);
display: block;
height: 166px;
}

#menu li a span {
display:none;
}

a#home {
width: 68px;
}

a#home:hover {
background-position: 0px -166px;
}

a#about {
background-position: -68px 0px;
width: 68px;
}

a#about:hover {
background-position: -68px -166px;
width: 68px;
}

a#projects {
background-position: -136px 0px;
width: 60px;
}

a#projects:hover {
background-position: -136px -166px;
width: 60px;
}

a#mebel {
background-position: -196px 0px;
width: 40px;
}

a#mebel:hover {
background-position: -196px -166px;
width: 40px;
}

a#contacts {
background-position: -235px 0px;
width: 36px;
}

a#contacts:hover {
background-position: -235px -166px;
width: 36px;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<a id="home" href="#">
<span>начало</span>
</a>
</li>
<li>
<a id="about" href="#">
<span>за нас</span>
</a>
</li>
<li>
<a id="projects" href="#">
<span>проекти</span>
</a>
</li>
<li>
<a id="mebel" href="#">
<span>мебел</span>
</a>
</li>
<li>
<a id="contacts" href="#">
<span>контакти</span>
</a>
</li>
</ul>

Поставяш кадето искаш да е менюто и настройваш го и ENJOY!