Re: [css-d] Document order versus design breakpoint [SOLVED]
Sophie, Paul, Thank you for your responses and input. Starting from your suggestions, I've managed to make my site built more around relative positioning and floating than absolute positioning. Partly what enabled this was to utilize the skip-nav in places in order to hopefully keep in line with usability standards. Thanks for your time and assistance. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Document order versus design breakpoint
Dave M G wrote: In the current layout, the menu has an absolute position, and is oriented to the top right of the viewport. If the viewport is shrunk to below 500 pixels, the layout breaks. I tried setting a minimum width on the body tag, but this has no influence over an item that is absolutely positioned to the right. As the page is shrunk, all relatively positioned objects stop moving, but the absolutely positioned objects will continue to place themselves in absolute terms from the viewport boundaries. Which, of course, is the expected behavior. As far as I can understand it, my only choice to make the menu obey the min-width of the body is to make it relatively positioned. Applying max-width: 100% to the navigation div will restrict it to be no wider than the body, even when absolutely positioned. (You'll need appropriate hackery to work this in IE7). Your menu will then grow vertically, which may cause it to overlap the content beneath it. You could restrict it's height, and apply overflow: hidden so it can't mask your content, but this would mean part of the menu was no longer visible. You might, however, be able to do something clever with javascript to detect the menu's height and adjust the top position/margin of your content accordingly, which would keep the menu accessible to 90+% of your audience. However I'm no JS expert so can't help you with how that might be done ;-) But surely it's quite common to want a menu on the top right in the design, and near the end of the HTML. While it's common and relatively easy to move a menu around this way when it's going to be positioned to the left (you'll get a horizontal scrollbar at small viewport sizes), as you've found positioning it to the right, while keeping it accessible at smaller viewport sizes, is more tricky! -- Sophie Dennis, Creative Director Cayenne Web Development Limited www.cayenne.co.uk Bloxham Mill, Barford Road Bloxham, Oxfordshire OX15 4FF t. 0870 389 0570 m: 07814 026632 Reg. England and Wales no. 4502369 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Document order versus design breakpoint
At 5/6/2007 12:43 AM, Dave M G wrote: I have a div that contains the main body of content. I have a menu for navigation. For the layout, I'd like to have the menu appear as a horizontal set of links above the main content div. In the current layout, the menu has an absolute position, and is oriented to the top right of the viewport. off-topic: Is this necessary? When you enlarge the text size, don't the menu and the content overlap? If the menu weren't absolutely positioned, it would simply push the content down normally as it enlarged. ... If my menu is to be relatively positioned in the layout, and appear above the content div, then it needs to be in the HTML code before the content. My understanding of good usability requirements for the flow of HTML code is that navigations menus should go below content. That way people with screen readers or non-CSS don't have to move past repetitive content after each page load. Would it help if you positioned the content N ems from the top of the page so that as the menu enlarges the content moves down? That approach can't accommodate the unpredictability of word-wrap, but it might help if a) you keep your menu on one row or b) the user doesn't enlarge too much. Alternatively, I'm under the impression that skip-nav links are a commonly accepted strategy. That enables you to place the menu before the content but still not force anyone to read through it. If your menu is so large that viewing the page without CSS pushes the content below the fold in, say, 800x600, I suggest that your menu might be unnecessarily large. Does it include sub-menus for each section of the site? In recent years I've moved away from the attitude that one should be able to navigate to any page of the site with a single click. Asking the user to click to drill into the site tree isn't really so egregious, and simple menus create a relaxed atmosphere in which the user can visualize all the options at any one time. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
