How to approach css design

On 2006-01-22 14:58:49 -0500, Chris Beall <Chris_Beall (AT) prodigy (DOT) net> said:

charlie wrote:

I posted this at Macromedia Dreamweaver newsgroup but go no response.

I've been trying to learn CSS. Below is a link to a couple of designs
that I managed to do using absolute position.

http://63.134.232.79/untitled-1.htm

http://63.134.232.79/blog4/default.htm

Now, how do I go about building a new css based site without using
absolute positions and allowing for the area (grey bordered box) to
expand with the content?
(snip)

charlie

charlie,

I think the reason you got no answers is that no one knows.

As Jim Moe pointed out, your design (which is very attractive, BTW) is
based on assumptions which are appropriate to print media, but not to
the web. This makes answering the "how do I do this?" question
difficult, if not impossible.

I don't want to discourage your kind of creativity though. So try to
ask yourself some questions about the variables and what should happen
if they change:
- Suppose the user makes the text larger? Smaller? What should the
resulting design look like?
- Suppose the user has a window that is 200px high and 300px wide?
What should the resulting design look like? Suppose it is 1200px high
and 1600px wide? (Sort of like saying, "How can I style this VW beetle
to have three rows of seats and room for 12 suitcases?")

Those are the two variables most likely to change, but you must
consider the others on Jim's list as well.

Until you have defined the desired behavior when the variables change,
you are not ready to start creating the page. A knowledge of CSS
(which you seem to rapidly be getting) will also warn you which
behaviors cannot be created with the current CSS functionality and
hence must be eliminated from your intended design.

Some concerns I see:
- You have fixed-size images which 'contain' text. In one case,
content.jpg, you've allowed for larger (or more) text via a vertical
scroll bar, but made no such allowance for the menu items that are
supposed to stay within menu.jpg. If the text is enlarged, it flops
outside the image.
- The scroll bar referred to above doesn't seem to work. In any
case, it represents a second scroll bar (besides the one for the
window) which can confuse the user, especially someone using a scroll
wheel on the mouse.
- Most of bg.jpg is hidden, but browsers will still download the
whole thing. The saving grace is that you've done a good job of
minimizing the image file sizes.

The biggest problem you will have implementing this design is that you
are using a PhotoShop construct, layers, in an environment that doesn't
support that construct well. Although you can use z-index to create
layers, you will run into problems when you try to positionally relate
things on one layer (a background) with those in another layer (the
menu text). Possible, perhaps, but not easy.

A better approach would be to think of things as being in a single
layer and consisting of a hierarchy of box-like 'container's. Which
objects are logically 'inside' which other objects? Are the inner
objects centered in their containing boxes? If not, what is their
spatial relationship? What is the logical relationship of sibling
boxes to each other (navigation precedes content, perhaps)? How can
you show that relationship in a large window (navigation above and to
the left of content, perhaps) and in a small one (navigation above
content), without introducing horizontal scrolling until the worst-case
squeeze?

z-index is useful to give priority to content over decoration. If the
window size is reduced, let boxes containing content obscure those
containing only decoration, so the content remains visible. If two
content boxes conflict (and cannot be stacked, giving each its own real
estate) let the most important one rise to the top.

The reason you aren't finding cookbook instructions for implementing
this kind of layout is that it is going to be, at a minimum, HARD.
Most folks deal with this by creating layouts that are easier to
implement.

Good luck,
Chris Beall

I spent some time trying different layouts. The link below seems to be
the best approach.

http://63.134.232.79/untitled-13.html

It renders correctly in Safari, ok in firefox except that it cuts off
the very bottom of the image of the girl with a camera, Internet
Exporer does not render the css table. I got the idea after reading
this page

http://www.456bereastreet.com/archiv...h_css_part_ii/

So,

I don't care about IE 5 but I do care about IE 6. Is there a fix? If
not, is there another approach for the "content container with a left
and right container"? And footer?

Almost forgot, I need the header to be over the menu so I can add the
javascript for the buttons. I did add z index but it has had no effect.

thanks,
charlie