Rotate inline elements with CSS

Question

I realise there are a lot of questions like this already, but I can't seem to get them to work for me....as most of the solutions target a 'nth-child' or (with my extremely 'newbie' skills) I just don't understand how it works.

I am attempting to make a 'Deal or No Deal' game for an assignment. I'm spending way too much time making it look good, and this is where my problem arose.

I wanted to make the 'Deal or No Deal' sign using CSS. Unfortunately, to get my 'OR' to rotate I can't seem to use 'inline'.

This is my current attempt on JSfiddle

I have tried using a span element, that wraps around the 'OR' to rotate it, I attempted to change the H1 elements to LI elements (to use the nth-child solution suggested in other answers) but that didn't work either.

Can anyone point me in the right direction?

HTML

<center>
<h1 class="deallogo"> Deal </h1><h1 class="orlogo">OR</h1><h1 class="nodeallogo"> No deal </h1>
</center>

CSS

h1 {
    display: inline;
}
.deallogo {
    background: linear-gradient(#685300, #E6B800);
    border: black solid 1px;
    width: 80px;
}
.orlogo {   
    color: white;
    background: black;
    border: black solid 1px;
    width: 60px;
    transform: rotate(270deg)
}
.nodeallogo {
    background: linear-gradient(#685300, #E6B800);
    border: black solid 1px;
    width: 128px;
}

Answer 1

Start by simplifying your HTML markup:

<h1 class="deallogo">Deal<span>OR</span>No deal</h1>

Much more semantic, it is all one heading and there is no more <center> which is deprecated :)

Now apply the needed CSS properties for h1:

.deallogo {
    background: linear-gradient(#685300, #E6B800);
    border: black solid 1px;
    display: block; 
    /* the default */
    margin: 0 auto; 
    /* margin auto centers block elements that have a fixed width! */
    width: 204px; 
    padding: 0 9px 0 10px;
    /*Slight changes with width and padding values*/
}

and the span:

.deallogo span {   
    color: white;
    background: black;
    border: black solid 1px;
    width: 35px;
    font-size: 0.7em; 
    /* Smaller font size to fit the height */
    transform: rotate(270deg);
    display: inline-block; 
    /* inline-block allows the element to have a height and width (and rotate) */
    vertical-align: top; 
    /* a top margin is being used, so let's get it up there with vertical-align */
    margin: 4px 0 0;
}

et voilà!

Have an example! (fixed link)

Some light reading:

• The display property

inline-block - The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)