I'm working on a simple one page website, I decided today to tack the anchor tags , if you want to see what i'm moaning about take a look here.

 

http://www.erudit.com/faad

 

then click on the about button, You'll see that you get taken to somewhere which cuts off most of the area I'm trying to anchor to. I have tried placing the anchor in all manor of different positions in the code on the page to no avail.

 

Your help is much appreciated.

 

Anybody else every ran into a simple task that causes hair loss and road rage ?

 

Thanks

 

Luke

You're using name, which is a deprecated tag. Where did you learn that? Completely wrong.

 

Give the link an href of "#aboutbox". See what happens.

 

Edit: ALSO Your coding is also very messy and you haven't used correct styles for your header and the content beneath. When your page jumping, you're not taking into account the vertical space the header occupies.

 

Give the content below relative position to the header, so it sits below the header without using a top margin.

 

Should work fine then.

Edited December 2, 201114 yr by brightonmike

Your code is all over the place mate.

You've got a name tag in there so drop that and use the ID #aboutsection or something similar.

You're also sending the link to an id of about which is it's own ID so no wonder it's all confused.

 

Edit: BM beat me.

Edited December 2, 201114 yr by MikeChipshop

Also, because your positioning is all wrong, the content goes underneath the top header, which is why it gets cut off at the top.

Thanks for slagging it off guys , I am still working on it and my code does go messy up until the point where everything is working and then I go back through and make it all strict and tidy. I'm using name tags because that's what the instructions for the jquery told me to do , I'd have imagined using hrefs would have caused issues but I'll take this into account, Thanks for the advice on the relative positioning I'll give that a go rather than using a margin.

 

Many Thanks

another satisfied customer

your code is pointing to #about but there is no div with that ID?

 

you need to change the link to make it target #aboutbox surely?

 

 

and this link

 

<a href="#interior" id="interior">Interior Design</a>

 

Needs to be

 

<a href="#interiorbox" id="interior">Interior Design</a>

 

 

for example

 

at least that's how mine always works - unless the example you took had some weird and wonderful js

 

edit - which looks like pretty much what the other guys are saying

Edited December 2, 201114 yr by oakleaves

Thanks for slagging it off guys

 

Not slagging it off at all, just pointing out the issue that you are having is down to poor coding.

 

You need to code as clean and tight as possible from the very start because patching up problems later on is far more stressful and time consuming,

^ v true.

 

How to people expect you to pinpoint and fix an error when the code is sloppy. That makes it like trying to find a needle in a haystack

Hi Guys,

 

So I tried out using position relative, I couldn't tell you if I've put it in the right place, initially when you open the page it's doing the job making the content positioned below the header. However when you scroll down the content instead of passing under the header it passes over. Also when hitting the button for the anchor it still takes it right to the top of the page.

 

Also tried your suggestions on the "name" tag issue and it stops it working so for now have left it as it is.

 

Your advice once again will be appreciated.

 

Thanks again

 

Luke

your about section link is now working

 

you just need to do the similar thing to the others as already stated

The tags are working the problem is the content is supposed stay behind the fixed positioned header so there is access to the buttons at all time, when clicked the relevant content should be below it .

 

Any ideas?

 

Thanks

 

Luke

Thanks for slagging it off guys

 

 

Wow...burned your bridges with me pal.

The tags are working the problem is the content is supposed stay behind the fixed positioned header so there is access to the buttons at all time, when clicked the relevant content should be below it .

 

Any ideas?

 

Thanks

 

Luke

 

yeah, it involves z-index

 

you need to set the content that needs to be above to something like z-index:1000 or whatever in the css

Wow...burned your bridges with me pal.

 

Seems to be the biggest problem on this forum which, in most other respects, is an excellent forum.

 

Because of all the niceness and the mods etc and the rules it seems to breed a mentality of ingratitude amongst some - like it's all expected. Anyone would think we got paid for our time! Worse still we get slagged off for offering our advice that has come through many years of hard work in some cases.

 

Almost makes you wanna turn round and say P off

yeah, it involves z-index

 

you need to set the content that needs to be above to something like z-index:1000 or whatever in the css

 

Thanks for that , I've amended the z-index so everything passes under again, but I still can't get the content to be the correct distance from the top.

 

Any ideas?

Thanks for that , I've amended the z-index so everything passes under again, but I still can't get the content to be the correct distance from the top.

 

