How do you center a course vertically or add top margin to a browser window

melvincheesebut Community Member Posts: 9
When I publish my course, I do not want it "Flush Top". I want to specify a top position in the browser window that is maybe 20-40 pixels down from the top. I would even like to set it up so that it floats in the middle of the browser window vertically. I figure this should be simple but I don't know how to do that?
I am not a coder but I am really good at copy paste.


  • jvalley4735
    jvalley4735 Community Member Posts: 1,310 ♪ Opening Act ♪
    You should be able to accomplish it with CSS.  I'm not a coder either but hopefully, this points you in the right direction.
  • melvincheesebut
    melvincheesebut Community Member Posts: 9

    thanks but giving me that link is like giving a blind person the address to a paint store. I can get there, and I can wander around but that is just useless.

    I need specifics - like what do I create in Lectora, what should I type, where do I put it. That sort of thing.

  • jvalley4735
    jvalley4735 Community Member Posts: 1,310 ♪ Opening Act ♪
    Maybe @klaatu wouldn't mind chiming in?
  • klaatu
    klaatu Community Member Posts: 986 ☆ Roadie ☆
    Unfortunately, Inspire does not output web best practice code so it is not possible to do it like you would with a website (margin: 0 auto; width: XX%;). You can, however, provide specific top and left positioning. Keep in mind if you do this that the top and left position you choose will not change even in a responsive project.

    Step by step for someone not used to writing CSS.

    1. open notepad (or any other text editor you like)
    2. type the following:

    #pageDIV {




    3. Note: The lines do not need to be separated by a blank line, I did that so you can read it easier.
    4. Change the numbers to where you want to position the content in the window.
    5. Note: If you copy and paste this code you must replace the quotes as they do not copy and paste correctly.
    6. When saving the file you must change the extension from .txt to all files.
    7. Save the file as myCSS.css (or any name you choose just don't forget to add the .css extension).
    8. Add an HTML Extension directly under the title in the title explorer and select type:Cascading Style Sheet. Click file: and select browse for file... then select the file (myCSS.css) you just saved.

    Before you go this route, if you are publishing for an LMS then you should first check to see if the LMS has options for positioning the lesson window as this might make the whole thing moot.

    I personally do not think positioning the content this way is a good solution because of the wide range of viewport sizes. This fixes the position where you choose possibly making the small monitor user having to scroll (more).

    Explanation of the code.

    #pageDIV { <----------------------- This is the selector. It selects the element with the ID of pageDIV. The pageDIV is the parent element that holds everything else. The left curly brace is part of the CSS syntax.

    left:40px!important; <----------------- Left is the property. 40px is the value or amount of pixels that the element will be from the left side of the browser window. The !important is necessary as it overrides the inline styling of the default published content

    top:20px!important; <-------------- Same as above but for the top property.

    } <---------------- closes out the rule.
  • jvalley4735
    jvalley4735 Community Member Posts: 1,310 ♪ Opening Act ♪
    This is an interesting suggestion, @Klaatu ! I'll pass it along to the development team.