CSS tab widget text

Question

Hi,

I've seen a "feedback tab" on this page and many others (e.g. UserVoice). I would like to use something similar on my website but in my case the tab won't be clickable. The only purpose of the tab is to keep the website name on-screen at all times in an unobtrusive fashion.

Does anyone know of any good resources that explain the CSS necessary to make a widget whose scrolling behaviour and positioning is similar to this one.

Update

I know I'll need to use fixed positioning, but the part I'm struggling with is how to change the text orientation. Ideally, I'd like to be able to specify the text in the HTML, rather than use an image.

I tried to reverse-engineer how the widget was created on the page above, I discovered that if you disable the property

background-image:url(http://getsatisfaction.com/images/feedback_trans_tab.png);

the text disappears. I assumed the "Feedback" text is part of the feedback_trans_tab.png image, but it's not! Can anyone explain how the "Feedback" text is generated and orientated?

Thanks, Don

Answer 1

It's very simple. First, just create a <div> with your image, text, or whatever in it. Make sure that you define an id attribute for your div:

<div id="my_div">The Text</div>

Then, to keep it in place, here's the CSS you can use:

#my_div {
    position: fixed;
    top: 50px;
    right: 0px;
}

This would put your div on the right-hand size of the page about 50 pixels down from the top.

Answer 2

CSS3 supports rotating text using the writing-mode property:

writing-mode:tb-rl;

More here

IE also offers some filters to do the same pre css3.