CODEWITHSUNDEEP
javascripthtmlcss
Tom Smykowski
Tom Smykowski

Reputation: 26089

How to create a center div scrolling with the page?

I have a website and I would like to put a DIV above this website with field to enter e-mail and button "Subscribe". It should work like this advertisements that we all like. So this div should be always on the center of the screen, and it should be "above" the website and scroll while user is browsing though the page. When user clicks X it should close.

How to do this?

Upvotes: 1

Views: 7609

Answers (2)

Phrogz
Phrogz

Reputation: 303198

See the CSS position:fixed and z-index properties. To center the item horizontally and vertically, give it fixed dimensions, position it at 50%,50%, and then use negative margins. For example:

#annoying-floater {
  z-index:10;
  position:fixed;
  top:50%; left:50%;
  width:640px; height:480px;
  margin-left:-320px; margin-top:-240px
}

To 'close' it, set the display to none via JS. For example:

window.onload=function(){
  document.getElementById('annoying-floater-closer').onclick = function(){
    document.getElementById('annoying-floater').style.display='none';
  }
}

Upvotes: 8

Sebastian Patane Masuelli
Sebastian Patane Masuelli

Reputation: 4247

do you mean that as the page scrolls the div will stay centered? in that case, use position: fixed to place your div; which will work except for < IE8, to get that to work there, use this

Upvotes: 2

Related Questions