1

I would like to create a dynamic phrase like doyouimpress.com

The code I use for HTML is: Source

<section class="rw-wrapper">
     <h1 class="rw-sentence">
     Phrase one             
         <div class="rw-words rw-words-1">
        <span>Word 1</span>
        <span>Word 2</span>
        <span>Word 3</span>
        </div>
    </h1>
</section>
<h2 class="rw-sentence-IE">Phrase for internet explorer</h2>

The code I use for CSS is: (I have errors when pasting the CSS here, please see Source.)

With this code the words automatically change but the phrase does not change position when the words are long or short.

What I do wrong and how can I get a similar effect to: doyouimpress.com

Jamie Taylor
  • 4,709
  • 5
  • 44
  • 66
user3454611
  • 11
  • 1
  • 4
    Just a note, `div` is **not** allowed as child of `h1`. – Vucko Mar 24 '14 at 09:29
  • 1
    a topic about @Vucko [comment](http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it). – aloisdg Mar 24 '14 at 09:32
  • Read, try, try again and if it's fail... ask. You say `...Phrase for internet explorer`... and in the FIRST comment of your `SOURCE article` says that don't work in IE. Author (ML) also set a note *`"Please note: the result of this tutorial will only work as intended in browsers that support CSS animations."`*. So... In which browser/version is not working for you? And don't forget @Vucko's comment. – gmo Mar 24 '14 at 13:35

1 Answers1

0

It looks like the CSS is left-aligning the sentence that gets changed with:

text-align: left;

If you change that to 

 text-align: center;

You might find that the sentence/phrase changes position when it's a different word.

NoobEditor
  • 15,563
  • 19
  • 81
  • 112
alexcowles
  • 37
  • 1
  • 7