Tabs in line

I was able to achieve this one my site by using some CSS code applied to the .rotor-tab class

.rotor-tab
{
float:left;
line-height:15px;
padding:0 5px;
}

You might need to alter the padding and/or line-height a bit for your own spacing needs, but that seemed to do the trick for me site, where the tabs sit right below the Rotor content lined up horizontally in one row.

If you do not have place or do not want to display the tab text again, then you can use colored boxes for navigation. I made this css on my site:

.rotor-tab {
float:left;
line-height:15px;
padding: 0 0 0 0;
width:10px;
height:10px;
background: red;
color: red;
overflow:hidden;
margin: 10px 10px 10px 0px;
}

.rotor-tab.selected {
color: green;
background: green;
}

The attachment is show the result! The live rotor is here: http://www.tavolimentes.hu

Schmidt Attila -- how did you get the text to display over your images in your rotor? I don't mean the CSS, but to get the actual text into the html?

It looks like you have text hovering over the image that isn't the tabs.

I can get my tabs to display for my rotor, but whenever I try to add text or description to an image in the rotor node, that text won't display, not even in the html output.

I have the rotor as a View's block inside a Panel page.

Any ideas?