Highlighted

How to center iframe in middle of webpage?

New Here ,
Aug 27, 2018

Copy link to clipboard

Copied

I am building a website, and have a quiz I am trying to center in the middle of a webpage. Currently it's in an iframe. Also the quiz dimensions are skewed as some of the text is cut off and some of the text at the bottom cannot be seen.

Any help would be greatly appreciated.

Here's the web page:

Cardiology https://www.pharmacistintern.com/cardiology.html

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Unfortunately, the whole page is so oversized it won't fit my display unless I agressively zoom out with my browser.   

I can tell that the entire angular driven quiz page was copied and pasted into your Muse file which resulted in duplicate <html>, <head> and <body> tags.  You must strip those out from your embedded code because a document can have only one set of those tags.   Muse generates them for you.

The quiz's <head> assets (links to quiz CSS) will need to be inserted into a custom meta data tab in Muse.   Unless you understand code basics and document structure, this can get very complicated for Musers.

View your page's source code in a browser.   Problems begin on code line 76 through 143 where your Quiz is embedded.   Hopefully you can resolve those code issues yourself.   If not post back and I'll attempt to help you.  

Views

301

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to center iframe in middle of webpage?

New Here ,
Aug 27, 2018

Copy link to clipboard

Copied

I am building a website, and have a quiz I am trying to center in the middle of a webpage. Currently it's in an iframe. Also the quiz dimensions are skewed as some of the text is cut off and some of the text at the bottom cannot be seen.

Any help would be greatly appreciated.

Here's the web page:

Cardiology https://www.pharmacistintern.com/cardiology.html

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Unfortunately, the whole page is so oversized it won't fit my display unless I agressively zoom out with my browser.   

I can tell that the entire angular driven quiz page was copied and pasted into your Muse file which resulted in duplicate <html>, <head> and <body> tags.  You must strip those out from your embedded code because a document can have only one set of those tags.   Muse generates them for you.

The quiz's <head> assets (links to quiz CSS) will need to be inserted into a custom meta data tab in Muse.   Unless you understand code basics and document structure, this can get very complicated for Musers.

View your page's source code in a browser.   Problems begin on code line 76 through 143 where your Quiz is embedded.   Hopefully you can resolve those code issues yourself.   If not post back and I'll attempt to help you.  

Views

302

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 27, 2018 0
New Here ,
Aug 27, 2018

Copy link to clipboard

Copied

I have thought about going to object->embed html within muse but if I did that then I would have to publish again for it to take effect, and then I would lose the other quiz content I've uploading into cpanel.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 27, 2018 0
New Here ,
Aug 27, 2018

Copy link to clipboard

Copied

Still doesn't solve my issue of how to make the background image for the quiz larger...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 27, 2018 0
Adobe Community Professional ,
Aug 27, 2018

Copy link to clipboard

Copied

To begin with, you have some critical code errors that need attention.

Showing results for https://www.pharmacistintern.com/cardiology.html - Nu Html Checker

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 27, 2018 0
New Here ,
Aug 28, 2018

Copy link to clipboard

Copied

Nancy, Thank you for pointing out the code errors.

It looks like going into muse and embedding the html solved the problem of having the quiz centered in the middle of the page. But I'm not that great of a programmer and now I need to make the quiz window bigger....?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 28, 2018 0
Adobe Community Professional ,
Aug 28, 2018

Copy link to clipboard

Copied

Unfortunately, the whole page is so oversized it won't fit my display unless I agressively zoom out with my browser.   

I can tell that the entire angular driven quiz page was copied and pasted into your Muse file which resulted in duplicate <html>, <head> and <body> tags.  You must strip those out from your embedded code because a document can have only one set of those tags.   Muse generates them for you.

The quiz's <head> assets (links to quiz CSS) will need to be inserted into a custom meta data tab in Muse.   Unless you understand code basics and document structure, this can get very complicated for Musers.

View your page's source code in a browser.   Problems begin on code line 76 through 143 where your Quiz is embedded.   Hopefully you can resolve those code issues yourself.   If not post back and I'll attempt to help you.  

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 28, 2018 0