Question

I have a problem placing DOM elements.

In this HTML (http://bluecodestudio.com/scripts/), a pop up appears, animated thanks to the javascript. After I press the ‘Enter’ button, I’d like that the ‘Welcome’ message is placed in the center.

But it ‘collides’ with the other elements, and I can’t find the way to make it ‘float/flow’ over the elements. Any changes to my style.css to fix it? Thanks!

PS: I use absolute path routes for [the links of] the scripts and the stylesheet because I use a Nodejs module which kind of ‘forces’ me to do that, or at least is the easiest way to make it work.

Edit: CSS direct link: http://bluecodestudio.com/scripts/style.css

Answer 1

You could do this:

 #welcomeContent
 {
       width: 100%;
       height: 100%;
       z-index: 1; /*For overlapping divs*/
       opacity: 0; /*Not visible on load*/
 }

 #welcomeMessage
 {
      width: 100%;
      text-align: center;
      vertical-align:middle;
  }

This in theory should put your message in the center of parent div. you’ll need a z-index since this will overlap divs