Explore the community Forums Social Lounge How do you center a course vertically or add top margin to a browser window Reply To: How do you center a course vertically or add top margin to a browser window

#361943 Score: 0
Profile photo of Darrel Somoza
Darrel Somoza
Member
contributor
friend finder
beginner
intermediate
junior moderator
advanced
wise owl
curious george
profile
209 pts
@Klaatu

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 {

left:40px!important;

top:20px!important;

}

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.

  • This reply was modified 3 years, 2 months ago by Profile photo of Darrel Somoza Darrel Somoza. Reason: typos