CSS:Как да направя един клас който да ми служи за разделител

[R3sp3k7]

Здравейте, кодирам един дизайн и сега съм стигнал до менюто.Да ви се похваля че досега няма размествания при различните браузери надявам се така и да продължи Сега искам да направя като направя някой текст в менюто който води примерно до index.php след този текст да има една черта | и другия нещо такова:
Начало | Уроци | Друго и така нататък.Пробвах да направя клас който е с position: relative; но нестава.Не съм много запознат с css затова реших да ви попитам
Ето кода който съм написал до сега на текста и на разделитела.

#tekst {
margin-top: 5px;
margin-left: 5px;
}
#divider {
position: relative;
background: url("img/divider.jpg") no-repeat;
width: 2px;
height: 32px;
}

Ако може някой да ми помогне ще съм много благодарен.
Ето и линк към сайта http://77.77.59.48/gamesite

 

[FestarBG]

Не ги прави

<div id="tekst-parvo">add</div><div id="divider"><div id="tekst">dasd</div>

a нещо от рода на

<div id="menu">
<a href="#">asd</a>
<a href="#">asd</a>
<a href="#">asd</a>
<a href="#">asd</a>
<a href="#" style="border: none !important;">asd</a>
</div>

И после в css-a:
#menu a {border-right: 2px solid grey;}

Ако искаш да си остане с разделител картинка просто след <a href="#">asd</a> добави по едно <img src="razdelitel.png" alt="razdelitel"></img>.

Разгледай и някой css-based менюта,където разделителя ще ти е background и ползвай ul и li.

 

[emagi]

<!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" />
<title>Untitled Document</title>
<style type="text/css">
#main {
width:1000px;
height:30px;
}
.emagi {
width:190px;
height:30px;
border-right:solid 2px red;
float:left;
text-align:center;
}
.emagi1 {
width:190px;
height:30px;
float:left;
border-left:solid 2px red;
border-right:solid 2px red;
text-align:center;
}
</style>
</head>

<body>
<div id="main">
<div class="emagi1">
emagi
</div>
<div class="emagi">
emagi
</div>
<div class="emagi">
emagi
</div>
<div class="emagi">
emagi
</div>
<div class="emagi">
emagi
</div>
</div>
</body>
</html>

По принцип се прави чрез списъци!Сега го напатках набързо това, сега ще потърся и друг вариант

 

[R3sp3k7]

Добре и двата начина работят, обаче и двамата споменавате че се правят с списаци.Ако може да ми кажете как да направя хоризонтално меню с <ul>?
Защото ще ме улесни и ще е доста по лесно да се направи разделител

 

[emagi]

<!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" />
<title>Untitled Document</title>
<style type="text/css">
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li
{
float: left;
margin: 0 0.15em;
}

#nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
#nav-menu li a
{
float: none
}
#nav-menu
{
width:800px;
} 
</style>
</head>

<body>
<div id="nav-menu">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">emagi</a></li>
<li><a href="#">emagi</a></li>
</ul>
</div>
</body>
</html>

 

[R3sp3k7]

Чудих се на кой да дам точката, но я дадох на @emagi защото той ми показа как ще стане и с <ul>.Благодаря и на двамата :?: