Hi!

I'm new here, but I can't find answer to my problem.

In tutorial to do my theme in SS, they've this code for navi:

<ul id="Menu1">
<% control Menu(1) %>
<li><a href="#">$MenuTitle</a></li>
<% end_control %>
</ul>

(It's like a while, which generate same code...)

and I have in my html code somethink like this:

<div id="button01"><a href="#" title="xyz"></a></div>
<div class="separator"></div>
<div id="button02"><a href="#" title="xyz"></a></div>
<div class="separator"></div>
<div id="button03"><a href="#" title="xyz"></a></div>
<div class="separator"></div>
<div id="button04"><a href="#" title="xyz"></a></div>

It's image navigator without text labels and each of them are unique (button01, ...02, ..03)

Can someone help me with this?

You can use any of the properties of the Page object to help you with this. I like to use the $URLSegment and as long as people don't change the URL then it works fine

<div class="nav-$URLSegment">...

Will generate nav-home, nav-contact-us etc which you can style.

Thanks a lot!! :-)

btw.:
in my code, I have <div> for separator | ... this is not possible to do somethink like that:

<button>
<separator>
<button>
<separator>
<button>

(I don't want have separator in the end of nav.)

(and I'm sorry for my english.. :-/ )

Sure its possible. You can use <% if Last %> to skip the last one

<% if Last %><% else %><separator><% end_if %>

Oh... You're really good!

Thanks again :-)

Another more elegant option would be to handle the separator within CSS (without any unnecessary HTML markup).
SilveStripe comes with helpful template controls/variables allowing you tag items depending on the object’s position like for instance the $FirstLast control.

<ul>
    <% control Menu(1) %>
    <li class="$LinkingMode $FirstLast"><a href="$Link" title="$Title.XML page">$MenuTitle.XML</a></li>
    <% end_control %>
</ul>

You can assign in CSS a transparent image with a separator on one side for all menu items and remove it from the last one.

You might want to check the Build-In Page Controls.

For ease of navigation, accessibility, and expandability, I recommend against using image buttons the way you are if at all possible. You can create a single image background that you can use for all your buttons and set them as the background for the list items. Doing so will allow you to use the auto-generated menu that you replaced.

You can find a tutorial of what I'm talking about here:
http://www.alistapart.com/articles/slidingdoors/
(and to make it one image, simply use this tactic: http://www.alistapart.com/articles/sprites/)