Any ideas?

 

target the #aboutbox rather than the #aboutsection and add 20px of padding to the top of the aboutbox section in the css.

 

Do similar for the other intended targets

yeah, it involves z-index

 

you need to set the content that needs to be above to something like z-index:1000 or whatever in the css

 

I think the webdesignerforum is a brilliant place and has an amazing community that has helped me out on many occasions I also try my best to help out when I can too. I am extremely grateful for all the help I recieve but I don't think it's fair to be treated like a moron when I ask for help. I can't point out once in the thread where I haven't said that any help would be much appreciated and I always thank those that help me or try to help me.

I think the webdesignerforum is a brilliant place and has an amazing community that has helped me out on many occasions I also try my best to help out when I can too. I am extremely grateful for all the help I recieve but I don't think it's fair to be treated like a moron when I ask for help. I can't point out once in the thread where I haven't said that any help would be much appreciated and I always thank those that help me or try to help me.

 

fair comment

target the #aboutbox rather than the #aboutsection and add 20px of padding to the top of the aboutbox section in the css.

 

Do similar for the other intended targets

 

 

I'll give that a go thank you

I'll give that a go thank you

 

I'm going to remove the autoscroll script temporarily so I can focus on just getting the content to line up. Your suggestion has shown an improvement in positioning , The padding doesn't help however but I'll keep having a poke around to see if I can come up with anything. Thanks again

I think the webdesignerforum is a brilliant place and has an amazing community that has helped me out on many occasions I also try my best to help out when I can too. I am extremely grateful for all the help I recieve but I don't think it's fair to be treated like a moron when I ask for help. I can't point out once in the thread where I haven't said that any help would be much appreciated and I always thank those that help me or try to help me.

 

I take no issue with you and think you're a great member here, however what both myself and BM said, were facts and the main issue causing the problem. There was no way of avoiding it and any skirting round the issue would have made any possible fix far more long winded than needed.

 

Here's what i used on my portfolio (not live)

 

