Top nav - % or not % this is the question

[elliot]

Hi there,

I create my Top Nav with % based fonts though have noticed that my design breaks after a single text-size increase going to two lines.

Where I've been trying my hardest to get the site looking good using a full css layout I didn't really consider this.

Would it be an idea to make the wrapper div much wide as well as the top nav so that as you scale text it scrolls along neatly? or maybe make the top nav pixel based text? or even image replacements?

I'm a little confused

Here's a link to the site as it stands....
http://www.bhbgroup.co.uk/our_product.html

many thanks for any help you can offer,

[mwinter]

I create my Top Nav with % based fonts though have noticed that my design breaks after a single text-size increase going to two lines.

The next navigation part breaks as well, overlapping the content underneath. However, it should be (I haven't experimented) quite trivial to fix: remove the height property declarations applied to the list elements. If the list expands to more than one line, its height will increase (rather than have its content overflow), moving the elements that follow further down.

If you needed the height property for some other reason, consider using line-height, instead.

Mike

[elliot]

Hi Mike,

I've been trying a few options and have this test page up at the moment.

http://www.bhbgroup.co.uk/accessibility.html
*sorry for all the colourful borders!! trying to make sense of what i'm doing*

I thought i'd try making all the divs wider in a chance to give the top nav more space to move.

It's definately a bit neater when you scale up on text size though the next size up causes the two graphics of the nav elements to split apart.. uhmmm...

I also can't seem to work out how to stop the nav from moving when you scale the browser window? it's doesn't stay in line with the rest? using (margin: o auto) on each div container

And then there's the second/sub nav you noticed.... heeelllpppp!! I haven't actually included the second nav in this page version.

many thanks,
elliot

[mwinter]

I've been trying a few options and have this test page up at the moment.

I haven't had the time so far, but I'll try to prepare a complete example for you to look at. Some brief notes follow.

http://www.bhbgroup.co.uk/accessibility.html

One thing I've notices is that all of the documents seem to share the same title, "BHB Group Ltd - A Professional distributor of BlazeMaster® products". The title element should contain a context-independent indication of the document content and where it is in the site. It will be displayed in both search engine results and the history list; a large number of identically named documents isn't very useful when trying to find a particular one among them. Use titles like "BHB Group Ltd. — Who We Are: Overview" and "BHB Group Ltd. — Our Commitment: Diversity". The current title should be limited to the home page.

It's definately a bit neater when you scale up on text size though the next size up causes the two graphics of the nav elements to split apart..

I think what you're seeing is the second part of the background image which is normally only viewable upon rollover. There are a couple of ways to fix it, the simplest being the separation of the two parts (with the inevitable loss of caching).

I also can't seem to work out how to stop the nav from moving when you scale the browser window? it's doesn't stay in line with the rest? using (margin: o auto) on each div container

You place balanced margins on the containing div element, but fixed margins on the list within it. As such, the list is always offset from the left (and currently extends beyond the right-hand edge of the container).

Please bear with me...
Mike

[mwinter]

Sorry for the delay, Elliot. I could have posted the example late last night, but I wanted to comment the style sheet to some reasonable degree (there's about 4KB of comments at the moment in the markup and style sheet).

The example above has so far been tested in Opera 6.06+, MSIE4+, Mozilla 1.0+, Firefox 1.5.0.3, and Netscape 4.77. It degrades slightly in Opera 6 and IE 5.5. It's tolerable in IE 4 and 5. It breaks badly in NN 4 (not a surprise, really) so you might want to consider using a hiding technique (like @import at-rules). For the remaining browsers, including Opera 7.03+, it renders as expected. I won't be able to check using a Mac, and I can't reboot to check in Linux.

The viewport can be reduced to as narrow as 400px at typical defaults before showing a horizontal scrollbar, and the font size can be increased to any value and remain readable (up until the point that horizontal scrolling is necessary).

There are some minor rendering differences between IE and better browsers. The bar between list items in the footer isn't shown as they are created using dynamic content (unsupported by IE). The heading also seems to cut off the background gradient within the content region, for some reason. However, these differences are barely noticable, and don't warrant much attention, in my opinion.

I quickly edited some of the images you used. In total, they come to 24.5KB (which is, incidentally, smaller than hero_main.jpg, alone).

My final note (unless I remember something else, later) is that the menu highlighting and secondary menu have been included only for demonstration purposes. I know they weren't in the original.

Hope you find something useful in there. Do ask if you have questions about it.

Mike

[elliot]

Mike,

You're definately are a very talented man, and a very kind one for taking the time out to go through my page with such detail.

I'm just about to go through what you've done so I can make sense of it. That's very good of you to comment the page the way you have.

I'm sure I'll have a few more question though I'll try not to hog too much of your time

all the best,
Elliot