5

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;
}
misterManSam
  • 24,303
  • 11
  • 69
  • 89
Asteria
  • 300
  • 3
  • 5
  • 21
  • Inline elements cannot be rotated. You would have to use `display: inline-block`. *Note:* `inline-block` would by default add some margins which also have to be adjusted. – Harry Sep 11 '14 at 05:43
  • @Harry Sorry, I'm pretty new to this. What's the difference between inline and inline-block? – Asteria Sep 11 '14 at 05:44
  • Would be a bit too big to explain in a comment. Perhaps, this [W3C Spec](http://www.w3.org/TR/CSS2/visuren.html#x13) could help you with enough details on the difference between the two. In simple terms, inline elements do not have a bounding block/box whereas block/inline-block elements do. – Harry Sep 11 '14 at 05:50
  • Related question: http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements – Harry Sep 11 '14 at 05:50
  • Block level elements normally start (and end) with a new line when displayed in a browser. Examples:

    ,

    ,

      , HTML Inline Elements Inline elements are normally displayed without starting a new line. Examples: ,
      , , , etc
     – Feroza Sep 11 '14 at 05:54

3 Answers3

8

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)

Community
  • 1
  • 1
misterManSam
  • 24,303
  • 11
  • 69
  • 89
1
.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/

Dany Minassian
  • 189
  • 4
  • 13
0

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

Feroza
  • 337
  • 2
  • 3
  • 12