What are various ways to display the content within an to a different position instead of default?</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2012-12-14T20:38:18.680" class="fromnow">Dec 14 '12 at 20:38</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2012-12-14T20:38:18.680" datetime="2012-12-14T20:38:18.680">Dec 14 '12 at 20:38</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 156 times"> <span class="fc-light mr2">Viewed</span> 156 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="13885911" data-ownerid="1120027" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="13885911"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>In other words, I am displaying the content of my Code School account in an in the education section of my portfolio site. The header from Code School is too large, for my taste, to be displayed on my page. </p> <p><img alt="content in the iframe" src="../../images/3799649363.webp"/></p> <p>So I either want the page within the iframe to load at a predefined position which I can set in the CSS. </p> <p>Or the other option could be that I just layer the preceding div to cover over that part of iframe. But other than hacks (which I am still open to), I imagine that there is a way within best practices.</p> <p>My page in question is viewable at <a class="external-link" href="http://jgallardo.me/home/education/" rel="nofollow noreferrer">http://jgallardo.me/home/education/</a></p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Dec 14 '12 at 20:38">asked Dec 14 '12 at 20:38</time> <a href="../../users/1120027/jgallardo" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1120027.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="JGallardo" /> </a> <div class="s-user-card--info"> <a href="../../users/1120027/jgallardo" class="s-user-card--link">JGallardo</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">11,074</li> <li class="s-award-bling s-award-blinggold" title="10 gold badges">10</li> <li class="s-award-bling s-award-blingsilver" title="82 silver badges">82</li> <li class="s-award-bling s-award-blingbronze" title="96 bronze badges">96</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-13885911" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="13885911" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-19128481" class="comment js-comment " data-comment-id="19128481" data-comment-owner-id="1050809" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment19128481_13885911"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Is there a reason that you are trying to use an iFrame? Do you plan on having people interact with the code school report card?</span> – <a href="../../users/1050809/scott-sword" title="4,648 reputation" class="comment-user ">Scott Sword</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/13885911/what-are-various-ways-to-display-the-content-within-an-iframe-to-a-different-p#comment19128481_13885911"><span title="2012-12-14T20:48:56.977 License: CC BY-SA 3.0" class="relativetime-clean">Dec 14 '12 at 20:48</span></a></span> </div> </div> </li> <li id="comment-19129287" class="comment js-comment " data-comment-id="19129287" data-comment-owner-id="1087846" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment19129287_13885911"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Take a look at this other Stack Overflow question: http://stackoverflow.com/questions/1192228/scrolling-an-iframe-with-javascript</span> – <a href="../../users/1087846/fabio-duque-silva" title="2,146 reputation" class="comment-user ">Fábio Duque Silva</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/13885911/what-are-various-ways-to-display-the-content-within-an-iframe-to-a-different-p#comment19129287_13885911"><span title="2012-12-14T21:26:13.037 License: CC BY-SA 3.0" class="relativetime-clean">Dec 14 '12 at 21:26</span></a></span> </div> </div> </li> <li id="comment-19130071" class="comment js-comment " data-comment-id="19130071" data-comment-owner-id="1120027" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment19130071_13885911"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Swordfish0321 The reason that I am using an iFrame is because the other option would be to just display an image. But with the iFrame, my "report card" can be viewed live. Also, i want to give them the option to check out Codeschool [link](http://codeschool.com)</span> – <a href="../../users/1120027/jgallardo" title="11,074 reputation" class="comment-user owner">JGallardo</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/13885911/what-are-various-ways-to-display-the-content-within-an-iframe-to-a-different-p#comment19130071_13885911"><span title="2012-12-14T22:04:09.390 License: CC BY-SA 3.0" class="relativetime-clean">Dec 14 '12 at 22:04</span></a></span> </div> </div> </li> <li id="comment-19130628" class="comment js-comment " data-comment-id="19130628" data-comment-owner-id="1050809" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment19130628_13885911"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">What do you mean by "live", will your report card be changing over time time? If not, you're just creating more work for yourself. Tt will probably be better to just upload an image and wrap an anchor tag around it.</span> – <a href="../../users/1050809/scott-sword" title="4,648 reputation" class="comment-user ">Scott Sword</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/13885911/what-are-various-ways-to-display-the-content-within-an-iframe-to-a-different-p#comment19130628_13885911"><span title="2012-12-14T22:35:33.600 License: CC BY-SA 3.0" class="relativetime-clean">Dec 14 '12 at 22:35</span></a></span> </div> </div> </li> <li id="comment-19133541" class="comment js-comment " data-comment-id="19133541" data-comment-owner-id="1120027" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment19133541_13885911"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Yes @Swordfish0321, as I complete classes it will change. By adding the link in the iframe, i just add the link once. As opposed to updating with new screenshots every time I finish classes with Code School.</span> – <a href="../../users/1120027/jgallardo" title="11,074 reputation" class="comment-user owner">JGallardo</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/13885911/what-are-various-ways-to-display-the-content-within-an-iframe-to-a-different-p#comment19133541_13885911"><span title="2012-12-15T02:54:27.477 License: CC BY-SA 3.0" class="relativetime-clean">Dec 15 '12 at 02:54</span></a></span> </div> </div> </li> <li id="comment-19147007" class="comment js-comment " data-comment-id="19147007" data-comment-owner-id="1050809" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment19147007_13885911"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Well then the only solutions, to my knowledge, would be to either implement the js solution above (which is kind of jittery), or just z-index it under a preceding div which is kinda of ghetto too, but will solve your issue.</span> – <a href="../../users/1050809/scott-sword" title="4,648 reputation" class="comment-user ">Scott Sword</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/13885911/what-are-various-ways-to-display-the-content-within-an-iframe-to-a-different-p#comment19147007_13885911"><span title="2012-12-15T22:09:38.797 License: CC BY-SA 3.0" class="relativetime-clean">Dec 15 '12 at 22:09</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">0 Answers<span style="display:none;" itemprop="answerCount">0</span></h2> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>