Page Alignment in Browser
August 5, 2010 12:00 AM
Currently when we publish a course to scorm we are configuring the "Page alignment to HTML Publishing" to "Centered", this is located on the General Tab on the Title Properties page. When viewed in Internet Explorer the page is centered but it is right under the Browser heading/toolbar. If the viewer selects the function key F-11 to view the content in full view mode then the page will be located at top center of the page.
Is it possible in Lectora to have the page centered in the center of the page? Does anyone know how to configure this in Lectora?
Discussion (2)
body, html {
background: #202020 url(images/blackbg.jpg) repeat-x top center;
overflow: hidden;
}
iframe {
border: 0px;
overflow: hidden;
}
#pageDIV {
position: absolute;
margin: auto 0px auto 0px;
overflow: hidden;
top: 0; left: 0; bottom: 0; right: 0;
}
CSS in an external web object
#pageDiv is forced to center of screen
I use iframe to remove the border
Body overflow just in case
overflow:hidden > also contains animation within the pageDiv (no scroll bars or objects appearing outside the slide)
Here's another solution, when Lectora exports, whether it is centred or not, your exported HTML will probably contain this code for the body:
this is calling a function: ReFlow(), which is found in the head of the document,
function ReFlow() {
findWH()
var left = (winW > 1009) ? (winW-1009)/2 : 0
var top = (winH > 662) ? (winH-662)/2 :0
if (pageLayer)
{
pageLayer.moveTo( left, top );
pageLayer.hasMoved = true;
pageLayer.newX = left;
pageLayer.newY = top;
}
}
findWH() refers to an earlier method in the head that finds the Width and Height of the container, it then creates two variables, winW and winH, the width and height of the window respectively.
Create two variables, one to help you align the page horizontally: var left, and one to help you align vertically: var top.
Use the same variable declarations I have, but where I have 1009, insert the width of your project, and where I have 662, insert your height.
Use the same if(pageLayer) if statement I have, but if you don't want to align vertically, then replace top with 0, and if you don't want to align horizontally, replace left with 0.
Next, we'll go back to the body, where directly under you will most likely have a
In the if statement, declare your left and top variables, again with your dimensions, and assign the CSS properties to pageDIV.
top:0px becomes top:' + top +'px
Again, if you don't want to align, simply use left:0px, or top:0px;
I find that this is working for me, maybe it will help one of you.
Discussions have been disabled for this post