Преправяне на код

[Gamerz]

Как да си преправя кода така че ширината на бутоните в линковете на категориите да са еднакви а не да се определят от броя на символите?
Ето кода:

#menu {
	height:55px;
	line-height:52px;
	background:url(images/bg-menu.png) no-repeat;
	padding:0 10px;
	}

/* Menu */

#menu ul {
	list-style-type:none;
	}
#menu li {
	float:left;
	}
#menu li a {
color:#fff;
	background:url(images/bg-menu-hover.png) no-repeat center center;
	padding:0 15px;
	display:block;
	color:#000000;
	margin-right:1px;
	}
#menu li a:hover {
	color:#fff;
	
}


#menu li.active  {
	color:#fff;

}

 

[slideR]

#menu {
height:55px;
line-height:52px;
background:url(images/bg-menu.png) no-repeat;
padding:0 10px;
width: ?px;
}

 

[Gamerz]

bg-menu-hover.jpg това е изображението което е за бутоните.

 

[shterev]

#menu li a {
color:#fff;
background:url(images/bg-menu-hover.png) no-repeat center center;
padding:0 15px;
display:block;
color:#000000;
margin-right:1px;
display:block;
width:100px;
}

 

[Gamerz]

Как да направя различните бутони в менюто да са различни изображения? Опитах се ама нещо кода не ми се получи.

 

[shterev]

дай да видим какво си направил. Иначе правиш за всеки бутон различен клас и от цсс-а вече си слагаш различна картинка

 

[Gamerz]

/* Menu */

#menu ul {
	list-style-type:none;
	}
#menu li {
	float:left;
	}
#menu li a {
color:#fff;
	background:url(images/bg-menu-hover.png) no-repeat center center;
	padding:0 15px;
	display:block;
	color:#000000;
	margin-right:1px;
        display:block;
        width:119px;
	}
#menu li a {
color:#fff;
	background:url(images/bg-menu-hover2.png) no-repeat center center;
	padding:0 15px;
	display:block;
	color:#000000;
	margin-right:1px;
        display:block;
        width:119px;
	}
#menu li a:hover {
	color:#fff;
	
}


#menu li.active  {
	color:#fff;
	
}

 

[shterev]

#menu li a.menu_1 {

   background:url(images/различна_картинка.png) no-repeat center center;
   
   }
#menu li a.menu_1:hover {
   color:#ff0000;
} 

#menu li a.menu_2 {

   background:url(images/различна_картинка.png) no-repeat center center;
   
   }
#menu li a.menu_2:hover {
   color:#ff0000;
}

И така колкото бутона имаш, и в хтмл-то също да не забравиш да добавиш.

 

[Gamerz]

По-късно ще тествам и вероятно ще ти дам точка !

 

[Gamerz]

Нещо не ми се получава това.

Къде да го заместя?

/* Menu */

#menu ul {
	list-style-type:none;
	}
#menu li {
	float:left;
	}
#menu li a {
color:#fff;
	background:url(images/bg-menu-hover.png) no-repeat center center;
	padding:0 15px;
	display:block;
	color:#000000;
	margin-right:1px;
        display:block;
        width:119px;
	}
#menu li a:hover {
	color:#fff;
	
}


#menu li.active  {
	color:#fff;
	
}

Излизат ми само едно под друго линковете.

 

[shterev]

<!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=utf-8" />
	<style>
		#menu li{
			float:left;
		}
		#menu a{
			display:block;
			width:100px;
			height:20px;
			float:left;
			color:#ff0000;
		}
		#menu a.menu_1{
			background: url(../images/menu_1.png) no-repeat left top;
		}
		#menu a.menu_1:hover{
			background-position: left bottom;
		}
		#menu a.menu_2{
			background: url(../images/menu_2.png) no-repeat left top;
		}
		#menu a.menu_2:hover{
			background-position: left bottom;
		}
	</style>
</head>
	<body>
		<ul id="menu">
			<li><a class="menu_1" href="#">menu 1</a></li>
			<li><a class="menu_2" href="#">menu 1</a></li>
			<li><a class="menu_3" href="#">menu 1</a></li>
			<li><a class="menu_4" href="#">menu 1</a></li>
		</ul>
	</body>
</html>

Сега вече ако не си го разбрал не знам [/code]

 

[Gamerz]

Системата е е107 и като го добавя ми показва бяла страница.