[Gimp-web] New page layout and new menu

[Raphaël Quinet]

On 28 Aug 2003 15:07:02 +0200, Henrik Brix Andersen <brix@gimp.org> wrote:
> On Thu, 2003-08-28 at 14:23, Raphaël Quinet wrote:
> > Please have a look at this test page:
> >   http://www.gimp.org/~raphael/web-gimp/mmmaybe/newlayout.html
> > Compare it with the original version:
> >   http://mmmaybe.gimp.org/unix/
> 
> Looks good in Mozilla-1.4, Mozilla-Firebird-0.6.1, Lynx-2.8.4rel1.

Thanks for testing!

> > The changes include:
> > - Support text-based browsers by providing them with a nicer layout
> >   for the menu, and the opportunity to skip the menu and jump to the
> >   page contents (so that you do not have to go through all the links
> >   one by one).  This is based in part on the suggestions from Stefan
> >   Huszics in bug #120667.  Take a look at my test page using Lynx,
> >   Links or w3m and you will see how it works.
> 
> Good job - wish more sites had this kind of "skip to contents" links...

Implementing this was not really trivial.  Well, the "skip to
contents" link was easy: I just had to assign the style "display:
none;" to that paragraph so that it does not show up in CSS-supporting
browsers, but shows up in text-based browsers.  But another part of
the work was about allowing the menu to flow differently in text-based
browsers and in graphical browsers using CSS.  In order to do this
(and for other reasons such as allowing the page to be rendered
faster), I decided to replace the big table that was enclosing the
whole page by pure XHTML with CSS positioning.

That was a bit more tricky.  With a table, it is easy to get the
background color of a cell (such as the one containing the menu) to
extend until the end of the table.  This is the default, in fact.
Also, the width of one cell is automatically adjusted when its
neighbors get wider or narrower.  But using CSS positioning, this does
not work because a <div> using absolute positioning has no idea of the
width or height of its siblings.  That's why I added a bit of
JavaScript that adjusts the height of the menu and the left margin of
the body of the page.  To see what this function does, try reloading
the page with scripting disabled (or copy the page and edit the script
stuff out).  Since I had started writing some dynamic HTML, I decided
to continue and I added another function for toggling the visibility
of the menu.

So it is possible to replace tables by strict XHTML code, but in some
cases this requires more complex code.  In the end, the page looks
very similar to what it was earlier, but I had to rewrite most of the
XHTML code from scratch.  Anyway, I like the result so I don't think
that I wasted my time.

> > - Better support for Netscape 4.x.  The pages are still looking bad in
> 
> I haven't had the opportunity to test with older netscape versions - but
> I take your word for it.

Well, it does look bad - you can take my word for it.  ;-)

And in order to reduce the brokenness to a minimum, I had to use a
table for the title bar.  This means that I had to switch to XHTML 1.0
Transitional instead of XHTML 1.0 Strict (because of the deprecated
"bgcolor" attribute, among others), but this makes a big difference
for NS4.  Without this, the left and right images are placed on top of
each other.

> > I would like to implement this tomorrow (or something similar,
> > depending on the feedback I get).  My goal is to have the new site
> > ready before Monday, so I will also work on some of the other open
> > bugs in the meantime.
> 
> Sounds good to me - I say go ahead.

I will wait until tomorrow so that others have a chance to comment.
Thanks for your feedback!

-Raphaël