Linking items on two different webpages Options

[Lee Batchelor]

Hi all,

I have names of soldiers from WWI on two different webpages on the same website that I wish to link. The names reside inside tables, which are housed in <div> tags. It was the easiest way to design this - please accept that idea for now 😀.

I tagged the name on the source page and bookmarked it on the destination page. Everything worked find. The links were perfect. Problem: On the destination page, there is a fixed banner at the top about 100px tall. When I click the name on the source page, it takes me the name on the destination page but the information is partially obscured by the fixed banner. I tried writing a class in my CSS sheet to push the name down but it messed up the row spacing in the destination page table.

How to get around this issue? Many thanks...

- Lee

[Lee Batchelor]

I wanted to edit my post but don't see a button for that. Okay, now there is an Edit button on this post. There must be a time limit on the button. Here is some more information. I uploaded two images.

The first one is the source page. As you can see, Baxter, Henry is the name I want to click and be taken to a more extensive article about him. His name is in a table, along with other Great War vets.
The second one is what I'm getting. The green banner partially obscures Henry's info. I need to have the info moved down below the banner. I tried using an anchor tag to compensate for the banner height, but it messes up the table spacing in which Henry's detail reside on the destination page.

The information on these pages is in public domain. No copyrights are violated. Thanks.

This post has been edited by Lee Batchelor: Aug 23 2022, 08:28 AM

[Christian J]

I wanted to edit my post but don't see a button for that. Okay, now there is an Edit button on this post. There must be a time limit on the button.

Correct, one hour: https://forums.htmlhelp.com/index.php?act=boardrules

It's hard to say without seeing the HTML, but in principle you could give a top padding to the destination element only when it's targetted. Something like this:

CODE

div {
background: pink;
height: 100px;
width: 50%;
position: fixed;
}

p {
margin: 0;
text-align: right;
}

p:target {
padding-top: 100px;
border: 1px solid;
}


<div>
<a href="#foo">foo</a>
<a href="#bar">bar</a>
<a href="#baz">baz</a>
</div>

<p id="foo">foo</p>
<p id="bar">bar</p>
<p id="baz">baz</p>

Keep in mind fixed banners will always use up a lot of screen space on smaller screens, such as on smartphones.

[Lee Batchelor]

Hi Christian,

Many thanks for chiming in. I get what you're saying. I'll give your idea a try and report back. Thanks again!

[Lee Batchelor]

Hi again, Christian.

I'm going to alter my CSS sheets to make the top banner position "relative" instead of "fixed." There are 187 htm pages on this site but I only need to alter 6 CSS sheets. That solved the issue.

I like your idea of not keeping the banner fixed for use on smaller screens like iPads, Androids, and laptops. It makes sense. Once again...thanks!