Named Anchor tag styling

  • Resolved laptophobo

    (@laptophobo)


    12 years, 12 months ago

    I’ve applied some simple named anchors on a page (so when one clicks the corresponding link on the top of the page, they’re automatically taken to the content at the bottom of the page.) Here’s my tag:
    <a id="3"> </a>

    The tag itself works. However, when a person is logged-in and the WP dashboard bar on the top of the page appears, then part of the anchored content is hidden behind the dashboard area. So, I’d like to style the named anchor tag to position it lower (e.g.: margin-top: 20px). I’ve tried some variations of CSS, but none of the style attributes have worked so far. Any ideas out there?

    Thanks much!

Viewing 8 replies - 1 through 8 (of 8 total)

  • Try using Firefox with the Firebug add-on for this kind of work.
    https://getfirebug.com/

    What you could do is get rid of the WordPress dashboard bar, and that fixes the issue pretty easily. If you don’t want to do that, if I’m understanding correctly, giving the anchors a position of relative and then setting the top position to be 28px or more (which is the height of the WP dashboard bar) should show it.

    #anchor {
   position: relative;
   top: 28px; // or more
}

    This might mess up your alignment elsewhere though.

    Thread Starter laptophobo

    (@laptophobo)

    dkotte,
    I’ve tried that CSS style before (and just now again) and it doesn’t work. ??

    esmi,
    I don’t know why you recommended that page.

    Hmm.. I tried it out really quickly on a site of mine that has a similar thing and it seemed to work, other then it messed up alignment of some other items on the page. Do you by chance have a link to the site that I can check out and see?

    Thread Starter laptophobo

    (@laptophobo)

    Hi dkotter. Thanks for taking a look at this.

    Here’s the page: https://199.204.249.16/site/faq/support-and-socializaton/

    BTW, I’ve set the “top” attribute to 120px. (The reason the content sets a bit lower is that I’ve added some <p> spacing in the interim.

    From what I can tell, what you have now should work, with the anchor tags wrapped in a paragraph tag. What this does is when you click on the link, it jumps to above the question, not right to the question. So if you like it that way, I’d leave it how it is set up now, and if you need more spacing, either add some margin, padding, or a height attribute to that paragraph tag that contains the link.

    For example:

    <p style="height: 30px;"><a id="1"></a></p>

    The only issue with doing this is it adds more spacing between items, which you may not want.

    You also don’t have any content between the anchor tags. Sometimes this will make styles not work correctly, so you might need to add a blank space to get some of the previous styling you were trying to work.

    <a id="1">&nbsp</a>

    Thread Starter laptophobo

    (@laptophobo)

    Yes, the <p style="height: 30px;"><a id="1"></a></p> worked! Thanks much.

    Many thanks dkotter for this simple elegant solution!

    I had the same problem with wanting to re-position my named anchors, and adding the <p> tag + &nbsp; did the trick.

    I didn’t use height, but relative positioning, and it still worked – thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Named Anchor tag styling’ is closed to new replies.