JavaScript

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(function() {

	function filterPath(string) {
		return string
		.replace(/^\//,'')
		.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
		.replace(/\/$/,'');
	}

	var locationPath = filterPath(location.pathname);
	var scrollElem = scrollableElement('html', 'body');

	// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
	$('a[href*=#]').each(function() {

		// Ensure it's a same-page link
		var thisPath = filterPath(this.pathname) || locationPath;
		if (  locationPath == thisPath
			&& (location.hostname == this.hostname || !this.hostname)
			&& this.hash.replace(/#/,'') ) {

				// Ensure target exists
				var $target = $(this.hash), target = this.hash;
				if (target) {

					// Find location of target
					var targetOffset = $target.offset().top;
					$(this).click(function(event) {

						// Prevent jump-down
						event.preventDefault();

						// Animate to target
						$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {

							// Set hash in URL after animation successful
							location.hash = target;

						});
					});
				}
		}

	});

	// Use the first element that is "scrollable"  (cross-browser fix?)
	function scrollableElement(els) {
		for (var i = 0, argLength = arguments.length; i <argLength; i++) {
			var el = arguments[i],
			$scrollElement = $(el);
			if ($scrollElement.scrollTop()> 0) {
				return el;
			} else {
				$scrollElement.scrollTop(1);
				var isScrollable = $scrollElement.scrollTop()> 0;
				$scrollElement.scrollTop(0);
				if (isScrollable) {
					return el;
				}
			}
		}
		return [];
	}

});
</script>

 

HTML

 

<div id="menubar-content-right">
		<ul>
           	<li><a href="#wrapper">Home</a></li>
           	<li><a href="#portfolio-section-wrapper">Portfolio</a></li>
               <li><a href="#services-section-wrapper">Services</a></li>
               <li><a href="#contact-section-wrapper">Contact</a></li>
               <!-- <li><a href="#">Blog</a></li> -->
           </ul>
       </div>

 

and the sections have this ...

 

<div id="portfolio-section-wrapper">
...
</div>

May help.

Not slagging it off at all, just pointing out the issue that you are having is down to poor coding.

 

You need to code as clean and tight as possible from the very start because patching up problems later on is far more stressful and time consuming,

 

Unfortunatley the smiley face isn't enough to show that my feelings weren't hurt by the comments in this situation. Is there any plans to have a system on the forum where you can conference call people so they can hear the tone of your voice ?

 

I've always struggled a little with being able to detect maliciousness or humour in writing recently I requested that my boss no longer highlights sections in his emails in red because it looks angry haha.

 

I honestly appreciate the help Mike, You've saved my bacon on many occasions and I do often feel bad that I am not able to help you out in some way, I have started going through the code and tidying it up so it's readable not only me.

Unfortunatley the smiley face isn't enough to show that my feelings weren't hurt by the comments in this situation. Is there any plans to have a system on the forum where you can conference call people so they can hear the tone of your voice ?

 

Haha yeah well maybe you should make that your next project, i'd certainly back it.

Thanks for that code Mike, I'll give that a go in place of what it is i'm using once i've got it to work properly just jumping to each section. I see that my main issue with content lining up is caused by what I thought would be a good idea in using the fixed positioned navigation bar at the top. May I just say this is the first time i've toyed with the fixed header thing and an autoscroll script together.

 

Thanks

 

Luke

Haha yeah well maybe you should make that your next project, i'd certainly back it.

 

I think I just invented Skype

I think I just invented Skype

 

touché!

Thanks for that code Mike, I'll give that a go in place of what it is i'm using once i've got it to work properly just jumping to each section. I see that my main issue with content lining up is caused by what I thought would be a good idea in using the fixed positioned navigation bar at the top. May I just say this is the first time i've toyed with the fixed header thing and an autoscroll script together.

 

Thanks

 

Luke

 

Ang on i'm just slapping a few bit's together for you to look at regarding this.

snip

 

urgh, annoyed.

Edited December 2, 201114 yr by brightonmike

Ang on i'm just slapping a few bit's together for you to look at regarding this.

 

Thank You

snip

 

urgh, annoyed.

 

I did manage to read that before you removed it , I appreciate your help and nowhere have I said I haven't I also come onto the forum during work to lend a hand where I can. I just think you have a very unapproachable method of helping people out, Instead of saying " oh the problem here is this this and this " you're like URGHH!!! what you doing you muppet?! . No you didn't say that but still don't worry i'll never bother you for your help again.

snip

 

urgh, annoyed.

 

I think it's been made clear now it was an internet mis-understanding.

We can all calm the hell down and have a cuddle

 

Motif, this was quickly slapped together from bits and bobs laying around. Might help you on your path.

 

http://miniman-webdesign.co.uk/client/motif/test.html

Instead of saying " oh the problem here is this this and this " you're like URGHH!!! what you doing you muppet?! . No you didn't say that but still don't worry i'll never bother you for your help again.

 

...wow. Again.

I think it's been made clear now it was an internet mis-understanding.

We can all calm the hell down and have a cuddle

 

ye motif is clearly a cool guy.. it's all gud

 

His website is pretty funny too, just checked it out

...wow. Again. <------------ This is exactly what i'm talking about , belittle me and then carry on with your day

 

You're still doing it !

 

I'd hope this stops now

I think it's that time of the month for brightonmike.. he'll get over it

 

Let's all be friends!!

 

 

 

I just remembered - it's friday. Lets focus on the beer and pizza for tonight instead

Edited December 2, 201114 yr by oakleaves

I think it's that time of the month for brightonmike.. he'll get over it

 

Let's all be friends!!

 

 

 

It does get a little frustrating , can I have that cuddle now ?

I'm outta here. Oak, Mike and most of you, are absolutely brilliant, but I cannot be spending time out of my working day putting up with this. Sorry, still not entirely sure what I've done but I just don't have time for this. Ciao guys.

I think it's been made clear now it was an internet mis-understanding.

We can all calm the hell down and have a cuddle

 

Motif, this was quickly slapped together from bits and bobs laying around. Might help you on your path.

 

http://miniman-webdesign.co.uk/client/motif/test.html

 

Thanks mike just taking a look at it now , I'm just trying to figure out how you managed to get the content to stay below the header .... I wish I was clever !

 

I'm not sure if you've noticed but I'm more of a designer that does a touch of code and not a coder that does a touch of design.

I'm outta here. Oak, Mike and most of you, are absolutely brilliant, but I cannot be spending time out of my working day putting up with this. Sorry, still not entirely sure what I've done but I just don't have time for this. Ciao guys.

 

Between all the crap (some mine , some yours) , Thank you for the help you did provide