Iframe link overlapping text

lou-touyarou · Jan 18, 2021

For the past month I've been learning about html and css to build my own website. The idea is to have a website where I can post my own articles. A few days ago I started working on the presentation of those articles and tried to insert some links with iframes (usually youtube, bandcamp or instagram). However when I insert those links or iframes, they overlap the text I wrote as a paragraph, as if it's not there. I've put everything in their own div box with a class reference, tried increasing padding, margin, changing position. That works for one individual page where I can increase the padding of the link until it doesn't overlap with the text anymore, but that doesn't seem very right, especially since I would need to change that value for each article, and therefore create a different class every time. The same happens when I try to insert a footer, which sticks to the bottom of the page on my index page for example but ends up in the middle of the screen on individual articles. However the footer seems to be noticing the presence of the iframe links I insert? Many issues I'm quite lost with and don't know what to do!! Does any of you could help me figure out how to make sure those elements don't overlap? Thank you very much.

sunfighter · Jan 18, 2021

I could start by saying "Code Please, We are not mind readers.". But let me ask you this, "are you using CSS-Grid or Flex box?". Do you even know these? I would like to see what you have coded and what you want the site to look like.

lou-touyarou · Jan 19, 2021

Yeah I didn't know if I should post it right away, here's the html page of one of my articles, and the css. I didn't know which info you needed exactly so sorry if it's very long! Let me know if you need more info. And no I hadn't heard about css-grid or flex box before, I checked on the internet but I'm not sure I understand very well, could you explain briefly what it is? You can also find the link towards the website here. It is basically what I want it to look like, but without needing to be adjusting the margin every time. P.S. sorry for my coding that is probably terrible and quite messy, I'm figuring things out along the way!
Also now that I'm here I had another question: do I need to create a new html page for every article that I want to publish? That seems like a very messy process if you have hundreds of articles on your website but I haven't encountered other methods of doing it for now.
Thanks in advance

HTML:

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital@1&display=swap" rel="stylesheet">
  <head>
    <title>Unexplained, a media.</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, intial-scale=1.0">
  </head>

  <body>
    <header>
      <a href="index.html"><img class="header-logo" src="images/UNEXPLAINED1.jpg" alt="unexplained media logo"></a>
      <nav>
        <ul>
          <li><a href="articles.html">Articles</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact me</a></li>
        </ul>
      </nav>
    </header>

<main>
  <section class="articles">
    <h2>Horatio Luna - Boom Boom</h2>
    <div class="article-text">
      <p>Horatio Luna is a bassist, producer, composer based in Melbourne, Australia, which recently came out with a new album, Boom Boom. The first thing I noticed is the bass really at the forefront of the album. It's quite rare to see this instrument take such a predominant place in music and is quite refreshing to hear. It has a super funky rhythm, which reminds me of Tom Misch’s guitar style sometimes. The bass is complemented with super bouncy and fast rhythmics, be aware of your neck! Overall it’s quite hard to know how to describe the music style of this album; it feels like house music always backed up with a very jazzy feeling and some hip hop vibes. It’s really interesting to hear how those different music genres can come together.</p>
    </div>
      <br>
      <br>
    <div class="article-links">
        <iframe style="width:100%" width="560" height="315" src="https://www.youtube.com/embed/6eM818tVBI0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
      <br>
      <br>
    <div class="article-text">
        <p>Melbourne has a very important jazz scene and just like this album, it's very free and open, you can definitely hear the many influences coming from hip-hop, soul or even club and house music. If you want to hear more in this style, Brownswood records came up with a compilation album featuring many artists of the Melbourne jazz scene called “Sunny Side Up”, which is very good. The other artists on that label are also real talented, you should give it a listen!</p>
        <br>
        <br>
    </div>
    <div class="article-links-bandcamp">
        <iframe style="width:100%" width="560"; height="439" src="https://bandcamp.com/EmbeddedPlayer/album=4264786822/size=large/bgcol=ffffff/linkcol=0687f5/artwork=small/transparent=true/" seamless><a href="https://sunnyside-up.bandcamp.com/album/sunny-side-up">Sunny Side Up by Sunny Side Up</a></iframe>
    </div>
      <br>
      <br>
  </section>
</main>
<footer>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="articles.html">Articles</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact me</a></li>
    </ul>
</footer>

</body>
</html>

CSS:

/* MY CODE STARTS HERE */

* {
  text-decoration: none;
}
body {
  margin: 0;
  font-family: Bahnschrift SemiBold;
  text-decoration: none;
  padding: 0;
  height: 100%;
}
section h1 {
  width: 100%
}
/*HEADER BOX*/
header {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  line-height: 50px;
  background-color: white;
  width: 100%
}
/* SHOWS THE HEADER TEXT*/
header * {
  display: inline-block;
  height: 10px;
  text-decoration: none;
  color: black;
  font-weight: bolder;
  font-size: 18px
  margin: 0 auto;
  text-align: center;
  padding: 3px 5px
}
header *:hover{
  color: orange;
}
header .header-logo {
  display: block;
  margin: 0 auto;
  padding: 0px 45px
}
/*space between header words*/
header li {
  margin-left: 30px;
}
/*GETS RID OF THE BULLET POINTS ON LINKS*/
a {
  list-style: none;
}
.header-logo {
  width: 285px;
  height: 50px;
}
/*MAKES CENTRAL TEXT APPEAR*/
main {
  height: 100%;
  display: block;
}
@media only screen and (min-width: 1000px) {
  header {
    height: 50px;
    line-height: 25px;
    position: fixed;
    background-color: white;
    z-index: 1;
  }
  /* SHOWS THE HEADER TEXT*/
  header * {
    height: 0px;
    margin: 0px 10px;
    float: left;
    font-size: 18px;
  }
  header *:hover{
    color: blue;
  }
  header .header-logo {
    margin: 0 auto;
    padding: 0px 500px;
    float: center;
    display: fixed;
  }
  /*space between header words*/
  header li {
    margin-left: 5px;
  }
  .header-logo {
    width: 285px;
    height: 45px;
    display: fixed;
  }
}


