hide border if div is above

Question

I have a <div id="content"> with a border. Above this div is another <div id="header"> with some text. I would like to show text over border, but i don't want to display it.

For easier explanation i've posted my source code here: http://jsfiddle.net/4HSEn/ and this is what i would like to achieve:

enter image description here

Text will be dynamic and background will be gradient. So image is not a solution.

I know how to achieve this with fieldset and legend tags, but i'm looking for a solution with div or any other tag.

found something here: Is it possible to achieve a <fieldset>-like effect without using the <fieldset> tag? but for the legend was used background-color:#FFF, which does not help me very much :/

btw. Gradient background is not supported by IE9 http://caniuse.com/#search=gradient ..So maybe you need to use images. — Engineer, Mar 20 '12 at 18:47
I know that IE does not support many good stuff.. i will use css3pie :) — JercSi, Mar 20 '12 at 18:49
Just curious, what's the problem with the fieldset/legend tags? — j08691, Mar 20 '12 at 20:35
@j08691 If this is not really an actual fieldset, you'd be abusing the `fieldset` element for purposes it's not meant for! — Mr Lister, Mar 20 '12 at 20:38

score 2 · Answer 1 · answered Mar 21 '12 at 02:34

2

Untested theory, but perhaps you could give #header the same gradient background as body's background, then offset #header's background-position (using js) with the X and Y position relative to body?

Basically I'm suggesting a kind of masking effect.

EDIT: replaced #content with body, to be more in line with the OP's current code sample.

answered Mar 21 '12 at 02:34

Jace

3,052
2
22
33

I actually came quite close to the solution with JS. But then I gave up. I've updated jsfiddle (url in the question) with script which calculates which color do i need. If i will have time, i will complete the script and post my solution. +1 for idea – JercSi Mar 21 '12 at 20:52

score 0 · Answer 2 · answered Mar 21 '12 at 02:52

0

Why don't you push your content div up by setting the top position to a negative value:

<div id="header" style="background-color: blue;">Demo</div> <div id="content" style="top: -15px; border: 1px solid white"></div>

answered Mar 21 '12 at 02:52

arminb

2,036
3
24
43

score -1 · Answer 3 · answered Mar 20 '12 at 18:46

-1

Enclose your text in a <span style="background-color: blue;"> or something like that. That should work.

answered Mar 20 '12 at 18:46

uotonyh

786
5
7

1

He's going for a gradient background. A solid background-color would stand out against it. – Elliot Bonneville Mar 20 '12 at 20:34

hide border if div is above

3 Answers3