Re: Header in HTML problem?

Hello Jukka,

Your points were well taken. I have now done my best to apply your
suggestions. I still have some issues with what I did so to my limited
knowledge.

I do have it looking the way I want it in IE (but it does not render
properly in Firefox or Opera). You can see the new draft version at
http://www.usernomics.com/ergonomics-products-store.html .


It seems to me that the currently intended design of the page
essentially has just a list of links (to categories, which probably
contain product info on some class of stuff) in _three_ ways: the
"Categories" menu on the left, the images, and the "Browse Category"
pseudo-buttons below the image. And it seems that you would add a
_fourth_ set of links to exactly the same pages, by adding names of
categories above the images.

I have removed the extra set of links. I completely agree.



Now that's really bad usability - on a page that sells usability
products! Remove the redundant links. Less is more. It's quite
enough to have one set of links. Each link could be a simple div
element, with an image and category name under it. Simple and clean:

<div class="link">
<a href=""><img ...><br>
<span class="caption">Category name</span></a>
</div>


I used your model and have the caption and category as I was trying to
do.


The reason for <span> and not <div> (as in my previous proposal,
when I did not know about the linking issue) is that here you can
make the image and the text a single link. (Making them separate
links would cause trouble e.g. in tabbing through links.)

You can then style div.link and span.caption as needed, e.g. making
each div.link a floated element, so that a browser will put as many
of them side by side as fits into the canvas. And you can affect the
text style, distance between text and image, etc., rather easily.

You can, if you like, set
div.link img { border: none; }
since the image doesn't really need the default "link indicator"
border. The text below it acts as a link, and the user need not even
know that the image is clickable, too. But if he guesses it or finds
it out and uses it, fine.

I had difficulty making the design fluid and maintaining the effect
that I wanted. I was able to do it but I had two problems: (a)
permitting the number of images to adjust to the screen size did not
permit an aesthetic line-up of images (I wanted a maximum of four per
row) and (b) I could not get a white background for the whole middle
of the page. So I added a "width: 640px;" which did fix the problem in
IE. So I now have the white background where I want it and a maximum
of four images in a row.

Having said that, it does not render properly in Firefox or Opera plus
it is not fluid. I am willing to give up the fluidity for this page
since the Amazon generated pages that follow it are not fluid. But, I
need it to render correctly in all the browsers.

You can see the layout that I am shooting for if you view the link
above in IE.

Can you see a solution to the browser problem or other aspects of the
draft page?

Thanks Jukka. I know it's hard to work with someone who does not have
the concept down.

Bob




.