/*FIRST PIC YOU SEE ON THE WEBSITE - GO TOGETHER*/
.frontpage {
  width: 100%;
  height: 250px;;
  text-align: center;
  align-items: center;
  display: table;
}
/*FIRST PIC YOU SEE ON THE WEBSITE - GO TOGETHER*/
.front-page-article {
  width: 100%;
  align-items: center;
  margin: 80px 0px;
}
/*SMALL PICS OF ARTICLES*/
.index-img-1 {
  width: 25%;
  position: absolute; left: 10px;
}
/*TITLES OF ARTICLE*/
.index-links div {
  margin: 50px;
  margin-left: 120px;
  width: calc(100% - 120px);
  height: 100px;
  display: block;
  position: inherit; center: 0px
}
p {
  font-size: 1.25em;
  color: black;
  font-family: 'Cormorant Garamond', serif;
  height: 80px;
  padding-top: 15px;
}
/*SEE MORE BUTTON*/
.see-more {
  margin: 30px;
  border: 2px solid blue;
  padding: 10px 20px;
  width: 35%;
  float: left;
}
.see-more a {
  color: blue;
}
.see-more a:hover {
  color: red;
}
/*PAGE NAVIGATION*/
.page-1 {
  border: 2px solid blue;
  padding: 4px 4px;
  color: red;
}
.page-1:hover {
  color: blue;
}
.page-2 {
  border: 2px solid blue;
  padding: 4px 4px;
  color: red;
}
.page-2:hover {
  color: blue;
}
/*COMPUTER VERSION*/
@media screen and (min-width: 1000px) {
  /*FIRST PIC YOU SEE ON THE WEBSITE - GO TOGETHER*/
  .frontpage {
    width: 100%;
    height: 600px;
    text-align: center;
    align-items: center;
  }
  /*FIRST PIC YOU SEE ON THE WEBSITE - GO TOGETHER*/
  .front-page-article {
    width: 100%;
    align-items: center;
    margin: 37px 0px;
  }
  /*SMALL PICS OF ARTICLES*/
  .index-img-1 {
    width: 15%;
    position: absolute; left: 30px;

  }
  /*TITLES OF ARTICLE*/
  .index-links div {
    margin: 50px;
    margin-left: 225px;
    width: calc(100% - 450px);
    height: 150px;
    display: block;
    position: inherit; center: 0px
    padding-bottom: 5px;
  }
  p {
    font-size: 25px;
    color: black;
    font-family: 'Cormorant Garamond', serif;
    height: 80px;
    padding-top: 35px;
  }
/*SEE MORE BUTTON*/
  .see-more {
    margin: 50px;
    margin-left: 220px;
    border: 2px solid blue;
    padding: 10px 20px;
    width: 14%;
  }
}
/*TEXT IN ARTICLES*/
.articles {
  width: 75%;
  margin-left: 50px;
  display: block;
}
/*POSITIONING OF LINKS AND TEXT ON PHONE*/
@media screen and (max-width: 1000px) {
  .article-text {
    margin-bottom: 90px;
    position: relative;
    z-index: 1;
  }
  .article-links {
    margin: 200px 0px 0px
  }
  .article-links-instagram {
    margin: 400px 0px 50px;
  }
  .article-links-bandcamp {
    margin: 150px 0px 50px;
  }
}
/*POSITIONING OF LINKS AND TEXT ON COMPUTER*/
@media screen and (min-width: 1000px) {
  .articles {
    width: 65%;
    height: 100%;
    margin: 0px 200px
  }
  .article-text {
    margin-bottom: 90px;
    position: relative;
    z-index: 0;
  }
  .article-links {
    width: 65%;
    margin: 120px 100px 0px;
  }
  .article-links-instagram {
    margin: 300px 100px 50px;
  }
  .article-links-bandcamp {
    margin: 100px 50px 50px;
  }
}
/*TITLE OF ARTICLES*/
section h3 {
  font-size: 1.25em;
  color: black;
  height: 0%;
  padding-top: 5px;
}
section h3:hover {
  color: orange;
}
section h2 {
  font-size: 2em;
  text-align: left;
  text-decoration: none;
  color: black;
  padding-top: 120px;
}
section h1 {
  font-size: 2em;
  text-align: left;
  text-decoration: none;
  color: black;
  margin-left: 10px;
}
section h4 {
  padding-top: 25px;
  color: purple;
  font-size: 1em;
}
footer {
  background-color: black;
  padding: 40px 40px;
  height: 70px;
  width: calc(100% - 80px);
  overflow: hidden;
  list-style: none;
  line-height: 18px;
  position: relative;
  bottom: 0;
  z-index: 0;
}
footer li a{
  color: white;

sunfighter · Jan 21, 2021

Something to think about:
I don't like IFRAMEs. They were meant to be removed, but weren't. I believe they will be in the future. So not a good idea to use them. Also if the site your calling changes they break. IMHO it's better to copy what you have permission to use to your site and reference them there without IFRAMEs.

In the CSS you have set both max-width and min-width to 1000px. You need to change the max-width to something smaller.
You also set their value in the @media and I would suggest setting their defaults in the main section and use @media for width changes.

In the "sunny side up" area you have excess space to the right. Like it was an unused box, nothing in it.. You do need a volume control there.

Hope this gets you going.

lou-touyarou · Jan 25, 2021

Thank you for your reply! I have tried working on the elements you've mentioned, unfortunately I still encounter the same problems... I changed the iframes to objects because otherwise the link wasn't showing anymore, but they still overlap with the text. When I inspect my code on a browser, it shows that the div box surrounding my text is way shorter than the text itself, is there anyway for the divbox to kinda auto adjust to its content?
Thank you for your time

Is it possible an iframe can overlapp another?	3	Apr 20, 2022
Trying to add text into an editable div that is in an iframe	0	Dec 15, 2022
Align img inside nav tabs section	5	Dec 29, 2023
Why <link/> is not working?	4	Jan 1, 2020
Need help with code on website (noob)	2	Jul 18, 2022
iframe link target	5	May 2, 2014
How Do I Set text on an Image and use the image as a border?	7	Mar 16, 2023
Help with my responsive home page	2	Dec 14, 2022

Iframe link overlapping text

lou-touyarou

sunfighter

lou-touyarou

sunfighter

lou-touyarou

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads