A nice CSS layout vertical bar (howto)

[killua]

Hello,

Will you please check the following site and check the vertical bar on the right:

http://www.apple.com/ipodshuffle/

I actually like that kind of vertical bar layout than what seen on our website on my signature. Since I have very little knowledge in CSS, I want to know the coding on how to make that kind of vertical bar layout. Will you kindly help me with this?

Thanks.

[jg_v7n]

You can view their style sheets here:

http://www.apple.com/main/css/globalprint.css
http://www.apple.com/main/css/global.css
http://www.apple.com/ipod/ipod.css

In basic terms, split your vertical bar into a number of tables (or divs) instead of one big one - give each individual table a graphical background in the top element into which you can write your header text. Here is the image that they use on the ipod site (don't copy it - make your own!)

http://images.apple.com/ipodshuffle/...op20050111.gif

[killua]

Thank you jg_v7n. I'll just change the color of that image so they won't notice that I copied it. I'm not a good designer that's why. But what's better, using tables or divs?

[jg_v7n]

Div's give you a little more flexibility, you can simply hide an entire div using the "visibility" style and you can possition them anywhere on the screen using a style sheet also. But tables are simple and easy to use, tables will be fine for your needs...