Put an iframe on the right

寵の児 提交于 2021-01-28 10:32:44

问题


So I want to make an iframe for a page that would display a selection of teas and herbal teas, and I want the options on the left in another iframe. Though, it's been so long I haventdone that and I oly didit with DreamWeaver before (I'm unexperienced so I followed a teacher's tutorial), so the software generated most of the code, really. Could anyone help me please? Right now, here's the iframe's code along with the banner:

    <div class="container">
        <img src="images/bannersite.png" alt="Banner" style="width:100%;">
        
        <div class="bigtxt" style="left: 100px; top: 70px; position: absolute;">
            <span style="color: #B3D1B3;">Ma</span><span style="color: #404040;">Thé</span>
        </div>
    </div>

    <iframe src="accueil.html" style="width: 99.8%;">
    </iframe>

Here's what it looks like:

As you can see, there's a scrolling bar below, and that's because for some reason theiframe decided it would continue on the left of the banner's right end, and I don't want that. I want the iframe and the banner to both fit the whole screen.

Here's what I would like to do but have no clue how:

Thanks for anyone who's willing to help me.


回答1:


Please take a note, iframes are not good for SEO. It's much better to use java script or jquery driven pieces of code. Google and others are not trustibg to iframe, making yuor website rating a lot decrese.




回答2:


Have a look at this codepen, I think it does what you are looking for.

https://codepen.io/larrytherabbit/pen/mdPGzdm

I edited your code a bit and please read the comments I made for you to better understand the new lines of code. There is a HTML code and a CSS code that applies to it, with classes (they begin with a ".")

HTML

<div class="container"> <!-- this is the container for the picture and the "MaThé" text -->
        <img src="https://images.all-free-download.com/images/graphicthumb/sunflower_background_03_hd_picture_165827.jpg" alt="Banner">
        <div class="bigtxt" style="left: 100px; top: 70px; position: absolute;">
            <span style="color: #B3D1B3;">Ma</span>
            <span style="color: #404040;">Thé</span>
        </div>
</div> <!-- top header container closes here -->

<div class="flex-container"> <!-- this is the container for the sidebar and the iframe on the right -->
  <div class="sidebar">
    <button>Button</button>
    <button>Button</button> 
    <button>Button</button>
  </div>
<iframe src="https://www.youtube.com/embed/sJIjIMMIoSw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

CSS

.container img {
  width:100%;max-height:250px;
}

.bigtxt {
  font-size:50px;
}

.flex-container { /* the display attribute set to flex creates a "flexbox" display, please see here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox */
  display:flex;width:100%;
}

.sidebar { /* this container is also set to flex, but here we change the flex-direction to column for the buttons to display in a column */
  display:flex;flex-direction:column;height:300px;justify-content:center;width:30%;align-items:center; /* giving a width of 30% to the sidebar, it will fill 30% of the available space, which is 100% of the window width as defined above */ /* by setting align-items and justify-content to "center" the buttons place themselves in the middle of the sidebar */
}

.sidebar button {
  margin:30px 0;max-width:100px; /* giving a bottom and a top margin ofo 30px to the buttons to space them apart */
}

iframe {
  width:70%; /* here we simply set the width of the iframe to the remaining space which is 70% of the 100% width of the .flexbox container */
}




来源:https://stackoverflow.com/questions/63944727/put-an-iframe-on-the-right

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!