Fixed banner, correct positioning and anchors

[Dagorsul]

Hello,

I currently have a page that has a fair amount of information on it, divided into sections, adding anchor tags to each of these sections makes sense to help the user navigate around. However, because I have a fixed banner div at the top of the page, and the content is scrollable, I have an issue in that going to an anchor, puts the anchor at the top of the page, behind the fixed banner div.

After some searching on google I came up with this as the solution (in these forums).

However, as I cannot see the original code from the page being discussed I am perhaps struggling to understand something subtle I have missed from the solution (or in fact my problem was not an issue for the original poster due to differences in layout or design).

The page I am having trouble with is here, there are no actual links to the anchors at the moment (if only because I cannot think of a tidy way to put them in yet). The anchor names are shared with all of the sub headings.

Each small subsection has been placed in its own div, the attributes for these divs are:

.com {
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: ridge;
	border-bottom-style: groove;
	border-top-color: #666666;
	border-bottom-color: #666666;
	margin-bottom: -200px;
	padding-top: 200px;
}

The actual issue (which is immediately apparent if you view the page), is that the borders for the sub content divs are all messed up and out of alignment with where they should properly be. The website will have many pages that have similarly laid out information, so I am hoping to resolve my issue with this page and apply it to all of the rest. Please excuse the messy code, I have been trying to resolve this issue for some time now, and have tried all sorts of different methods to get around it.

Any help would be very much appreciated.

[Dagorsul]

Hello again,

I was wondering if anyone would be kind enough to give me some feedback about my question? Is there some way I could provide more information, rephrase or clarify it? What could I do to increase the chances of getting a response?

I have spent a lot of time searching for answers, but despite me thinking it must be a common problem I have found very little in the way of suggestions. I know there have been instances in the past where others have said to me "I just googled 'search term I had never thought of' and it came straight up first time..." and perhaps this is one of those times (oh for a brain that could "think outside the box").

Is there another way I could go about achieving the same result? I would sincerely like to avoid JavaScript if in anyway possible. Although this wish stems primarily from my inexperience with screen readers which the website must be useable with, and the desire to have the entire site validate as XHTML 1.0 Strict. The potential userbase is small, no more than 200-300 at most, but very likely to have a much wider variety of browsers than the "average" 200-300 IE5/6 and FF users.

[Dagorsul]

In a flash of inspiration I managed to finally fix my problem.

As I could find so little on this issue anywhere on the net I thought I would post and let others know how I fixed the issue.

Firstly the problem:
Using a heading banner with "position: fixed" along with a navbar directly underneath it also with "position: fixed" works very nicely for most browsers. However, if there is a lot of content on the page and you wish to use anchors to allow the users to easily move through it, then you come up against the problem that your anchor link will scroll the content to the top of the page. meaning the top of your anchor is *behind* the banner div. Obviously you can messily fix this by manually adding lines to the top of the content div, and sticking all of the anchors five or six lines above the start of the section of content you wish to display. But doing that is horrible and will break as soon as people resize the font or have funny resolutions and it's not very exact either, you may well have to place the anchor tag in the middle of a paragraph and what have you.

The solution:
Just to clarify and slightly expand on what jscheuer1 posted in another thread, your options are different depending on your layout. In my case I used divs to hold "sections" of content, it is just as likely you might just want to refer to "p" tags or "h" tags, it depends on how your content is laid out (I may well get rid of my divs after reading an excellent article, the link of which was posted by someone on these board, titled "divitis"). Essentially you need to create "space" at the top of the page so that your anchors are underneath the fixed banner/navbar divs. In my case 200px was about the right amount, but obviously it depends on the combined size of your banner and navbar (allowing for the text, if there is any, in the navbar or header to be expanded a reasonable amount). Now for the actual important bit, add to the css style of whichever element you like (div, "h" tag, "p" tag etc..) a padding-top of 200px (in my case) and a margin-top of -200px. This shifts the whole caboodle down 200px while making the browser think it is actually at the top of the page, so when you click on the anchor tag link, it scrolls the page so that the anchor is in fact 200px from the top of the page. If you wish to separate out your content a little, you can add a border to it, however, due to the effects the jiggery-pokery with the padding and margins have had, a top border will look a mess and be all over the place (my original problem, although I wasn't entirely aware that this was all that was causing it), so you need to use the "border-bottom" attribute.

If you want to see how it works:

http://www.dwwarriors.com/commands.html
http://www.dwwarriors.com/commands.html#bandage
http://www.dwwarriors.com/commands.html#bob
http://www.dwwarriors.com/commands.html#slice
http://www.dwwarriors.com/commands.html#warcry
http://www.dwwarriors.com/commands.html#leatherwork

I have included the links to the anchors as they are not currently on the page (although this will change sometime next week), and I may try and simplify the layout (reduce the number of divs and other unnecessary layout).

I sincerely hope this helps someone save the time and frustration that I have gone through, made all the worse because it's actually a really quite simple fix.

Cheers

~Dagorsul

[Phil Barron]

Dagorsul, I registered here just so that I could thank you for this fix. I had the same situation at my blog - a fixed nav element as a banner, with anchors disappearing behind it as the link jumped to the top of the page. Your solution works well. Thanks for the flash of inspiration!