0

I am using four tabs in a page. Each tab section content have in bottom of the page

like

Header - style(fixed & height)
tabs(4) - tabTitle

tabContant1
tabContant2
tabContant3
tabContant4

Each tab defined by id, When i click the tabTitle, it goes to appropriate content section in same page.

Problem is,

for example, When i click the tabTitle2, tab2Conetent comes to page top that is in page header. at the same time, i have page header as fixed so tab2Content hide some part behind the header.
How to contents comes to below the fixed header

1 Answers1

0

You can use jQuery to define where exactly to go in the page, here's an example of how to make that work for you:

jQuery scroll to element

Or if you want to use just HTML, you can place an in-document anchor, such as this: 

<div>
    <a name="MyStopOne"></a>
</div>
<div style="margin-top:20px;">
    My Content Part One
</div>

Then simply link to it using HTML, as such:

<a href="#MyStopOne">Jump to Stop One</a>

Notice the style="margin-top", which gives you a way to pad your spacing between where you are jumping to and where your actual content is, overcoming the problem with the static header hiding a portion of your content upon jump.

Community
  • 1
  • 1
DoctorLouie
  • 2,668
  • 1
  • 16
  • 23
  • I dont want use margin because page header height is 300px so it is large. There is another option? –  Apr 23 '14 at 05:02
  • Write some script to give you ultimate control, hence the first option I gave in my answer. – DoctorLouie Apr 23 '14 at 05:03
  • Take a look at how I utilized the jQuery scrollTo function to gain maximum control, as well as fluidity, in how in-document linking worked: http://vps-net.com/w3c.htm?st=TR/html-design-principles/ – DoctorLouie Apr 23 '14 at 05:07