SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed header: change default starting position of body text for #anchor tag

    Hi all, as the subject says, I am linking body anchor text on the same page to an index that has a fixed header. My body text is wrapped inside a div.

    .body{
    padding: 10px;
    margin-top: 89px;
    margin-bottom: 60px;
    margin-right: 190px;
    margin-left: 190px;
    text-align: justify;
    width: auto;
    }

    When I link and try to focus on the anchor text the page moves to the same place below the intended keywords every time. This is what I have tried.

    <a name="#sometext" style="position: relative; margin-top: -89px;">sometext</a>
    <a name="#sometext" style="position: relative; margin-top: 89px;">sometext</a>
    <a name="#sometext" style="position: relative; padding-top: -89px;">sometext</a>
    <a name="#sometext" style="position: relative; padding-top: 89px;">sometext</a>

    So far, there is no change in focus, the page moves to the same point below the intended text . Can someone point out what I am doing wrong?

    Dave

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    I'm not totally clear on what the situation is here. Are you saying that when you click a link to those anchors, the browser lands down below those links? It would be great to see this in action.

    The best way these days to link to a point on the page is with an ID. E.g. here is the link to click:

    Code:
    <a href="#something">Go to the Something section</a>
    and here is the text the browser would jump to:

    Code:
    <h2 id="something">The Something Section</h2>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If the issue is that that when you follow a fragment identifier the text slides under the fixed header then that is a downside of using fixed elements I'm afraid.

    You could use the :target pseudo class (ie9+) to add some padding to the top of the targetted element to move it under the fixed header.

    e.g.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body { padding:100px 0 0; }
    h1 {
    	height:100px;
    	border:1px solid #000;
    	position:fixed;
    	z-index:99;
    	background:red;
    	margin:0;
    	line-height:100px;
    	top:0;
    	right:0;
    	left:0;
    }
    h2 { margin:0 0; }
    h2:target{padding-top:100px}
    </style>
    </head>
    
    <body>
    <h1>Header</h1>
    <h2 id="section1">Section 1 starts here</h2>
    <p><a href="#section2">Go to section 2</a></p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <h2 id="section2">Section 2 starts here</h2>
    <p><a href="#section3">go to section 3</a></p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <h2 id="section3">Section 3 starts here</h2>
    <p><a href="#section4">go to section 4</a></p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <h2 id="section4">Section 4 starts here</h2>
    <p>test <a href="#section1">go to section 1</a></p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    </body>
    </html>
    Of course should the page content not be tall enough under the target element then you will get a gap above the targeted element as it only scrolls to the top of the page when there is not enough room on the page to see all of it.

    For older browsers there is no other choice but to use js and scroll the content into view or add a dummy id/element that is set xxpx above where you want the page to scroll to.

    e.g.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body { padding:0}
    h1 {
    	height:100px;
    	border:1px solid #000;
    	position:fixed;
    	z-index:99;
    	background:red;
    	margin:0;
    	line-height:100px;
    	top:0;
    	right:0;
    	left:0;
    }
    h2 { margin:0 0; }
    p{height:25px;margin:0}
    </style>
    </head>
    
    <body>
    <h1>Header</h1>
    <p id="section1">&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <h2>Section 1 starts here</h2>
    <p><a href="#section2">Go to section 2</a></p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p id="section2">test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <h2>Section 2 starts here</h2>
    <p><a href="#section3">go to section 3</a></p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p id="section3">test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <h2>Section 3 starts here</h2>
    <p><a href="#section4">go to section 4</a></p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p id="section4">test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <h2>Section 4 starts here</h2>
    <p>test <a href="#section1">go to section 1</a></p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    </body>
    </html>
    Of course that is rather convoluted and not always easy to implement in a varied page.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, I believe I have found some jquery snippets called >> jQuery.ScrollTo and jQuery.LocalScroll << to compensate for the fixed header, but I am having trouble applying them, if I am off base on the script can you refer me to the correct js.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    JS is not my thing but I've added some jquery to my original demo which seems to do what you want.

    http://www.pmob.co.uk/temp/scroll-to-fixed-header.htm

    Hope that helps (view source all the code is in the head).

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, should have thought before I typed.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found a fixed header and on-page anchor text css solution!

    Hi all, I have come across a nice, css solution without resorting to jquery... enjoy

    http://www.pixelflips.com/blog/ancho...-fixed-header/

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tizak View Post
    Found a fixed header and on-page anchor text css solution!

    Hi all, I have come across a nice, css solution without resorting to jquery... enjoy

    http://www.pixelflips.com/blog/ancho...-fixed-header/
    I already gave you that solution in post #3.

    .....or add a dummy id/element that is set xxpx above where you want the page to scroll to.

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for pointing that out Paul, too scattered, not enough time...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •