Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.
    Last edited by ab13; 06-29-2012 at 08:48 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,200
    Thanks
    23
    Thanked 605 Times in 604 Posts
    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!
    Last edited by sunfighter; 06-30-2012 at 02:59 PM.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •