I am designing a site that has a semi-transparent container for the content, which is divided into two columns. My CSS:
#content {
width: 80%; margin-left: 10%; margin-top: 25px; margin-bottom: 25px;
background-color: rgba(256,256,256,.6); box-shadow: 0 0 6px}
#sidebox {
width: 25%; padding-left: 2.5%; padding-right: 2.5%; float: right;
background-color: #FFF}
#main {
width: 65%; padding-left: 2.5%; padding-right: 2.5%; float: left}
The HTML for embedding the video:
<div id="content">
<div id="sidebox">...</div>
<div id="main">
<div class="post">
<a name="song" />
<p class="title">New song!</p>
<p class="date">Posted January 16, 2013</p>
<center>
<iframe width="480" height="360"
src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />
</center>
</div>
</div>
</div>
I put some static stuff in the sidebox and then make news posts to the main div. If I embed a video in an iframe in main, then the semi-opaque background from content (as well as the drop-shadow) doesn't render. I found a lot of solutions geared towards what to do if you want to overlay a div on an iframe, but nothing about putting an iframe in a div container screwing up the styling of that container.
The website, which currently has the video embedded: http://physics.nyu.edu/~dzb212/music_index.html
I noticed some strange behaviors arising from my use of
<a href="blah" />
kinds of statements in my HTML. I was under the impression that<[stuff] />
was the same as<[stuff]></[stuff]>
, and that it was just a convenient shorthand for an element that contained nothing else. However, I don't know if this is true, and I found that huge chunks of text were unexpectedly being moved into<a>
elements. I therefore changedto
and all seems to be displaying correctly. I no longer even need
display: inline-block
in the content styling.Thanks for your help.