 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / January 2005vartical tab? As it is in OS/2
I remember when I was in high school I saw a Screen shot in PC Magazine that shows OS/2 is using vertical tab rather than the normal tab commonly seen on Windows and GNome/KDE. That is the last time I saw vertical tab. That tab is very styled and pretty, on the right side. However I never used OS/2 so I don't even have a screen shot to show how it is. Recently I am working on a new web-application where I very much like to implement this effect. To let the text on the tab title flow top-to-bottom, we need to turn Latin alphabetic 90 degree, and for ideographs, we need to arrange them one below the other. I immediately think of using 'writing-mode' style but soon realized this is an IE-only feature, but my application is supposed to run on gecko browsers. Any suggestions on how to do it? I am very sure that I am not the first one on the earth that wants this effect, so there should be articles about it on the web, but STFW so far I didn't find yet. In case I found one such article I'll post URI on this group:) > I remember when I was in high school I saw a Screen shot in PC Magazine > that shows OS/2 is using vertical tab rather than the normal tab [quoted text clipped - 16 lines] > about it on the web, but STFW so far I didn't find yet. In case I found > one such article I'll post URI on this group:) Okay, here I find a picture that describes what effect I want: http://www.evsc.k12.in.us/teachers/high/bosse/schaffer/notebook.jpg I think the reason I didn't find an instruction on the web is I cannot describ this effect well enough in English and form keywords:( Drop me any hint? > I remember when I was in high school I saw a Screen shot in PC Magazine > that shows OS/2 is using vertical tab rather than the normal tab [quoted text clipped - 8 lines] > To let the text on the tab title flow top-to-bottom, we need to turn > Latin alphabetic 90 degree, Before Windows 95 came out, introducing the Task Bar and Start Menu, I bought a desktop replacement for Windows 3.1 that had vertically tabbed program groups, and I happened to like them. But I'm curious what percentage of users would find tabs difficult or a nuisance to read this way, with the labels rotated 90 degrees. [snip] > Before Windows 95 came out, introducing the Task Bar and Start Menu, I > bought a desktop replacement for Windows 3.1 that had vertically tabbed > program groups, and I happened to like them. But I'm curious what > percentage of users would find tabs difficult or a nuisance to read this > way, with the labels rotated 90 degrees. Oh if you like me living happily in China, you will find rotating 90 degrees is the 'correct' arrangement and we have been using it happily for 3000 years:) and the horizonal arrangement is something 'invented' by the western people :) > I remember when I was in high school I saw a Screen shot in PC Magazine > that shows OS/2 is using vertical tab rather than the normal tab [quoted text clipped - 5 lines] > I am working on a new web-application where I very much like to > implement this effect. Most browsers do not have any way in which to rotate text. You could hack around it by using an image, but I suggest you consider that consistancy is a virtue when it comes to UI design. While your application may look pretty, it will also look different - and that tends to worry users.  SignatureDavid Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/> Home is where the ~/.bashrc is >>I remember when I was in high school I saw a Screen shot in PC Magazine >>that shows OS/2 is using vertical tab rather than the normal tab [quoted text clipped - 7 lines] > > Most browsers do not have any way in which to rotate text. As I said, IE could, with 'writing-mode' style. This style is especially provided for Asian users. Unfortunately it's not standard. This happens to be the *only* part of IE that I like. >> Most browsers do not have any way in which to rotate text. > As I said, IE could <em> most </em> SignatureDavid Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/> Home is where the ~/.bashrc is >I remember when I was in high school I saw a Screen shot in PC Magazine >that shows OS/2 is using vertical tab rather than the normal tab [quoted text clipped - 13 lines] > >Any suggestions on how to do it? Pretty straightforward, you'll have to use images for the tabs with the text on it, mark them up as list items, float the list to the right (ideally you'd use a css table for non IE browsers), and specify a right margin on the content. The obvious drawbacks are that floating the menu causes the usual problems, the tab text cannot be enlarged in most browsers, and reading text that has been rotated 90 degrees is a bother. You can provide some assistance with the latter by specifying the tab text as title content on the images. SignatureSpartanicus >Pretty straightforward, you'll have to use images for the tabs with the >text on it, mark them up as list items, float the list to the right >(ideally you'd use a css table for non IE browsers), and specify a right >margin on the content. This may get you started: http://www.spartanicus.utvinternet.ie/test/vtabs.htm It needs a min-height alternative for IE, the regular trick to do that threw up a quirk in IE that I couldn't be bothered to fix. SignatureSpartanicus "Spartanicus" wrote in comp.infosystems.www.authoring.stylesheets: >>Pretty straightforward, you'll have to use images for the tabs with the >>text on it, mark them up as list items, float the list to the right [quoted text clipped - 3 lines] >This may get you started: >http://www.spartanicus.utvinternet.ie/test/vtabs.htm In Mozilla 1.7.5 on Win XP, nothing happens when I click on any of the tabs. SignatureStan Brown, Oak Road Systems, Tompkins County, New York, USA http://OakRoadSystems.com/ >>Pretty straightforward, you'll have to use images for the tabs with the >>text on it, mark them up as list items, float the list to the right [quoted text clipped - 6 lines] > It needs a min-height alternative for IE, the regular trick to do that > threw up a quirk in IE that I couldn't be bothered to fix. Oh I like it. It tastes sweet! And I am on mozilla 1.7.5 on Gentoo Linux, nothing happens if I click a tab. However I'll dig into the code and see how they made it, and I hope to create a gecko-clickable example and show-around on this list:) >> http://www.spartanicus.utvinternet.ie/test/vtabs.htm >> >nothing happens if I click a tab Duh, the links link to the page itself (<a href="#">), it's a mock-up. SignatureSpartanicus > I remember when I was in high school I saw a Screen shot in PC Magazine > that shows OS/2 is using vertical tab rather than the normal tab [quoted text clipped - 16 lines] > about it on the web, but STFW so far I didn't find yet. In case I found > one such article I'll post URI on this group:) http://www.stunicholls.myby.co.uk/menu/book.html and http://www.stunicholls.myby.co.uk/book/index.html SignatureGus >> I remember when I was in high school I saw a Screen shot in PC >> Magazine that shows OS/2 is using vertical tab rather than the normal [quoted text clipped - 20 lines] > and > http://www.stunicholls.myby.co.uk/book/index.html This is the greatest one I even see! Zhang Weiwu a écrit : | > http://www.stunicholls.myby.co.uk/menu/book.html | > and | > http://www.stunicholls.myby.co.uk/book/index.html | | This is the greatest one I even see! Pages from this guy (Stu Nicholls) contain some really nice CSS tricks, but I call most of them MMN: Mystery Meat Navigation[1]. All of them are "navigation demos", but the fact that his last two tricks (and, to me, the most impressive ones) are... *mazes* ([2] and [3]) is a sure indication that one should not use those tricks for navigation on a real website. They are, again, tricks... Just my 2 cent warning. [1] http://www.webpagesthatsuck.com/mysterymeatnavigation.html [2] http://www.stunicholls.myby.co.uk/menu/amazing.html [3] http://www.stunicholls.myby.co.uk/menu/crossing.html SignatureDaniel Déchelotte http://yo.dan.free.fr/ Daniel Déchelotte wrote: > Zhang Weiwu a écrit : > [quoted text clipped - 16 lines] > [2] http://www.stunicholls.myby.co.uk/menu/amazing.html > [3] http://www.stunicholls.myby.co.uk/menu/crossing.html Thanks for this posting. I haven't had a good laugh for a long time. What you call "tricks", I call "cutting edge css" or "using css at its full potential". You would call Eric Meyer's pages tricks as well I guess. There are always those that fear the unknown. Get into the code, analyse it and find that it is simply applying rules and capabilities. There is nothing to fear - it is not the work of the devil. SignatureGus Gus Richter a écrit : | Daniel Déchelotte wrote: | > [quoted text clipped - 12 lines] | | Thanks for this posting. I haven't had a good laugh for a long time. Then I am glad. :) | What you call "tricks", I call "cutting edge css" or "using css at its | full potential". You would call Eric Meyer's pages tricks as well I | guess. Well, I shall elaborate a bit. I am impressed by every single demo, in a sense of "Funny, how did he do that?". Now, there are a lot of examples, and a lot of them are things he just wanted to prove to be feasible using CSS and only CSS. [ doing the demos again ] [ now discovering the function of the "up" arrow, which leads to the rest of his site ] Oh oh. Now I understand better your indignation when I wrote "Pages from this guy...". I meant "The demos available from his site...". Okayy, the site content is awesome (sorry for not finding a better adjective) and not simply about switching a lamp on and off using CSS. ;-) | There are always those that fear the unknown. Get into the code, analyse | it and find that it is simply applying rules and capabilities. There is | nothing to fear - it is not the work of the devil. His site is all about accessible content, clean yet browser-robust code, and my opinion really was ill-conceived. Sorry for the confusion. SignatureDaniel Déchelotte http://yo.dan.free.fr/ Daniel Déchelotte wrote: > Gus Richter a écrit : > > | Daniel Déchelotte wrote: > His site is all about accessible content, clean yet browser-robust code, > and my opinion really was ill-conceived. Sorry for the confusion. I'm sorry that I expressed my amusement. I'm also glad that you had a second, closer look. For me, it's not so much what he did as an end product, although it does impress, but it is mainly the technique he uses to achieve certain results; utilizing 2 or more seemingly straight forward characteristics in order to achieve a certain result, à la Eric Meyer's 'complexspiral', which inspired and awed everyone. It is also the realization that there are untapped techniques not yet realized (undiscovered) with this relatively new css. Some aspects of the demos, may of course be found to be useful in certain circumstances as well, as in the case for the OP. I stumbled onto the site in search of answers to the same question as that of the OP quite a while ago. SignatureGus Je m'excuse de t'avoir taquiné, sois certain que c'était sans mechanceté. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.