CSSKarma

Main Nav:

• home
• articles
• lab
• research
• portfolio
• contact

Social Nav:

• facebook
• twitter
• dopplr
• plurk
• pandora

Extra Nav:

• RSS
• Twitter
• FatFold

Base tag & Named Anchor

After much cursing, I sat down to hack out a solution. Implementing the anchor link globally wasn't a problem (I just put it in the header include and had the anchor link jump to a div ID, rather than an physical link). This solution technically worked fine, this is where the <base> tag trouble comes into play. I 'Googled' for about 3 hours to find out that this is a fairly common problem, but there aren’t many large-scale fixes out there for it. So I sat down with a co-worker and we came up with this stuff:

Just to clarify:
With the <base> tag, we'll call it: http://www.yousite.com/, is in the header of every page; a normal anchor link "#content" will load up the page http://www.root.com/#content....every time. This is a problem on all pages, other than the index (and there are A LOT), because we can't have people clicking on an anchor and getting sent back to the homepage.

solution1 (static)

base tag: <base href="http://www.yoursite.com/"></base> 

current page: http://www.yoursite.com/contactus.html 
anchor link: <a href="contactus.html#content">skip to content</a>

Your anchor links should work just fine, and you can still use the <base> tag. This is a good solution (IMO) for a reasonably size site.

If you have a large PHP driven site here is the solution we came up with:

solution2 (dynamic)

base tag: <base href="http://www.<root>.com/"></base> 
current page: http://www..com/contactus.php 
php in header include:
<?php       
$replaceTxt = 'http://www.<root>.com';       
$anchorUrl = str_replace($replaceTxt,'',$_SERVER['SCRIPT_FILENAME']);    
?> 

anchor link: <a href="<?php echo $anchorUrl; ?>#content">skip to content</a>

again, I made the anchor jump to: <div id="content"> because I already had it in every page, you can also use a regular named anchor.

with ease,
tim