DIV transparency and margin top

[Assamita]

Hi everybody. First of all, this is my very first post, and I wanted to congratulate and thank the creators of this site. It's really really helpful and I've been using it for a long time before even needed to post. I'm working on a music band site. It will look like a bandcamp site, but I want to be able to add/remove/modify/personalize everything. I'm just using a free web hosting for testing, and the code is still rough, but it's only to see how it looks like. The URL is: http://costarica.myartsonline.com/tdr/ My first two problems are with the "main" body part. I've created a DIV with a transparency so you can see the background image, but I want only the "box" to be transparent, not the content. You can see the code by clicking on the right button: View source code. For now, the file is really short, and I haven't used a separate CSS file (again, it's just to see how it looks like). The second one is the top and bottom margin of that main body box. I've used a DIV layout inside the main one, cause the content was too stuck to the left, but there's probably a better way to do it. I'm open to suggestions. The thing is that I can't manage to leave a top and bottom margin, unless I use the <br> tag, which I don't like. The margin-top and margin-bottom parameters don't seem to do anything in any of the DIV's style parameters (I've tried in both of them).

 .transparent {background-color: #F4F3F3;height: 1000px;width:1000px;zoom: 1;filter: alpha(opacity=50);opacity: 0.5;margin-left: auto ;margin-right: auto ;border-radius: 5px;box-shadow: 3px 3px 3px #000000;}<div id="body2" class="transparent"><div id="body3" style="height:auto;width:950px;margin-left:auto;margin-right:auto;"><br><br>(...)</div></div>

Thank you

Edited April 25, 2013 by Assamita

[jeffman]

Try using rgba color for your background instead of opacity. EDIT: Note that a lot of elements have a transparent background by default, so you may need to give them a background color. Also, I'm not at all sure how this is going to work with your iframe.

Edited April 25, 2013 by Deirdre's Dad

[dsonesuk]

rename transparent to something else, and define size and margins to this container, and add position relative. move the transparent container inside this outer container, BUT! outside the container containing iframe, use position absolute and left right propeties

<div id="body2" class="outer"><div class="transparent"> </div><div style="height:auto;width:950px;margin-left:auto;margin-right:auto;" id="body3"><br><br><iframe width="300" height="410" frameborder="0" allowtransparency="true" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=1338672418/size=grande3/bgcol=FFFFFF/linkcol=898989/transparent=true/" style="position: relative; display: block; width: 300px; height: 410px;">&amp;lt;a href="http://thedestroyedroom.bandcamp.com/album/the-first-four-years-box-set"&amp;gt;The First Four Years Box Set by The Destroyed Room&amp;lt;/a&amp;gt;</iframe></div></div>

.outer {	height: 1000px;	margin-left: auto;	margin-right: auto;	position: relative;	width: 1000px;} .transparent {	background-color: #F4F3F3;	border-radius: 5px 5px 5px 5px;	bottom: 0;	box-shadow: 3px 3px 3px #000000;	left: 0;    zoom: 1;    filter: alpha(opacity=50);	opacity: 0.5;	position: absolute;	right: 0;	top: 0;}

You may have to use z-index (z-index:0;) to force the transparent container behind the iframe container, in some browsers.

[Assamita]

Hi, thank you both for your answers. The first one seemed to work better. How about the margin thing? I still can make the content to have a space at the margins.

[Assamita]

Nevermind, I already found the solution. I was using margin-top, when I had to use padding-top. Thank you anyway