CodingForums.com - I need help aligning rotated text

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - I need help aligning rotated text (http://www.codingforums.com/showthread.php?t=266683)

I need help aligning rotated text

So I'm trying to make a 3 item list with the text rotated and aligned to the top. My text is rotated 90 degrees counter clockwise like it is suppose to but it aligns to the bottom or what would be the left side if it wasn't rotated. I want it to line up to the top with out absolute positioning. I've tried text-align to no avail. Any help would be appreciated.

Here is the html:

Code:

<div class="navbar" style="background-color:#900;margin-left:10px;"><a class="nav">Merchandise</a></div>

<div class="navbar" style="background-color:#090;"><a class="nav">Training Boards</a></div>

<div class="navbar" style="background-color:#009;"><a class="nav">Contact Us</a></div>

Here is the css I'm using:

Code:

.navbar {width: 40px;

        float: left;

        margin-left: 10px;

        padding-bottom: 500px;

}

Code:

.nav {display: block;

        position: relative;

        margin-top: 100px;

        white-space: nowrap;

        -webkit-transform: rotate(-90deg);

        -webkit-transform-origin: bottom right;

        -moz-transform: rotate(-90deg);

        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

EDIT: Here's a link to a skeleton of it. http://home.ite.sfcollege.edu/~richa...ng/index2.html
I want the text aligned to the top of the colored bars. Also you might notice I'm using a bunch of padding to make the bars fill up space, any ideas to make this better would be great too. Thanks.

It might be easier on you to rotate 270 degrees. The text will line up like you want, but will read from top to bottom.

You could also try to position each text individually instead of all three together with the .nav class.

Code:

.nav1{

        display: block;

        position: relative;

        top: 70px;

        white-space: nowrap;

        -webkit-transform: rotate(-90deg);

        -webkit-transform-origin: bottom right;

        -moz-transform: rotate(-90deg);

        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

.nav2{

        display: block;

        position: relative;

        top: 100px;

        white-space: nowrap;

        -webkit-transform: rotate(-90deg);

        -webkit-transform-origin: bottom right;

        -moz-transform: rotate(-90deg);

        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

.nav3 {

        display: block;

        position: relative;

        top: 60px;

        white-space: nowrap;

        -webkit-transform: rotate(-90deg);

        -webkit-transform-origin: bottom right;

        -moz-transform: rotate(-90deg);

        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

for HTML:

Code:

<div id="leftcolumn">

<div class="navbar" style="background-color:#900;margin-left:10px;"><h3 class="nav1">Merchandise</h3></div>

<div class="navbar" style="background-color:#090;"><h3 class="nav2">Training Boards</h3></div>

<div class="navbar" style="background-color:#009;"><h3 class="nav3">Contact Us</h3></div>

</div>

I don't like using <a> for the text. <a> is for an anchor!

Thanks, I ended up just using absolute positioning but did create separate nav classes.
I agree about the <a> thing, it'll become a link later when I create the pages.

Well after testing it and having it look 4 different ways in 4 different browsers I think I'm just going to go with images. I'll probably keep a copy of it with css though just to see if I can get it to work consistently.