CODEWITHSUNDEEP
css
Asteria
Asteria

Reputation: 330

Rotate inline elements with CSS

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;
}

Upvotes: 5

Views: 13815

Answers (3)

misterManSam
misterManSam

Reputation: 24692

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à!

Screenshot

Have an example! (fixed link)

Some light reading:

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)

Upvotes: 9

Feroza
Feroza

Reputation: 397

you cannot rotate Inline elements, block elements does, in your case use inline-block for particular element that need to be rotated

Upvotes: 0

Dany Minassian
Dany Minassian

Reputation: 169

.orlogo {   
  display:inline-block;
  color: white;
  background: black;
  border: black solid 1px;
  width: 60px;
  transform: rotate(270deg)
 }

You have to make the orlogo display inline-block for it to work.

Updated Fiddle: http://jsfiddle.net/oh5mn57b/1/

Upvotes: 1

Related Questions