Databases
StackOverflow2013
Postsdbo
POAnchor links to start below the header which is fixed at the top
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAnchor links to start below the header which is fixed at the top
    text
    copied!<p>I have a page which has a fixed header at the top, which is 63px in height. below this I have different sections of the page (divs) which are in essence separate pages. Each section is linked in the header as an anchor link to the relevant div id. The problem I am having is that when the anchor link is clicked the top of the div starts right at the top of the document, rather than underneath the header. Any solution would be very helpful indeed.</p> <p>CSS CODE FOR THE HEADER:</p> <blockquote> <pre><code>#headercontainer{ position:fixed; background-color:#1a1813; top:0px; left:0px; width:100%; height:63px; z-index:1;} </code></pre> </blockquote> <pre><code>#headercontent{ position:relative; background-image:no-repeat; top:0px; left:0px; width:1280px; margin-left:auto; margin-right:auto;} </code></pre> <p>CSS CODE FOR THE FIRST SECTION (THAT SHOULD BE BELOW THE HEADER WHEN THE ANCHOR IS CLICKED:</p> <pre><code>#landingcontainer{ margin-top:63px; position:relative; width:100%; height:700px; background-color:#000000;} #landingcontent{ position:relative; width:1280px; height:700px; margin-left:auto; margin-right:auto; background-image:url("../images/landing/landing_bg.png"); background-repeat:no-repeat; </code></pre> <p>}</p> <p>HTML UP TO POINT NEEDED:</p> <pre><code>&lt;!-- START BODY CONTAINER --&gt; &lt;div id="bodycontainer"&gt; &lt;!-- START HEADER --&gt; &lt;div id="headercontainer"&gt; &lt;!-- START HEADER CONTENT --&gt; &lt;div id="headercontent"&gt; &lt;div id="headerbg"&gt; &lt;a href="#landingcontainer"&gt;&lt;div id="headerlogo"&gt;&lt;/div&gt;&lt;/a&gt; &lt;div id="headercard"&gt;&lt;/div&gt; &lt;div id="headernavigation"&gt; &lt;ul&gt; &lt;a href="#menucontainer"&gt;&lt;li&gt;Menu&lt;/li&gt;&lt;/a&gt; &lt;li&gt;Sauces&lt;/li&gt; &lt;li&gt;Ranches&lt;/li&gt; &lt;li&gt;Order&lt;/li&gt; &lt;li&gt;Franchise&lt;/li&gt; &lt;li&gt;About&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="headersociallinks"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- END HEADER CONTENT --&gt; &lt;/div&gt; &lt;!-- END HEADER --&gt; &lt;!-- START LANDING SECTION --&gt; &lt;div id="landingcontainer"&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload