logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 09-29-2011, 09:32 PM   #1
tony09uk
 
Join Date: Oct 2010
Posts: 340
Default css opacity & white space????

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
tony09uk is offline   Reply With Quote
Old 09-30-2011, 01:06 PM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Remove the white space.

J/k, but seriously speaking provide link.
domedia is offline   Reply With Quote
Old 09-30-2011, 08:06 PM   #3
tony09uk
 
Join Date: Oct 2010
Posts: 340
Default

This is the link 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
tony09uk is offline   Reply With Quote
Old 10-01-2011, 08:03 PM   #4
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

Have you tried a negative bottom margin equivalent to your negative top to compensate? That was a just curious answer...
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 10-01-2011, 09:58 PM   #5
tony09uk
 
Join Date: Oct 2010
Posts: 340
Default

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
tony09uk is offline   Reply With Quote
Old 10-01-2011, 11:37 PM   #6
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

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?
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 10-02-2011, 05:35 PM   #7
tony09uk
 
Join Date: Oct 2010
Posts: 340
Default

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?
tony09uk is offline   Reply With Quote
Old 10-02-2011, 05:53 PM   #8
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

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...
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 10-02-2011, 07:00 PM   #9
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 10-02-2011, 09:28 PM   #10
tony09uk
 
Join Date: Oct 2010
Posts: 340
Default

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.
tony09uk is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:34 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com