Jeff Reid wrote:
>Followed *most* of your suggestions Zoe as closely as I could given the
>circumstance of the design. I think it worked out well (except for making
>the font bigger which will break the design as it is).
But it doesn't have to break the design. You need to reconstruct some
things to make that happen. Instead of using one big background image
for the container div, slice up that image and layer the pieces on top
of each other.
First off, remove the lines dividing your links from the background
image. Instead, use borders to create these lines so that as the text
is resized and moves, the lines move with it.
Second, remove the gray border of the sidebar from the main background.
Slice the top of it together with the OLP logo and stick this first in
the sidebar div. Then give the div gray left and right borders that line
up with the portion of the borders included in the OLP image. Then slice
the rounded bottom of the sidebar and apply this as a background image
of the sidebar div. Set it to not repeat and to display at the bottom.
It will take some playing, but this is the basic idea to make your
design flexible. Now as the text grows in height, the borders will too,
and the rounded bottom will get pushed down, keeping the text visually
contained instead of overflowing.
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/