At 11:11 PM 8/8/2006, Pamela Jones wrote:
Thanks for your reply, Paul. I'm not sure I understand what you mean.
My problem is not so
much with the visibility, stacking them in the right order will
work, it's more a matter of I don't
know which elements / DIVs to attach them to because you can't
attach more than one background
image to an element. To be a bit more clear, you can see the design
at http://www.creatingascene.com.au/design.html.
The background elements are the hand drawn blue lines that intersect
at the top of the page (this I've attached
to the containing div that has the thick blue border) as well as the
two scribbled areas - blue on the bottom
left and yellow on the bottom right. I'm not sure what to attach
those to without changing the HTML
specifically so that I can attach a background image.
Interesting page, Pamela. In order to figure out the best
arrangement of background images, you'll need to describe what
happens when the user resizes their browser text. Do all three
columns and the outermost container expand both horizontally &
vertically with font size? Do you have the basic page marked up as
HTML that we could see in action?
I can imagine the two scribbles (lower left & right) staying flush to
the bottom and to each its side of the outer container.
I see the vertical blue line shifting to the right, as font size
increases, in order to remain between columns 2 & 3.
The complicated bit is the horizontal blue line that changes to light
blue where it intersects with the dark blue box at upper left. As
that dark blue box widens, I would expect more light blue line to be
exposed, sliding in from the left side. The point that must be fixed
is where the blue line enters the blue box (at coordinates 170x76 in
your page mockup gif). That point of intersection will remain
constant even as the dark blue box and the outer container expand horizontally.
I visualize the markup like so:
- outermost container with blue border. The background image =
horizontal blue line across the top + the blue scribble bottom
left. This image extends both farther to the right and lower than
the normal-sized page, so that more blue line and scribble will be
exposed as the box expands. The background is positioned left top so
that the intersection point with the blue box can remain fixed.
- an inner container, background = the vertical blue line, positioned
in ems from left so it stays between columns 2 & 3.
- header block, the same width as column 1 and coming down to the top
of column 1, containing the page headline.
- column 1, containing the blue boxes. The background image for the
top dark blue box is positioned right top and is much wider than the
normal size, so that as the box expands laterally more of the
background is exposed at the left edge. This keeps the intersection
point with the horizontal blue line fixed.
- column 2.
- column 3, with a left & bottom margin that shows the yellow
scribble background image.
That would be my first draft, anyway! I'll be interested to see how
you've marked up the page. With some further thought it might be
possible to eliminate that inner container. If present it would be
semantically neutral, but it wouldn't exist in the most elegant of solutions.
Paul
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
