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 f开发者_如何学运维ound 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.
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.
加载中,请稍侯......
精彩评论