Texte du widget de l'onglet CSS

Question

J'ai vu un "onglet de commentaires" sur this page et plusieurs autres (par exemple UserVoice). Je voudrais utiliser quelque chose de similaire sur mon site mais dans mon cas l'onglet ne sera pas cliquable. Le seul but de l'onglet est de garder le nom du site Web à l'écran en tout temps de manière discrète.

Est-ce que quelqu'un connaît de bonnes ressources qui expliquent le CSS nécessaire pour faire un widget dont le comportement de défilement et le positionnement est similaire à celui-ci.

Mise à jour

Je sais que je vais devoir utiliser le positionnement fixe, mais la partie que je me bats avec est de savoir comment changer l'orientation du texte. Idéalement, j'aimerais pouvoir spécifier le texte dans le HTML, plutôt que d'utiliser une image.

J'ai essayé de désosser comment le widget a été créé sur la page ci-dessus, j'ai découvert que si vous désactivez la propriété

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

le texte disparaît. J'ai supposé que le texte "Feedback" faisait partie de l'image feedback_trans_tab.png, mais ce n'est pas le cas! Quelqu'un peut-il expliquer comment le texte "Feedback" est généré et orienté?

Merci, Don

Answer 1

Il est très simple. Tout d'abord, créez simplement un <div> avec votre image, votre texte ou quoi que ce soit. Assurez-vous que vous définissez un attribut id pour votre div:

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

Ensuite, pour le maintenir en place, voici le CSS, vous pouvez utiliser:

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

Cela placerait votre div sur la droite taille de la main de la page d'environ 50 pixels vers le bas à partir du haut.

Answer 2

CSS3 soutient rotation du texte en utilisant la propriété writing-mode:

writing-mode:tb-rl; 

More here

IE offre également des filtres pour faire la même chose avant CSS3.