Text running from top to bottom - How?

rubyfruit · #1 (**permalink**) Sep 27th, 2006, 10:41

Hi,

My friend would like her website designed so that the navigation bar is to the left of a simple 2-column design. However she wants the text for the navigation bar to run from top to bottom (ie vertically), and she also wants her name written within this section so that the vertical text consists of 2 lines (one line containing her name and the other line containing the links). The navigation section will only take up about 10% of the screen.

I've googled the issue and can only find solutions which work in IE. However I want the website to be as accessible as possible, and thus don't want to be limited to one browser.

Is it possible?

Thanks,

Ruby

Ryan Fait · #2 (**permalink**) Sep 27th, 2006, 11:09

You're going to have to resort to images for this. There is no universal way to make text run vertically. For accessibility, you can use CSS to style divs with background images and hidden text. That'd be how I would do it.

rubyfruit · #3 (**permalink**) Sep 27th, 2006, 15:56

Hi, do you know of an example & its coding? I'm very new to CSS and haven't tried this technique before - but want to carry it out as its the only way I'll learn.

Thanks.
R

ukgeoff · #4 (**permalink**) Sep 27th, 2006, 16:53

Just did this for fun to see how it came out. It might be an idea you could develop.

A bit clumsy but...

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>

<style type="text/css">
<!--
    ul {
      list-style-type: none;
   
   }
   
    li {
       float: left;
      width: 0.6em;
      margin-right: 10px;
   }
   
   li a {
       text-decoration: none;
      background-color: blue;
      color: white;
      display: block;
      width: 100%;
      padding: 0 3px 0 3px;
   }
-->
</style>

</head>
<body>

<ul id='navigation'>
    <li><a href='*'>f<br />i<br />r<br />s<br />t<br /><br />l<br />i<br />n<br />k</a></li>
   <li><a href='*'>s<br />e<br />c<br />o<br />n<br />d<br /><br />l<br />i<br />n<br />k</a></li>
   <li><a href='*'>t<br />h<br />i<br />r<br />d<br /><br />l<br />i<br />n<br />k</a></li>
</ul>

</body>
</html>

rubyfruit · #5 (**permalink**) Sep 27th, 2006, 17:08

Thank you very much!

I'll have a go and let you know how I get on.

Ruby

Ryan Fait · #6 (**permalink**) Sep 27th, 2006, 23:11

Yeah, but that won't rotate the text 90º.

ukgeoff · #7 (**permalink**) Sep 28th, 2006, 11:30

No. The text runs from top to bottom as per the original post. Nothing was said about rotating anything.

rubyfruit · #8 (**permalink**) Sep 28th, 2006, 20:07

Hi

Unfortunately the text does need to be rotated 90º. I've made a Paint Shop image of it:

I've used the following CSS code to place the image over the ul and it's links:

Code: Select all

#navigation { width: 50px; height: 420px; position: relative; }
#navigation span {background: url(navigator.gif) no-repeat; position: absolute; width: 100%; height: 100% }

Now I need to link the two so that the image activates the links. Do I need to create an image map? Accessibility is important to me, but I also need the above look to the navigation bar to satisfy my friend's requirements.

I've read about layout-flow: vertical-ideographic but I believe this only works with certain browsers?

Thanks.

Ruby

ukgeoff · #9 (**permalink**) Sep 29th, 2006, 08:49

Can you check the link you gave as it didn't work when I tried it?

rubyfruit · #10 (**permalink**) Sep 29th, 2006, 11:15

Hi,

Sorry about that.

Try:

http://www.diaphanouslife.com/images.html

Thanks,

Ruby

Ryan Fait · #11 (**permalink**) Sep 30th, 2006, 01:01

It's going to have to remain an image unless you're catering to only IE. Any other browsers and it won't display properly. I wouldn't recommend doing it without a failsafe.

http://msdn.microsoft.com/library/de...rticaltext.asp

ukgeoff · #12 (**permalink**) Sep 30th, 2006, 13:52

Now I see what you are trying to do, to be honest, I think it is only a concept a designer could love.

I, and I think most users, would get fed up getting a crick in their neck trying to read the menu options.

Ryan Fait · #13 (**permalink**) Oct 2nd, 2006, 11:21

I've seen several sites with vertical text (and made one myself, once). It's not really hard to discern provided we're not talking about entire paragraphs.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Time is running out...	Ed	Webforumz Cafe	0	Feb 24th, 2008 18:30
Running out of hair to pull! Please help :(	Capricious	Web Page Design	5	May 4th, 2007 17:30
Vertically aligning text at the bottom	Donny Bahama	Web Page Design	6	Apr 16th, 2007 02:44
align text to bottom of div?	JETshipJUMBO	Web Page Design	9	Aug 6th, 2006 07:29
Running Php functions	tomd1985	PHP Forum	1	Feb 11th, 2006 19:33

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Text running from top to bottom - How?