Riva Portman wrote: > I am working on a redesign for a client of mine and have run into a > problem. The client wants a row of colored blocks across the top of the > website and wants the navigation to fit inside each block. The problem > is that when I design it to look good in 800 x 600, it looks awful in > 1024 x 768 and vice versa. I have tried using percentages, floats, etc. > but am at my wits end on how to get this to work. One option is a > JavaScript that detects the screen resolution, but that has its problems > also. Any help would be much appreciated. > > TIA, > Riva > http://www.littleracquets.com/new_site_test/
Hi Riva These are the challenges you are facing. 1) Designing for a certain range of screen resolution. 2) Using in-valid html [1]. 3) Using inline style. 4) Not using the correct doctype. The doctype you were using was putting most browsers in quirksmode [2] [3]. 5) You had one set of a style block for #wrapper followed by almost the same style block for html>body #wrapper. This is repeated through the stylesheet for other selectors. Surely those styles are not so esoteric that IE6 would spit the dummy. It can handle some quite robust CSS if given a chance. 6) One of your images is 540kbytes. This could be reduced to around 30kbytes to save bandwidth. Seeing that your boss is seeing a lovely brickwall and visualizing the links sitting perfect in each brick, there is only one approach. Fixed width anchors and a fixed width navigation div. So nothing looks to odd, we want the navigation div centered. This is done with an left and right margin set to auto. Now since we just did that, we better fix up that background. The background bricks must be centered also. Knowing the screen resolution you were designing for and seeing those heights in your stylesheet, you may have been after a sticky footer? The design and it being tennis would call for this I think. This requires a min-height 0f 100% set on the #wrapper. The #topper div must be absolutely position, thus being taken out of the flow so now the #wrapper will rise up to fill the space. We use the FooterStickAlt [4] method for positioning the #botter div. BTW, what is the topper and botter business. I have done this reworking. <http://css-class.com/x/racquets/> You may notice that I have commented out some menu items. The design is so restricting that I had run out of bricks. The layout looks quite good on my 1280x800 screen. At 800x600, please note how the left edge of the class menu4 div is now sitting on the left edge of the page. The result is that as you narrow the viewpoint more from this point on, all the links begin to slide right relative to the background and finishing at about 50px as the min-width kicks in. Maybe a rethink of the pages and content will resolve this as I believe five links is the limit you can have. Maybe some bigger bricks would help. It is also possible to have have the menu span over two rows of bricks and aligning each anchor on each brick. You will find some extra comments in the CSS which is embedded in the header of the source. The reworking works in IE5.5, IE6, IE7, FF 2.0.0.8, Opera 9.10 on Win XP SP2 and have tested font resizing 2+ / 2- and minimum font size of 26px in FF and Opera. A read of this about font size [5] will help. I have linked to my links page in my signature line of this message. Many good links are to be found on this page. Good luck. [1] <http://validator.w3.org/> [2] <http://www.quirksmode.org/css/quirksmode.html> [3] <http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41> [4] <http://www.themaninblue.com/writing/perspective/2005/08/29/> [5] <http://www.gunlaug.no/contents/molly_1_01.html> Kind Regards, Alan <http://css-class.com/links/> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
