Skip to main content
E
Eilmer
Known Participant
September 6, 2017
Question

How to create vertical spacing above the Captivate frame

  • September 6, 2017
  • 1 reply
  • 384 views

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?

    This topic has been closed for replies.

    1 reply

    RodWard
    Community Expert
    RodWardCommunity Expert
    Community Expert
    September 7, 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

      E
      EilmerAuthor
      Known Participant
      September 7, 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?

      RodWard
      Community Expert
      RodWardCommunity Expert
      Community Expert
      September 7, 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.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices