PDA

View Full Version : Overlapping DIV Tags

Lypheus
06-22-2007, 04:36 PM
Alright, so I'm trying to make a page where I have overlapping divs. Basically, I want a block of text that has sections "highlighted". The problem is that some highlighted sections may overlap one another.

As an example, say I have just two regions to highlight, denoted by @ and *.

The red fox *jumped over the green @moon and* landed on the blue@ cow.

So as you can see above, I would like to see *jumped ... and* as a single highlighted block and @moon ... blue@ as another, the problem is that the start @ tag gets matched to the * end tag so instead I have "moon and" highlighted and the one big div for "jumped ... blue".

Try the following to see what I mean (code at bottom of post).

Ok so things I have tried: Z index (makes no diff as the problem is in matching start/end tags), putting an "id" attribute in the ending tag (does not seem to be supported).

I realize theres a solution here by generating multiple sets of tags to simulate an overlapping behaviour, but its not what I'm looking for (if this is the only approach I'll have to disallow multiple highlights or overlaping highlights at least).

Any ideas?


<style type=text/css>
#test
{
outline-style: dashed;
border-width: 1px;
background: #FFFDAD;
display: inline;
}

#test2
{
outline-style: dashed;
border-width: 1px;
background: #000AAA;
display: inline;
}
</style>

<html>
<body>
The red fox <div id="test">jumped over the green <div id="test2">moon and</div> landed on the blue</div> cow
</body>
</html>
blueskyz
06-22-2007, 04:46 PM
Not sure what context you want to use this in or what you want to do precisely, but you could try creating a third div for overlapping styles...

e.g.

<style type=text/css>
#test
{
outline-style: dashed;
border-width: 1px;
background: #FFFDAD;
display: inline;
}

#test2
{
outline-style: dashed;
border-width: 1px;
background: #000AAA;
display: inline;
}

#overlap{
outline-style: dashed;
border-width: 1px;
background: #000AAA;
display: inline;
}
</style>

<html>
<body>
The red fox <div id="test">jumped over the green <div id="overlap">moon and</div><div id="test2"> landed on the blue</div> cow
</body>
</html>



Also i would recommend changing your div tags to spans
Lypheus
06-22-2007, 04:58 PM
Thanks for the quick response.

Just curious, what is the advantage of SPAN over DIV in this case?

To try an clarify what I'm doing here, I want two div/spans, that each highlight a seperate region of text ... the problem is they overlap, so I have a situation like this:

The red fox *jumped over the green @moon and* landed on the blue@ cow.
................|----------------------------------|
..................................................|------------------------------|

So as you can see above, thats the desired output (span regions) that I want, but whats happening is:

The red fox *jumped over the green @moon and* landed on the blue@ cow.
................|------------------------------------------------------|
..................................................|----------|

This is not what I want, and it appears to happen because the second start tag is using the first span/div's end tag to terminate the span/div definition.
blueskyz
06-22-2007, 05:15 PM
Divs are a block level element and span is inline, generally speaking you should use span to style text



you are correct about why the method you are using isn't working. all tags should be correctly nested, (think of them like containers) so you'll need to use three id's to achieve the effect you are looking for.

put another way, what would happen to the background-color of your divs(spans;) ) in the overlapping area, how would a browser know how to render it?
Lypheus
06-26-2007, 12:22 AM
Ya thats what I figured.

Personally, if it was my browser implementation I would allow for a id tag in both the start and end tags, something like:

<div id="one">
<div id="two">
</div id="one">
</div id="two">

For overlap's with colours, it would just be a hatched colour (i.e. 1st pixel from div"one" second pixel from div"two" third pixel from div"one" etc...) or the average for each RGB colour.

Actually, what does the browser do if someone uses CSS to offset a div and overlap it now? (i.e. topX = -25 or whatever the syntax might be).

Alright, I'll have to be satisfied with another approach here I guess .... probably going to use innerHTML for the body to dynamically insert div blocks as they mouse over a comment ... maybe another question coming up soon after I try that one :).