CSS选项卡小部件文本

时间:2009-09-07 20:52:21

标签: html css

我在this page和其他许多人(例如UserVoice)上看到了“反馈标签”。我想在我的网站上使用类似的东西,但在我的情况下,标签将无法点击。选项卡的唯一目的是始终以不引人注目的方式将网站名称保留在屏幕上。

有没有人知道有什么好的资源可以解释制作一个滚动行为和定位与此类似的小部件所需的CSS。

更新

我知道我需要使用固定定位,但我正在努力的部分是如何改变文字方向。理想情况下,我希望能够在HTML中指定文本,而不是使用图像。

我试图对上面页面上创建小部件的方式进行逆向工程,我发现如果禁用该属性

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

文字消失了。我假设“反馈”文本是feedback_trans_tab.png图像的一部分,但事实并非如此! 任何人都可以解释如何生成和定位“反馈”文本吗?

谢谢, 唐

2 个答案:

答案 0 :(得分:5)

这很简单。首先,只需创建一个<div>,其中包含您的图片,文字或其他内容。确保为div定义id属性:

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

然后,为了保持它,这里是你可以使用的CSS:

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

这会将你的div放在页面的右侧大小上方,距离顶部约50个像素。

答案 1 :(得分:1)

CSS3支持使用writing-mode属性旋转文本:

writing-mode:tb-rl;

More here

IE还提供了一些过滤器来执行相同的pre css3。