user3138025 user3138025 - 1 year ago 43
CSS Question

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.

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download