Forum Moderators: open
I have heard I could put the menu bar and bread crumb at the end of the source code, then position them at the top of the page using css. I tried a bit and wasn't too successful yet. Assuming I figure it out or someone tells me how, should I do that? If I do, what about the skip links at the beginning of the menu bar? Are they then unnecessary?
[edited by: BicyclingGuitarist at 12:31 am (utc) on April 17, 2003]
By the way, Welcome to WebmasterWorld BicyclingGuitarist [webmasterworld.com]
Pendanticist.
[edited by: pendanticist at 12:34 am (utc) on April 17, 2003]
:) Y
It's good to have your content close to the top; linking out to the css and the js is a very good strategy.
If possible, you may want to forego the JS and go for a purely css rollover (of course, it's not an option for everybody, but I try for that as much as I can).
You may want to look for others regarding Search Engine Optimisation (SEO) and CSS positioning (CSS-P).
Basically you place your content first in the html and then use css to put the links above it.
I usually still include a 'skip to content' (as some visual browsers apply the css styles and then read it), but I also usually include a 'skip to links' at the start of the content for those that don't.
But when I tried that the navigation bars lay on top of the <h1> and other content.
In this type of scenario, using css to position html, all of your content needs to be positioned. I usually have a <div class="main"> that is absolutely positioned. That <div> comes right after the body tag and contains the main content. Then my graphic navigation and text navigation are in absolutely positioned divs at top and left.
I utilize includes and have a footer that is included at the bottom of all of my <div class="main>. My html might look like this...
<body>
<div class="main>
<h1>Welcome to WebmasterWorld</h1>
<p>Please refer to the TOS for more information.</p>
<include for footer>
<include for left nav>
<include for header>
</div>
</body>
It gets a little tricky with the includes but once you have it figured out, tis a breeze maintaining. Simplicity is the key. ;)
If the list of links is at the end of the code, I like the idea of using "skip to content" in the links code and "skip to links" in the content code.
In your external css...
div.main{position:absolute;top:200px;left:140px;width:600px;}
div.navleft{position:absolute;left:10px;top:240px;width:130px;}
<body>
<div class="main">Content here.</div>
<!-- Include -->
<div class="navleft">Navigation here.</div>
<!-- Include -->
<div class="top">Top navigation graphics here.</div>
</body>
Once you absolutely position something using css, you can position your html code wherever you wish. You take the <div></div> and place it where you want it. Since the css is telling the browser where to position those <div>s, the order in which they appear in the html code isn't a factor. Although, you do want to make sure that you order your <div>s properly. Content <div>s first, then textual navigation <div>s and then graphic navigation <div>s.
You will need to keep a calculator handy and make sure that you utilize your space correctly. I like everything pixel perfect, others may not be so meticulous.
[edited by: BicyclingGuitarist at 2:12 am (utc) on April 17, 2003]
When you absolutely position elements you remove them from the normal flow, so if you want your content below your div then you will probably have to absolutely position it too.
To get around the problem of the navbar growing over the content I use two techniques.
Firstly I make sure that the navbar fits okay, without wrapping, in the common resolutions (640x480, 800x600, 1024x768). Its always wise to leave a little bit of extra space in case someone increases the default font size.
Secondly I set the CSS property
overflow:autoNot exactly elegant, but better than having it overwrite your content.
The other alternative would be to use a bit of javascript to reposition the content - but I hate Javascript so i try and stay away from that.
in the common resolutions (640x480, 800x600, 1024x768).
640x480 is not a common resolution. It is very uncommon.
640x480 is not a common resolution. It is very uncommon.
Around 2% according to BrowserNews [upsdell.com]
So slightly more common than NN4 and people still try and design for that. :)
640x480 or lower may get more common in the future as more people start using handheld browsers or web-capable TVs.
in the common resolutions (640x480, 800x600, 1024x768).
Around 2% according to...
2% is not common, and it is important that this be made clear.
It's important because it's unfair to make someone spin their wheels over a standard that has already lost it's relevance.
If we were to accept 2% as the definition of common, then are you also asserting that NN 4x users are common, and that a web site should be NN 4x compatible?
are you also asserting that NN 4x users are common, and that a web site should be NN 4x compatible?
Personally I don't specifically alter my code to be compatible with NN4, but I know from the CSS forum that plenty of other people do.
As for screen size, yes 640x480 is uncommon. However, I wouldn't write a site that requires the user to have a large screen (i.e. one that has a fixed 600 pixel width for instance). That's just excluding some of your audience because of bad design. (as opposed to excluding them because their browser is too damn buggy to write code for).
If the site looks better on a large screen, then fine, but a decent fluid layout should be able to cope with 640x480 in a reasonable manner.
As I said before, more people are starting to use small resolution mobile devices so we might reasonably expect to see an increase in the number of visitors with small screens.
How about putting the menu and nav bars in a container div that is absolutely positioned at the very top of the page, then the content in another container div that is absolutely positioned some percentage from the top of the page? I wouldn't mind a little white space between the navigation links and the content.
What percentage number from the top should I plug in to allow for wrapping? Should I test for viewing windows as small as 200 wide, or 320, for the navigation links to not cover the content when they wrap? I don't want so much white space at common browser resolutions that the content doesn't start until halfway down the screen...
Thanks.
I also used absolute positioning for a content div, placed 17.5% from the top of the page to allow room for my menu bar and bread crumb bar to wrap in smaller windows. I think this will work. I tested it with some siteviewer tools to see how it degrades. It is degrading nicely. Hmmmm...that doesn't sound right for some reason.
