CODEWITHSUNDEEP
htmlcsshyperlink
Emma
Emma

Reputation: 335

HTML - Link to anchor without page jumping to top

I have a page with a fixed position header across the top, and links within to page to sections specified by id attributes. When I link to one of these, it puts the section right at the top of the page, so that the first part of it is overlapped by the header.

How would I make the section leave space for the header? I don't want to just add a 100px margin between the section id and the section content, as that would leave too much blank space on the page.

CSS :

#header {
    position: fixed;
    top: 0;
    height: 100px;
    left: 0;
    right: 0;

    background: #464646;
}

#content {
    margin-top: 100px;
}

HTML :

<div id = "header"> <!-- header contents --> </div>

<div id = "content">
    <a href = "#section"> Section </a>

    <!-- Content here, so that page has to scroll to reach section -->

    <h1 id = "section"> Section </h1>

    <!-- More content -->
</div>

Upvotes: 1

Views: 2719

Answers (2)

Arun
Arun

Reputation: 257

you can try with this codes...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>A simple Input Form</title>

<style type="text/css">
body {
padding: 0;
margin: 0;
}
.nav {position:absolute; top:0px; left:0px; height:50px; right:0px;overflow:hidden;
color: #ffffff;
text-align: center;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);}
.nav ul{list-style:none;}
.nav ul li{display:inline-block;}
.nav ul li a{color:#fff; font-size:26px;}
#faq{position:absolute; top:50px; bottom:50px; left:0px; right:0px; overflow:hidden;}
</style>


</head>
<body>
<header>
   <div class="nav" style="clear:both;">
   <ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
    <li><a href="#four">four</a></li>
   </ul>
   </div>
   </header>  
   <section id="faq">
   <h1 id="one">This is faq one</h1>
   <p>some text</p>
   <p>some text</p>
   <p>some text</p><p>some text</p>
   <p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>

   <h1 id="two">This is faq two</h1>
   <p>some text</p>
   <p>some text</p>
   <p>some text</p><p>some text</p>
   <p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>

   <h1 id="three">This is faq three</h1>
  <p>some text</p>
   <p>some text</p>
   <p>some text</p><p>some text</p>
   <p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>

   <h1 id="four">This is faq four</h1>
   <p>some text</p>
   <p>some text</p>
   <p>some text</p><p>some text</p>
   <p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>
   </section>

</body>
</html>

Upvotes: 0

Soulwish
Soulwish

Reputation: 153

Emma. I just created a fiddle for your case. You can set negative margin and positive padding for the sections specified by id attributes. Hope, my answer will be helpful for you.

Upvotes: 3

Related Questions