R
Roy
I'd like to create a web page that highlights sections of text with
different background colors. The sections can overlap. I tried span
tags at first, but that broke down depending on how the sections
overlapped. Combining CSS positioning with xmlns sounded like a
promising solution to the problem.
What I've come up with gets the job done, but it involves creating a
copy of the text for each background color (2 colors --> 2 copies, 3
colors --> 3 copies, N colors --> N copies). An example page is
included below. Is there a more efficient way to do this?
Thanks,
Roy
<html xmlns:myns>
<style>
@media all
{
myns\:thetext { position:absolute; top:0; left:0;}
myns\:bg1 { background:rgb(80%,80%,80%); z-index:1;}
myns\:bg2 { background:rgb(0%,80%,80%); z-index:2;}
}
</style>
<head>
</head>
<body>
<!-- Since 2 colors, the same text appears twice, with the tags in
different spots -->
<myns:thetext>
<myns:bg1>This sentence has two sections with</myns:bg1> nonwhite
backgrounds.
</myns:thetext>
<myns:thetext>
This sentence has two <myns:bg2>sections with nonwhite</myns:bg2>
backgrounds.
</myns:thetext>
</body>
</html>
different background colors. The sections can overlap. I tried span
tags at first, but that broke down depending on how the sections
overlapped. Combining CSS positioning with xmlns sounded like a
promising solution to the problem.
What I've come up with gets the job done, but it involves creating a
copy of the text for each background color (2 colors --> 2 copies, 3
colors --> 3 copies, N colors --> N copies). An example page is
included below. Is there a more efficient way to do this?
Thanks,
Roy
<html xmlns:myns>
<style>
@media all
{
myns\:thetext { position:absolute; top:0; left:0;}
myns\:bg1 { background:rgb(80%,80%,80%); z-index:1;}
myns\:bg2 { background:rgb(0%,80%,80%); z-index:2;}
}
</style>
<head>
</head>
<body>
<!-- Since 2 colors, the same text appears twice, with the tags in
different spots -->
<myns:thetext>
<myns:bg1>This sentence has two sections with</myns:bg1> nonwhite
backgrounds.
</myns:thetext>
<myns:thetext>
This sentence has two <myns:bg2>sections with nonwhite</myns:bg2>
backgrounds.
</myns:thetext>
</body>
</html>