CODEWITHSUNDEEP
htmlcssanchoroffset
user3138025
user3138025

Reputation: 825

offset anchor in another page

I have a series of items on my home page that point to anchors on other pages of my site. The user arrives at the right anchor, but the top few lines of the anchor are hidden behind the secondary page's menu. I've tried a few recommendations to offset, but I can seem to get it to work.

index.shtml subset:

  <ul>
    <li>
        <a href="/upcoming_events.shtml#march_madness" 
            title="March Madness Show">
            March Madness Show<br />
            Saturday March 11th, 2017 from 7:00 to 10:00 pm
        </a>
    </li>
    <li>
        <a href="/upcoming_events.shtml#earth_day" 
            title="Earth Day">
            Earth Day Event<br />
            Saturday April 22nd, 2017 from 7:30 to 10:00 pm
        </a>
    </li>
  </ul>

upcoming_events.shtml subset

<p class="anchor2">
    <a name="march_madness"></a>
    <strong>
        March madness Show - Saturday March 11th, 2017 
    </strong>
    <br />
    <a class="standard_paragraph">
    <i>Presented by The Good Art Series.</i>
    </a>
</p>
<!-- Details of event -->
<p class="anchor2">
    <a name="earth_day"></a>
    <strong>
        Earth Day Event - Saturday April 22nd, 2017 
    </strong>
    <br />
    <a class="standard_paragraph">
    <i>Presented by The Good Art Series.</i>
    </a>
</p>
<!-- Details of event -->

css subset

.anchor2 {
    vertical-align: bottom;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: normal;
    line-height: 18px;
    text-align: left;
    color: #000;
    font-weight: 900;
}

.anchor2:before { 
    display: block; 
    content: " "; 
    height: 250px;      
    margin-top: -250px;     
    visibility: hidden; 
}

How can I link to an anchor on another page and not have the top few lines of the event's text hidden behind the page's menu? Thanks for looking at this.

Upvotes: 0

Views: 171

Answers (1)

softbrewery
softbrewery

Reputation: 501

I think You will remove acnhor like a <a name="march_madness"></a> and set id to paragraph.

For example:

<p id="earth_day" class="anchor2">
     <strong>
       Earth Day Event - Saturday April 22nd, 2017 
     </strong>
     <br />
    <a class="standard_paragraph">
      <i>Presented by The Good Art Series.</i>
    </a>
</p>

Upvotes: 1

Related Questions