хоризонтално меню

може ли някои да ми помогне!
правя си сайт, но немога да разбера защо немога да позиционирам менюто си както искам.

искам хоризонтално меню:
link1 link2 link3 link4
като на бутоните им задавам как да изглеждат (с img) и името им. това което се получава е вертикално меню:
link1
link2
link3

и немога да го направя на един ред. кода е следният:


<div id="buttons">
<a href="home.php" target="real">Home</a>
<a href="products.php" target="real">Products</a>
<a href="promotion.php" target="real">Promotion</a>
<a href="about us.php" target="real">About us</a>
<a href="contacts.php" target="real">Contacts</a>
<a href="create_account.php" target="real">Acount</a>
</div>

a стилът е :

#buttons { width:102px;
background-color: #bfbfbf;
padding-top: 5px;
padding-left: 5px;
}

#buttons a {

color: #ffffff;
background:url(images/btn_black.gif) no-repeat ;
height:25px;
display:block;
padding-left:15px;
margin:0px;
font-size:16px;
font-family: ;
text-decoration:none;
line-height:25px;

}
#buttons a:hover {
background:url(images/btn_olive.gif) no-repeat ;
}


ако можете да ми помогнете, кацете ми каде греша!
благодаря!

Давам ти частична помощ .. Мързи ме да ти гледам кода в момента. Това може би ще реши част от проблемите ..

#buttons { 

	width:102px; 

	background-color: #bfbfbf; 

	padding-top: 5px; 

	padding-left: 5px; 

	white-space: nowrap;

}

Edit: разкарай display:block; от другия селектор.

БОКОР, Благодаря,
между другото и това пробвах, но май не на точното място

Една идея и от мен:
Аз винаги си правя менютата с <ul>. Много по-гъвкав вариант при минимални усилия - всичко се манипулира с елементарен CSS в последствие.

Ето един пример:

<ul id="ulMenu">
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
</ul>

#ulMenu {border:0px; margin:0px; padding:0px;list-style: none;}
#ulMenu li {float:left; margin-right:4px;}
#ulMenu li a {display:block; width:100px; .....}
#ulMenu li a:hover {display:block; width:100px; .....}

За дясно-подредени менюта:
#ulMenu {border:0px; margin:0px; padding:0px;list-style: none;float:right}
#ulMenu li {float:right; margin-left:4px;}
#ulMenu li a {display:block; width:100px; .....}
#ulMenu li a:hover {display:block; width:100px; .....}

За вертикалните няма защо да обяснявам.

Можеш лесно да модифицираш CSS-а, така че дори да се показват падащи менюта, както тук:
[линк]