Как да направя това меню хоризонтално

P

PHP_Masters

Registered
ето цсс-а на менюто, сега е вертикално а искам да е хоризонтално как ще стане това

Код: 
#menu {
width: 48px;
outline:none;	
border-color: #D76100;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu li a {
 outline:none;	
height: 32px;
height: 39px;
text-decoration: none;
}

#menu li a:link, #menu li a:visited {
outline:none;	
color: #9E3C02;
display: block;
background: url(menu21.gif);
padding: 8px 0 0 30px;
}

#menu li a:hover {
 outline:none;	
color: #fff;
background: url(menu2.gif) 0 -48px;
padding: 8px 0 0 30px;
}

#menu li a:active {
 outline:none;	
color: #fff;
background: url(menu2.gif) 0 -48px;
padding: 8px 0 0 30px;
 
ама то на мен проблема ми е че аз за всяка картинка съм направил е такъв код само дето линковете и размерите са различни и стоят 1 под друг
 
Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

>

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en" lang="en">
<head>
<title>Menu Design 4</title>
<style type="text/css">

body {
font-family: Verdana, Arial, Helvetica,

sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

/* =-=-=-=-=-=-=-[Menu 21]-=-=-=-=-=-=-=- */

#menu {
width: 48px;
outline:none;	
border-color: #D76100;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu li a {
 outline:none;	
height: 32px;
height: 39px;
text-decoration: none;
}

#menu li a:link, #menu li a:visited {
outline:none;	
color: #9E3C02;
display: block;
background: url(menu21.gif);
padding: 8px 0 0 30px;
}

#menu li a:hover {
 outline:none;	
color: #fff;
background: url(menu2.gif) 0 -48px;
padding: 8px 0 0 30px;
}

#menu li a:active {
 outline:none;	
color: #fff;
background: url(menu2.gif) 0 -48px;
padding: 8px 0 0 30px;
}

/* =-=-=-=-=-=-=-[Menu Four]-=-=-=-=-=-=-=- */
#menu4 {
width: 180px;
	 outline:none;
border-color: #D76100;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu4 li a {

outline:none;
height: 32px;
height: 39px;
text-decoration: none;
}

#menu4 li a:link, #menu4 li a:visited {

	 outline:none;
color: #9E3C02;
display: block;
background: url(menu.gif);
padding: 8px 0 0 30px;
}


#menu4 li a:hover {

 outline:none;
color: #fff;
background: url(menu.gif) 0 -48px;
padding: 8px 0 0 30px;
}

#menu4 li a:active {

 outline:none;
color: #fff;
background: url(menu.gif) 0 -48px;
padding: 8px 0 0 30px;
}

</style>
</head>

<body>
<tr><div id="menu">
<ul>
<li><a href="#1" title="Home"></li>
</ul>
</div>
<div id="menu4">
<ul>
<li><a href="#2" title="My places"></li>
</ul>
</div>
</body>
</html>
 
мако грешно си подхванал структурата на хтмл-а
Ето ти едно демо:
Код: 
<!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{
			padding:0; margin:0;
			list-style-type:none;
		}
		#menu li{
			padding:0 6px 0 0;
			float:left;
		}
		
		#menu a{
			display:block;
			width:100px;
			height:80px;
			border: solid 1px black;
		}
		#menu a:hover{
			border: solid 1px red;
		}
		.clear{
			clear:both; line-height:0px; font-size:0px;
		}
	</style>

</head>
	<body>
		<ul id="menu">
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
		</ul>
		<div class="clear"></div>
	</body>
</html>
 
ако искаш да направиш някое <а> по-голямо, просто добаваш му клас и променяш само него:
Код: 
#menu a.different{
  width:300px;
}


<a class="different" href="#"></a>
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе