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
