I'm having trouble aligning my hidden divs in the center of the page.
When I set their position to relative, the scroll increases as I move from one page to another (meaning the div is not vertically centered on the page).
Should I place all three divs in one container div?
Please help!
Thank you in advance.
<body>
<div id ="page1" class="page" style=""visibility:visible>
content
<!-- also contains a button that hides this div and makes the
next div visible -->
</div>
<div id="page2" class="page">
content
<!-- also contains two buttons for back and next div -->
</div>
<div id ="page3" class="page">
content
<!-- contains two buttons for back and submit -->
</div>
</body>
The css code I'm using:
.page {
position: absolute;
visibility:hidden;
}
The javascript code I've implemented 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>