javascript - Can't align the hidden divs to appear at the center of the page vertically and horizontally on visibility -


i can't align hidden divs @ center of page.

if give position them relative , scroll increases move 1 page (i.e div not aligned vertically center of page)

should place 3 divs in 1 container div??

please help!!!

many in advance..

<body>     <div id ="page1" class="page" style=""visibility:visible>         content         <!-- contains button hides div , makes             next div visible -->     </div>     <div id="page2" class="page">         content         <!-- contains 2 buttons , next div -->     </div>     <div id ="page3" class="page">         content         <!-- contains 2 buttons , submit -->     </div> </body> 

the css using is:

.page {     position: absolute;     visibility:hidden; } 

the javascript used is:

<script language="javascript"> var currentlayer = 'page1'; function showlayer(lyr){ hidelayer(currentlayer); document.getelementbyid(lyr).style.visibility = 'visible'; currentlayer = lyr; }  function hidelayer(lyr){ document.getelementbyid(lyr).style.visibility = 'hidden'; } </script> 

this how center div current set demo http://jsfiddle.net/kevinphpkevin/g8r7z/

#page1 {     position:absolute;     top:50%;     right:0;     left:0;     background:#ccc;     width:200px;     margin:-50px auto 0 auto; } 

Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

CSS3 Transition to highlight new elements created in JQuery -