From : w3schools (http://www.w3schools.com/css/css3_2dtransforms.asp)
/** CSS3 2D Transforms **/
.div{
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
Never tried to use this, I usually use javascript to rotate my elements but it appears to be what you looking for (I think you want to do this only in css/html).
You can apply this directly on #menu nav ul li
I think!
If it doesn't work, can you provide a JSFiddle (or sort of)?
Update 1
Ok sorry I didn't analyse your entire code, I thought you were only looking for "rotation"!
First of all, for
blue buttons from left to right
You have to use a propriety name float
to do this job, then clean with clear
. I recommend you to practice this with some tutorial, it's very important in CSS Positioning and it will help you a lot here (and for future i guess)! Actually I did it in the JSFiddle linked but I think you absolutely need to be friendly with float and clear (@petebolduc supposed you to use float/clear too!)
Secondly for
with the text from bottom to top
Here you can use CSS3 2D Transforms. You have to applied a 270° rotation on your text for it be bottom to top. As I supposed in the first answer, you have to applied it on #menu nav ul li
.
Here is the JSFiddle updated. I did not change your width/height property because I am not sure what you want to do after, but consider adapt them! (With your actual values, <li>
are out of <header>
and this is not what you want, I suppose). If you need help to width and height, then ask for!
I think it can be a good tutorial for positioning : http://www.barelyfitz.com/screencast/html-training/css/positioning/ (I am french so I usually follow french tutorial..)
And the JSFidle : http://jsfiddle.net/B4SEx/1/