How to fix my anchor link issue

Question

I have a question regarding the anchor tag.

I have a page like

<div id='header'>
    bunch of stuff….and iamges
</div>

<div>
   <a href='#test1>test1</a>
   <a href='#test2>test2</a>
   <a href='#test3>test3</a>
</div>

<div class='content'>
   <a name='test1'>test1 project</a>
   bunch of stuff

   <a name='test2'>test1 project</a>
   bunch of stuff

   <a name='test3'>test1 project</a>
   bunch of stuff
</div>

My css

#header{
  position: fixed;
  right: 0;
  left: 0; 
  z-index: 1030;
  margin-bottom: 0
 height:150px;
}

However, it seems like every time I click test1 to test3 link, my 'contents' div got push to top of my header div. so my 'content' div is cover by my header div (150px). Are there anyways to fix my issue? Thanks a lot!

Answer 1

Here is a really odd way of doing it...

Suppose this is your HTML, place the anchor (no content!) right before the element of interest:

<div id='header'>bunch of stuff and images</div>
<div class='nav'> 
    <a href='#test1'>test1</a>
    <a href='#test2'>test2</a>
    <a href='#test3'>test3</a>
</div>

<div class='content'>
<a name="test1"></a>
<div class='content-panel'>
   <a>test1 project</a>
   bunch of stuff
</div>

<a name="test2"></a>
<div class='content-panel'>
   <a>test2 project</a>
   bunch of stuff
</div>

<a name="test3"></a>
<div class='content-panel'>
   <a>test3 project</a>
   bunch of stuff
</div>

</div>

And apply this CSS:

body {
    margin: 0;
}
#header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    margin-bottom: 0;
    height:150px;
    background-color: rgba(125,125,20,0.6)
}
.nav {
    margin-top: 150px;
    border: 0px solid blue;
    padding: 10px;
    width: auto;
    border-bottom: 1px solid blue;
}
.content {
    overflow: auto;
}
.content-panel {
    background-color: lightgray;
    margin: 0px 0;
    padding: 10px;
    height: 400px;
}
a:target {
    display: block;
    line-height: 0;
    margin-bottom: 150px;
}

See demo at: http://jsfiddle.net/audetwebdesign/6gHE6/

The trick involves using the :target selector to add a margin to the bottom of the anchor equivalent to the height of the fixed header.

This generates some extra white space in your page, oh well... like I said, a bit of an odd way of doing it.

Alternatively, a JavaScript/jQuery fix might be the ticket!

Answer 2

I would try:

.content{position:absolute;top:150px;overflow-y:auto;}

to force all your content to always be below the header.

Answer 3

Set z-index parameter to -1. Having it with a high value his puts your div over the others and will be floated over the others.-1 Will set it in a z-ordering less than trhe others. You can also remove it completely if you don't care about specific z-ordering betheen divs in code.

UPDATE: Fixed position will also cause your div to be "anchored" in a place of the page, and be expanded without "pusing" the others. Please also consider changing CSS position element value (http://www.w3schools.com/css/css_positioning.asp).

Answer 4

Hi maybe this should do the trick

<a name="AnchorName" class="anchor"></a>

and

.anchor {
   position: relative;
   top: -[number]px;
}

Edit :

Or with anchor like this

<div><a name="AnchorName" class="anchor"></a> Anchor Text</div>