So, this is normally the most simple part of my job... add anchors at the bottom so that the user can go to a certain section of the site... well for some reason, I just can't get them to work... the site is:
www.locatorindustries.com/rivets.html
the anchor links are at the bottom - Home is a link to another page, The "Top of Page" anchor works, the "About Us" link makes the page move up, but not to the right spot, and the "About You" doesn't work at all (Don't worry about the "About Rivets" its silly it's there in the first place but it was a request from the company. I have floating divs, so I've tried the <a name="" id=""> in the image div, on the <p> tag for the title of each section in a blank div above each section, to no avail. Can anyone give me some insight into why the tags just won't work?
Let me know if you need any more info and I'll gladly give.
Cheers,
Candace

Can I ask why exactly you want the page to behave like this? I would say it's pretty pointless in usability terms.

On my screen, for example, pretty much the entire page shows up so there's little need for this at all.

I absolutely agree with you, it's an argument I lost with the client. I need to have it working.

Ok let me take a look at the code.

Thanks for any help you can give!!

As far as I can see the code is fine. I downloaded the HTML and opened it locally in Safari, and the anchors work perfectly when there's no graphics on the page.

I think the issue is that the anchors are contained within floating divs, which aren't part of the page flow. Try moving them to outside those floating divs. Should work fine then. Of course you'll always have a problem with the "About Rivets" section as it wouldn't be possible to take that to the top of the page on larger screens as there isn't enough below it.

Ok - Thanks! I'll give that a try!
Cheers!
Candace

Let me know how it goes.

The float has NOTHING to do with whether or not an anchor tag works!

For one thing, you should be using proper Heading tags, H1, H2, H3, etc., not styling paragraph text to LOOK like a heading. You can then easily define an anchor for "About Us" like this:

<h2 id="aboutus">About Us</h2>
Style the text in the CSS, which really should not be in-line either.
You reference the anchor the same way - <a href="#aboutus">link</a>
You have no anchor in your code at all for "about us", so the link has nowhere to go.

This also eliminates the need for extraneous <a> tags just to create an anchor.

Noticed in your css, on your main div, you have a float: left; and position:absolute both - they can't and won't work together, it's one or the other.

Originally Posted by LadynRed

The float has NOTHING to do with whether or no an anchor tag works!

Well I didn't think so either. Yet, after downloading the page, and taking them outside of the floats, they work. Fancy that.

Originally Posted by LadynRed

For one thing, you should be using proper Heading tags, H1, H2, H3, etc., not styling paragraph text to LOOK like a heading. You can then easily define an anchor for "About Us" like this:

<h2 id="aboutus">About Us</h2>
Style the text in the CSS, which really should not be in-line either.
You reference the anchor the same way - <a href="#aboutus">link</a>
You have no anchor in your code at all for "about us", so the link has nowhere to go.

"about us" clearly points to "about2".

I would certainly recommend using appropriate heading tags, for SEO benefits if nothing else.

For a simple, small site such as this, there's nothing wrong with the odd bit of inline styling...

It's not an 'odd bit' of inline styles, it's EVERYWHERE. It's inefficient and weighs down the page unnecessarily. It defeats one of the benefits of using css and that is the ability to change things site-wide by touching ONE file - the css file. With in-line styles like that you still have to touch every single page where any changes would need to occur.

The float has nothing to do with the anchors. It is likely more to do with the absolute and static positioning.. which is also largely unnecessary.

Originally Posted by LadynRed

It's not an 'odd bit' of inline styles, it's EVERYWHERE. It's inefficient and weighs down the page unnecessarily. It defeats one of the benefits of using css and that is the ability to change things site-wide by touching ONE file - the css file. With in-line styles like that you still have to touch every single page where any changes would need to occur.

The float has nothing to do with the anchors. It is likely more to do with the absolute and static positioning.. which is also largely unnecessary.

I totally agree with you in normal circumstances, however, I'm assuming the chap working on this site isn't intending on doing any style changes for this client, it sounds like what they were after was pretty specific and also that they're a difficult client. I'd have probably done the same in these circumstances.