how to create an anchor point

I have tried to create an anchor point using:

<a href="index-xxx.html#reference-name"> and <a name="reference-name">

The problem is I have a floating margin on the top and the anchor point goes to the top of the page hiding the top of the text.

Is there an easy way to add a relative spacing to the top margin using HTML?

I'm new to this and using a template that I found online. I have since found that it would have been easier to start from fresh instead of using the template but I am too far down the line now, and I don't really understand how to change the CSS to do this. Is there an easier answer?

Many thanks in advance to someone that has been searching for hours for the answer.

-------------Problems Reply------------

EDIT: I've updated based upon the code supplied.

Basically we've got something to the effect of this:

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#main {
min-width: 980px;
margin: 0 auto;
font-size: 0.75em;
padding:101px 0 37px 0;
}
header {
height:101px;
background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
position:fixed;
top:0;
left:0;
width:100%;
z-index:100;
}
footer {
overflow: hidden;
position:absolute;
bottom:0;
left:0;
width:100%/*; height:37px*/;
background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
color:#9d9d9d;
text-transform:uppercase
}
</style>
</head>
<body>
<div id="main">
<header>...</header>
<section id="content">... with <a name="blah">anchor</a> a couple paragraphs down the page</section>
<footer>...</footer>
</div>
</body>
</html>

As written the anchors links are buried under the top navigation. It seems the only solid fix is to use 'CSS frames' to get the content to display correctly, which requires the following CSS tweaks:

#main
{
padding:0 0 37px 0;
}
section#content
{
position:fixed;
top:101px;
width:100%;
bottom:37px;
overflow:auto;
}
footer
{
position:fixed;
height:37px;
}

So I've removed the top padding from #main.

Then I made the content and footer fixed position. Because of this the content has to be moved down 101px, hence the top.

I then had to give the footer a height, and then put that same amount as a bottom on the content.

Overflow auto gives us scrollbars, and width of 100% puts those bars in a reasonable place.

Tested on IE 9, Chrome 10, Firefox 4, and Opera 11.

Edit 2: And unfortunately I can't find much online about this particular method. Eric Meyer talks about it in Smashing CSS. It doesn't look like any of the existing resources online test for how anchor links will work with the content, which is pretty unfortunate.

Category:html Views:0 Time:2011-03-29
Tags: html css anchor

Related post

  • How do I create an anchor tag on AppEngine? 2010-05-12

    I got the URL for the logout screen but I don't know how to create an anchor tag to reference it resp.getWriter().println(userService.createLogoutURL(req.getRequestURI())); Tks --------------Solutions------------- Altered the value of the ContentType

  • How to create a anchor link to different .php file? 2010-11-05

    I'm new to php and hope you can make me figure out whether I'm trying to do anything impossible. I have two folders 'public' (root directory), and 'library' (all php files here), these folders are in same level of folder hierachy. my public/index.php

  • how to create named anchors in django for getting down to specific parts of the page 2010-01-31

    I'm creating a "Q & A" website. On the questions page all of its answers could be seen (with pagination). I need to go straight down to answers (in the page) from other pages as well. I've tried implementing named anchors but unable to direct to

  • How to create UIButtons anchored to the bottom of the view? 2010-02-22

    What's the best practice to create a few UIButtons in code that are anchored to the bottom of the view with a predefined spacing between each? --------------Solutions------------- Use the buttons' autoresizingMask property. If the parent view's only

  • Create SVG anchor element programmatically? 2011-05-20

    How do I create an SVG anchor through JavaScript? Please see relevant section and an example from spec. How do I convert this example to JavaScript (basically, how to dynamically generate the container element a so that when I click the ellipse, it n

  • multi level list creates unwanted anchor object 2012-02-10

    Eeek, my co-workers and I are having a problem with an existing Word 2010 document. Whenever we try to use the Roman numerals for the third level of a multi-level list, an anchor and frame appear and we're not able to get rid of them. Does anyone kno

  • create Html anchor to file on the c drive 2010-06-09

    H could you tell me how to create a link to a file on the c drive(local machine) or a link to download a file from the hard drive this doesn t seems to work <a href="C:/Documents and Settings/Giga/My Documents/NetBeansProjects/JavaRssFeed/RssFeed/

  • Need to disable TinyMCE default create an anchor tag when pasting a raw URL 2011-10-26

    I've got TinyMCE installed on frontend of my wordpress website…it's separate from the default Wordpress version, however, I need it to NOT turn raw URLs into anchor tags because it screws up Wordpress's ability to then oEmbed it. I have it installed

  • Creating toolbars anchored at the side of the monitor 2014-10-09

    Hello, I cannot find a way to move the toolbar from the taskbar to another location (right side and top of the screen). Isn't that possible in Windows 7? jas --------------Solutions------------- Hello, I cannot find a way to move the toolbar from the

  • Drupal: Creating anchor only link with l() 2009-11-09

    I'd like to output this <a href='#namedanchor'>link</a> using the l() function, so that the link just jumps to an anchor on the current page. I expected this to work l('link', '', array('fragment' => 'namedanchor')); but it creates an

  • Is it ok to create anchors without providing anchor text? 2009-12-09

    If you take this example, <a name="xxx"></a> ... is this ok when creating an anchor? I have always preferred to use an already created tag for my destinations. --------------Solutions------------- If you are using this for in page navigat

  • Create a mailto anchor tag in MVC2 2010-10-18

    Is it possible in MVC2 to create an anchor tag that contains values from ViewData? e.g. <a href="mailto:<%: ViewData["Email"] %>">Send Email</a> This code above doesn't render and just throws an exception? --------------Solutions---

  • How to create a GWT anchor with an ignored href? 2011-06-23

    Let's say I have HTML anchor like so: <a id="myid" href="something?a=b">Link</a> and I want to wrap this in a GWT Anchor that has a click handler that sends the user somewhere else and ignores the href value. in regular javascript it seem

  • Invoke jQuery EasyTooltips on Dynamically Created Anchors 2012-04-05

    I think the answer to my problem is to use delegate() but I'm not entirely sure - and need a pointer... I am using the rather brilliant EasyTooltip plugin to add simple tooltips to all the anchors within a div. This all works fine with the below exec

  • Page anchors without trailing filetype, ie: www.example.com/sub#mySection 2009-08-19

    So I need to link to things like a section with id="mySection" at www.example.com/sub/ But since the page generated in wordpress and there is not any actual directory /sub/, nor any index.html or what have you inside it, how can I link to a specific

  • Activate URL anchor but don't scroll to it? 2009-09-05

    I have a page with two tabs that I want to be able to switch with Javascript, but also set the anchor (e.g. page.html#tab1) in the URL for bookmarking/linking. By default the tab contents are in two divs, one below the other, and the anchor tag will

  • How to make an empty anchor tag clickable in IE7? 2009-11-02

    I need to make an area within a background image clickable to generate an event for JavaScript use. So, I created an anchor tag and inside that I inserted some relevant text between semantically meaningless tags which I then made hidden: <a href="

  • Frustrating MySQL CREATE PROCEDURE error 2009-12-03

    Hopefully this is a nice quick one to resolve. Here is my .sql file: USE my_db; DELIMITER $$ CREATE PROCEDURE searchLocation(IN argQuery VARCHAR(32), IN argLimit INT) BEGIN SELECT DISTINCT `suburb`, `postcode` FROM `location` WHERE `suburb` LIKE '%ar

  • jQuery: Scroll to anchor when calling URL, replace browsers behaviour 2009-12-14

    I already know the jQuery plugin ScrollTo, but I didn't find any way up to now to realize the following: The users gets to my site (by typing, NOT by clicking a link on my page) domain.com/bla.php#foo and the anchor "#foo" exists. Now I want that the

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.114 (s). 11 q(s)