Need Help with CSS - Thanks in advance, please come in and see!

[GakkuNoKwaidan]

Hello everyone!

I really need some help here, been trying to make it work for days now got really frustrated.

I am making this CSS controlled tab menu,
this is what I try to acheive

But with my poor knowlege of CSS, I can only got to this point

The tab will expand along with the text that goes inside it, and the arrow that's pointing down will stay in the middle of the tab.

Can anyone tell me what to do? I'm running out of ideas....


I did try some method that made it work, for a while, until I was doing other divs and come back, it's gone again...
What I've tried was to add one more <span> to the id "current", and make the arrow as the background image with property no-repeat bottom. I was able to make it happened but I don't even know at what point it was gone and I can't make it happen again. What I have done must not good so it might co***ict with other stuff.

Thanks very much for reading til the end!

[Wickham]

I managed to get the arrow showing under the Jason blue tab, but I haven't checked whether it will expand and leave the arrow in the middle if text is longer. Half way to the solution perhaps. (edit - it does work. Change Jason to Jason's motor and the tab expands leaving the arrow in the middle.)

#slidetabsmenu #current a {
float:left;
background:url(images/tabs/tab_slt_right.gif) no-repeat left top;
margin:0;
padding:0 0 0 1px;
}

#slidetabsmenu #current a span{
float:left;
display:block;
background:url(images/tabs/tab_slt_left.gif) no-repeat right top;
padding:8px 14px 15px 10px;
font-weight:bold;
color: white;
}

#slidetabsmenu #current span.selected {
background: url(images/tabs/tab_slt_arrow.gif) no-repeat top;
}

Note the images have swapped around and the last is span.selected