Jump to content
Assamita

DIV transparency and margin top

Recommended Posts

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 by Assamita

Share this post


Link to post
Share on other sites

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 by Deirdre's Dad

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...