Files on their way - Mailing list pgsql-www

I've sent the files on their way to Andreas. I'm not foreseeing any
huge problems, but there are some things I'm concerned about and would
like to address. But perhaps a brief description of what I did will
make things a little clearer.

The great benefit of separating the presentation and content is that
you can use the XHTML file to define the document structure and the CSS
to dress it up, very much along the lines of using SGML and DSSSL. So I
looked at the page structure to think of a way to describe it.

There's the banner, consisting of the PostgreSQL masthead between two
ads. The masthead includes two images (PostgreSQL and the logo) and a
group of links arranged horizontally, and a background image to give
the striping.

There are two sidebars bracketing the page content. Each sidebar
includes a number of sections, such as the User Survey, Current
Versions, the Language selector.

In the most recent test*.htms, two boxes highlighting Latest News and
Upcoming Events have been placed at the top of the content section.

Though there are other ways to do this, I thought the most
straightforward was to use a very simple table structure to structure
the whole page. There were two primary reasons I choose the table: it
helps maintain the two sidebar columns perfectly below the ads, and it
provides an easy way to provide the gray background (using margins and
setting the body background color to gray). (As we'll see, this wasn't
the best choice, but one that we have a variety of ways of working
around.)

So I chose a three-row table consisting of four columns. The first row
is the banner. Each ad is in it's own cell, the PostgreSQL masthead and
the link bar are in another (with the links in their own div,
id="bannerlinks", and the logo is in it's own cell.

The second row is pretty straightforward: left side in a cell, content
spans the next two, and the right side in the final cell. The third row
is the blue link bar on the bottom. The first cell includes "top", and
the other links are in a 3-cell span.

That's it for the tables. The "cells" in the sidebars are divs. Each is
id'd so they can be specifically selected via CSS, but I only used that
in a two cases: survey and gborg, because (in this version: Andreas'
latest examples don't include this) I wanted to tweak the <form> and
<ul> presentation in ways that may not be appropriate elsewhere.

The Latest News and Upcoming Events boxes are also divs set to float
left and right, respectively. This might cause some problems, as some
earlier browsers might not handle float well, but I wanted to get some
feedback first.

(Similarly, Netscape 4 in particular might —okay, probably will—royally
screw up this page. Netscape 4.x was released before CSS really got
going, but late enough that it tried to implement it. However there's a
way to keep the  CSS Netscape 4.x chokes on beyond it's reach, while
making sure later browsers that can handle it can read it. I haven't
done this yet, as I haven't tested it in Netscape. But it's something
definitely doable and worth doing. Just haven't done it yet.)

I think that pretty much covers it. I did rewrite some of the other
markup using your standard <p> and <h#> tags, and I used lists, both
<ul> and <dl> where I thought appropriate. Recently I've started using
<dl> more because it has the semantic meaning of holding the <dt> with
the <dd>. For example, I used them in the International and Websites
sections, as the blurb under each headline can be viewed an explanation
or description of the subsection. If you disagree, not a big deal. The
same presentation can be accomplished using <h#> and <p> (or any other
tags, for that matter). And I think I need to zero out the left margin
and left padding on the <dl>s in these sections, as the <dd>s don't
look properly centered. And another place I used a <dl> and need to fix
is in the points outlining the benefits of using PostgreSQL: a
straightforward <ul> would have given me the bullets (list-style: disc)
by default. Another way to fix this is in the CSS, by adding a rule
along the lines of

#content dl { list-style:disc }

Besides removing a bunch of nested tables and presentation markup, I
also got rid of a lot of <br /> tags, as the CSS gives us much more
control over things like paragraph spacing and headline margins.

Two things that jump out at me and need to be fixed/resolved:

1. Switching to German caused the right sidebar to gain some
not-so-nice width because longer German words wouldn't break and caused
the cell to widen beyond the 120px I defined it. (Of course this isn't
German's fault. Just a failing of the design in handling long words.)
Looking at the corresponding test*.htm, the current site isn't strict
about keeping the side columns exactly below the ads. One solution
would be to break the design into two tables: one for the banner (one
row, four columns), and one for the rest (two rows, three columns). A
few small modifications to the CSS, and we're good to go. Drawback:
lose the nice continuity along the sides. Practically, not really a
drawback.

2. When the browser window is narrower, the bannerlinks flows into a
second line. The result is white space under the ads (changeable to
another color, of course—blue might make this less obvious), and an
interesting background image effect. I haven't played with this enough
to find a solution. One of course is to just absolutely define the
width. My personal preference is to let the site flow as much as
possible, trying to find a solution that doesn't cause the image-repeat
problem. With an absolute width there might be problems with narrower
browser windows.

There are some smaller style things that I'd want to change as well,
but it's just personal preference and easily changed in the CSS.

What do you think? Any serious breakage problems?

Michael