Question

For a site I am making I want to have a nice rotated “navigation” bar, just simple links really at the top of the page.

The code I have got:

div.home
{
position: absolute;
top: 0px;
left: 700px;
height: 150px;
width: 40px;
background-color: #313131;
-webkit-transform: rotate(45deg);
margin-top: -36px;
text-transform: rotate(45deg);
}

And:

<div class="home">
Home
</div>

This makes the text bunch up at the top of the element. Ideally I want it to be at the bottom of the element,

Answer 1

I don’t Know what exactly you want but these maybe helpful

<div class="home">
  <div class="text">    
    Home
  </div>
</div>​

div.home
{
 position: absolute;
 top: 30px;
 left: 700px;
 height: 150px;
 width: 40px;
 background-color: #313131;
 -webkit-transform: rotate(45deg);
 margin-top: -36px;
 -webkit-text-transform: rotate(90deg);
}
.text{
  margin-top:100px;
 font-size:26px;
 -webkit-transform: rotate(-90deg);
 color:white;
}

DEMO
​