How to approach css design

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?

I 've read serveral books. All of them seem great for 2 and 3 column
design but what if I want to do designs like this?

I guess what I'm looking for is a tutorial or help that will walk you
through what to do after you create a design in Photoshop.

For example,
1. For a fixed center design create a wrapper.
2. Create a div for each of your elements ie, header, left content,
right content, footer,etc
3. ?

charlie

charlie wrote:

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

This is a basic two-column layout. What's the problem?

You are treating the WWW like a print medium. This is a grave mistake.
About the only thing you control on a web page is content.
You cannot control:
- font
- font size
- color
- screen resolution
- viewport size
You can suggest some of these things with CSS. But the visitor has
ultimate control.
As you have noticed, using position:absolute for everything is a
generally bad plan. Especially since you have created such a rigid
structure. Any change (try changing your browser's font size) and your
layout starts looking sloppy.

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?

Do not use an image background for borders. Inherently inflexible. Use

the CSS "border" property.
Do not specify the "height" property. That automatically freezes the layout.

I 've read serveral books. All of them seem great for 2 and 3 column
design but what if I want to do designs like this?

Here's a place to start: <http://www.w3.org/2002/03/tutorials

I guess what I'm looking for is a tutorial or help that will walk you
through what to do after you create a design in Photoshop.

Photoshop is a terrible tool for creating web pages. It is for

manipulating images.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

charlie wrote:

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

Yeah, not too surprising.

It is possible to write clean HTML with supporting CSS with Dreamweaver.
But it is not an easy transition from what I hear.

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

Use HTML 4.01 Strict for all new documents. Transitional is meant as an

intermediate step for converting legacy pages to HTML v4.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Thanks for the reply, I think. Like I said, I've read serveral books
on CSS and certainly from doing html I know the difference between
print and the web. I could do the layout tables. I have read the
tutorials at w3.org. The tutorial remind me of the books, except I
didn't have to pay for the w3.org tutorials.

I don't use Photoshop for creating web page. I use Photoshop for
creating the design. I could have easily used a piece of paper. So
the question is still how to approach the layout using CSS.

Thanks,
Charlie




On 2006-01-21 16:59:27 -0500, Jim Moe <jmm-list.AXSPAMGN (AT) sohnen-moe (DOT) com> said:

charlie wrote:

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

This is a basic two-column layout. What's the problem?

You are treating the WWW like a print medium. This is a grave mistake.
About the only thing you control on a web page is content.
You cannot control:
- font
- font size
- color
- screen resolution
- viewport size
You can suggest some of these things with CSS. But the visitor has
ultimate control.
As you have noticed, using position:absolute for everything is a
generally bad plan. Especially since you have created such a rigid
structure. Any change (try changing your browser's font size) and your
layout starts looking sloppy.

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?

Do not use an image background for borders. Inherently inflexible. Use
the CSS "border" property.
Do not specify the "height" property. That automatically freezes the layout.

I 've read serveral books. All of them seem great for 2 and 3 column
design but what if I want to do designs like this?

Here's a place to start: <http://www.w3.org/2002/03/tutorials

I guess what I'm looking for is a tutorial or help that will walk you
through what to do after you create a design in Photoshop.

Photoshop is a terrible tool for creating web pages. It is for
manipulating images.

I will try to find a better CSS editor for the Mac.

Thanks for the note on using HTML doc types.

Charlie

On 2006-01-21 17:10:53 -0500, Jim Moe <jmm-list.AXSPAMGN (AT) sohnen-moe (DOT) com> said:

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

Yeah, not too surprising.
It is possible to write clean HTML with supporting CSS with Dreamweaver.
But it is not an easy transition from what I hear.

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

Use HTML 4.01 Strict for all new documents. Transitional is meant as an
intermediate step for converting legacy pages to HTML v4.

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

charlie wrote:

I will try to find a better CSS editor for the Mac.

You missed the point. Dreamweaver is one of the better WYSIWYG tools.

It, however, is designed to hide the nature of web design from print
designers, reducing the need for print designers to learn something
significantly different from their previous experience. Two of its modes,
table layout and absolute positioning, are a poor match to the web.
I know little about Dreamweaver. Users claim that it is possible to do
layouts with it that produces clean HTML. They also mention it is not
straightforward.
The limitations of Dreamweaver, Frontpage, GoLive, Nvu, etc., are why
most web designers work with a programming editor (with syntax
highlighting) instead. (Although I hear great claims for HTMLKit.)

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

charlie wrote:

Thanks for the reply, I think. Like I said, I've read serveral books
on CSS and certainly from doing html I know the difference between
print and the web. I could do the layout tables. I have read the
tutorials at w3.org. The tutorial remind me of the books, except I
didn't have to pay for the w3.org tutorials.

I suspect that you do not know much about HTML. Rather you know about

Dreamweaver.
If, having read books and tutorials and you are still finding CSS
mysterious, you need to take a step backward and learn HTML.

I don't use Photoshop for creating web page. I use Photoshop for
creating the design. I could have easily used a piece of paper. So
the question is still how to approach the layout using CSS.

In general the methodology is not so much different from any other

layout medium. You start with the basic markup using HTML. Then start
applying presentation using CSS.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

In article <2006012210004875249%cschabb@msncom>,
charlie <cschabb (AT) msn (DOT) com> wrote:

I will try to find a better CSS editor for the Mac.

You could check Stylemaster from http://www.westciv.com/ which is
available for Macintosh and also Windows. I don't own a copy myself
(yet) but it was the most comprehensive of the CSS editors I tested on
my Mac. Includes a course and tutorial on CSS. Plus the author seems
well known as a CSS advocate and enthusiast.

It warns you when you try constructs that will not work with certain
browsers, so you can do a certain amount of testing browser limits well
before trying the results in a wide variety of actual browsers. I am
thinking that feature alone almost makes it worthwhile (given the
problems I continue to have with Windows IE failing to render my pages
in an even passable manner).

--
http://www.ericlindsay.com

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

Thanks for your candid response. I did purchase Stylemaster and will
begin trying to layout the pages using CSS. Who doesn't love a
challange.

charlie