PDA

View Full Version : css opacity & white space????


tony09uk
09-29-2011, 10:32 PM
I have watched and tried a tutorial from youtube regarding css3 opacity, it was really helpful. It quickly helped me out of a problem, but now i'm stuck in another and don't know where to start with my search.

I have input my opacity div and relevant css and the content div below it. I have applied the css to move the text and images up and create the illusion of it sitting inside the opacity div-

position:relative;
z-index:2;
top:-240px;
width:840px;

it works perfectly, except when I add an additional div below the content div. I find there is unwanted white space between the div which I pushed up 240px and the new div which I have placed below it. How do I get around this issue please?

Many thanks

Tony09uk

domedia
09-30-2011, 02:06 PM
Remove the white space.

J/k, but seriously speaking provide link.

tony09uk
09-30-2011, 09:06 PM
This is the link (http://elementsclassroom.com/newlayout.html) to the page.
But I have not uploaded the images including the background image (in the name of speed). You will get the idea of what I am trying to get at, if we use the box headed "related items" and the box below and above it as the examples to work with.
I have tried everything I can think of and am now stumped!

PS I know there is a lot of work required to make the page look a lot better but ive just got really caught up on this right now :s

johnMoss
10-01-2011, 09:03 PM
Have you tried a negative bottom margin equivalent to your negative top to compensate? That was a just curious answer... :)

tony09uk
10-01-2011, 10:58 PM
i have tried a negative bottom but never even considered a negative margin. I think one of my main problems with this page is im trying to conform to what i understand as best practice in an attempt to push my knowledge so ive possibly missed potentially obvious solutions in the effort to stick to best practices

johnMoss
10-02-2011, 12:37 AM
Can't argue your M.O. Whatever div you have following the whitespace, how bout putting it inside the n-margined div? You can still style it, and that will resolve your whitespace... Workable solution for your layout?

tony09uk
10-02-2011, 06:35 PM
John, thanks for the idea, I have applied negative margins to a few div and it has worked. Putting a couple of my items within another div was workable.

I would be interested to know weather this is standard practice or a hack though? any ideas?

johnMoss
10-02-2011, 06:53 PM
The only beef I have run into using negative margins are slight variations between FF & IE as to alignment. This was overcome by using reset css to clear everything out. I wouldn't doubt there is a more elegant way to address this, & perhaps tomorrow the others may chime in on this. The bottom line is though that if it tests out on multiple browsers, you're good to go.
I would think the appropriate manuever would be to size your divs only as needed in the flow, and then float subsequent divs sized accordingly to fill up the empty space. When you can't do that for whatever reason, negative margins come in to play. I see them used quite a bit...

gentleone
10-02-2011, 08:00 PM
Putting your styles before the doctype won't do any good also. Put them in an external stylesheet and link to it from within your head.

Re your problem is that your related items txt div is not in the related items div, so that space you see there is your empty related items div (height 200px).

On a side note... that related items txt div is an overkill anyway, because that related items div is enough to hold the text.

tony09uk
10-02-2011, 10:28 PM
John I have used a reset file so hopefully that should cover that problem, the page I put up is a little different to the one i'm having trouble with, in the sense that the "real" page does have an external style sheet, I only put it up as on item as a result of....i hate to say it.... laziness (it was late for me:s).

Gentle, thanks for your feedback. The reason I have had to create to DIV for the related items is because when I used the opacity command (if that's the right word?) it also affects the child div's. If you are referring to putting the related items into the navigation bar, I have kept them separate because it a non related item and wont always be there.

gentleone
10-03-2011, 08:20 AM
Gentle, thanks for your feedback. The reason I have had to create to DIV for the related items is because when I used the opacity command (if that's the right word?) it also affects the child div's. If you are referring to putting the related items into the navigation bar, I have kept them separate because it a non related item and wont always be there.
In your code I see this:

<div class="relatedItems">

<!-- end related items --></div>
<div class="relatedItemsTxt">
<h4>Related items</h4>
<ul>
<li><img src="../images/image.gif" width="26" height="22" alt="photoshopelements image icon" /><a href="#">Image</a></li>
<li><img src="../images/pdf.gif" width="26" height="22" alt="photoshopelements pdf icon" /><a href="#">Pdf</a></li>
<li><img src="../images/quiz.gif" width="26" height="22" alt="photoshopelements quiz icon" /><a href="#">Quiz</a></li>
</ul>
<!-- end relatedItemTxt --></div>
You see that your relatedItems div is empty and in your css that div has a height of 120px, so that annoying space you have there is that 120px.

EDIT: I see now what you did... you've moved the relateItemTxt div up with a negative top margin. Not necessary... Use the technique below!

Another tip if you want an opacity on a parent element and you don't want the children to inherit the opacity value, it's better to use rgba.
Example in your case (I left out all your other properties just for this example):

.container .relatedItems {
background-color: #bfbfbf;
background-color: rgba(191, 191, 191, .73)
}
191, 191, 191 is the rgb value for your background color (http://css.coloratum.com/#%23bfbfbf) and the .73 is the alpha (a) transparency value.
I left the hexadecimal value in the css as well for browsers that don't support rgba (IE8 and below). They will just ignore the rgba value and will get a plain background color.

If you want that these older and less capable browsers need also a transparent background, then you can make a transparent png as fallback. You will then get something like this:

.container .relatedItems {
background: url(path/to/transparent.png);
background: rgba(191, 191, 191, .73)
}
Downside with this method is that browsers that do support rgba will also download that transparent png, so there is an unnecessary http request for those.

You can solve this by including modernizr.js (http://www.modernizr.com/) in your head. Modernizr adds (in the background... to the DOM) classes to the HTML tag, so for browsers that don't support rgba it wil add the class no-rgba to the HTML tag.
So your fallback solution will then be this:

.container .relatedItems {
background: rgba(191, 191, 191, .73)
}

.no-rgba .container .relatedItems {
background: url(path/to/transparent.png);
}
Okay, I hope this rgba lecture was useful to you or anyone else :) and I want to mention one more time. You have your CSS styles above the doctype. There is nothing allowed above the doctype (except server side scripts I guess). Put your styles in between the head tags where they belong.

tony09uk
10-03-2011, 10:39 AM
Thanks, I now see your point about the styles, obvious mistake! I will go and have a play with that now :)