How to create vertical spacing above the Captivate frame

Report · Sep 06, 2017

I'm publishing HTML5 output from Captivate 9. The client is going to make the module available from an intranet web page (rather than from an LMS). They want a 30-pixel space above the module, so it doesn't butt up against the user's browser bars. (First time anyone has ever asked me for that.)

I'm not sure how to do that. I can't use the vspace HTML tag, because it's not supported in HTML5. I found this CSS code: <img style="margin: 30px 0px">. I'm somewhat familiar with CSS, but I'm not sure how to use that with the published Captivate files.

I also found a suggestion to put a white GIF image above the module, as a spacer. Again, I don't see how to do that with the published files.

Any recommendations for how to put 30 pixels of space on the web page above the Captivate frame?

Report · Sep 06, 2017

You would need to add the code into the HTML template file in the Captivate install directory so that whenever the project is published using that template the code will already be there.

You'll find the index.html file that gets used as the template for HTML5 output in the Captivate install directory here (on a 64bit Windows system):

C:\Program Files\Adobe\Adobe Captivate 2017 x64\HTML

Report · Sep 06, 2017

Thanks, Rod. I found the index.html file you referred to. Where would I put the CSS code? And would I need to create a CSS file also? Or, if I use a white GIF file as a spacer, where would I put the HTML code, and where would I put the GIF file?

Report · Sep 06, 2017

You can insert CSS code either inline to the <body> tag, or into the HEAD of the document inside <script> tags, or you could also create a separate CSS file and link to that from within the HEAD of the HTML file.

If you don't know these methods, you need to do some reading up on how to code HTML and CSS. Google is your friend.

Report · Sep 07, 2017

Thanks much for the information, Rod, and for your suggestion to learn more about HTML and CSS. I'll follow up on all that.