Relative URI Anchors with Example

HTML & CSS
1

It’s been decades since I last coded a list of URI anchors and I’d appreciate help putting it all together under a <nav> element. In the example below I have 12 menu items called “POST ##”. As you can see I want these under <h3> tags:

<h3>./SVG_TABLE.html#POST 84</h3>
<h3>./SVG_TABLE.html#POST 85</h3>
<h3>./SVG_TABLE.html#POST 90</h3>
<h3>./SVG_TABLE.html#POST 93</h3>
<h3>./SVG_TABLE.html#POST 101</h3>
<h3>./SVG_TABLE.html#POST 110</h3>
<h3>./SVG_TABLE.html#POST 155</h3>
<h3>./SVG_TABLE.html#POST 173</h3>
<h3>./SVG_TABLE.html#POST 179a</h3>
<h3>./SVG_TABLE.html#POST 179b</h3>
<h3>./SVG_TABLE.html#POST 179c</h3>
<h3>./SVG_TABLE.html#POST 179d</h3>

I got some of this from the W3 site
https://w3.org/TR/html401/struct/links.html#:~:text=URIs%20that%20designate%20anchors%20contain,relative%20URI%3A%20.%2Fone.

Here is an example (Latinized) of the page content. How do I put it altogether?

Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur. Idemque diviserunt naturam hominis in animum et corpus.

#POST 84
Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Si mala non sunt, iacet omnis ratio Peripateticorum.

#POST 85
Ex quo, id quod omnes expetunt, beate vivendi ratio inveniri et comparari potest. Nam quibus rebus efficiuntur voluptates, eae non sunt in potestate sapientis.

#POST 90
Innumerabilia dici possunt in hanc sententiam, sed non necesse est. Sequitur disserendi ratio cognitioque naturae.

#POST 93
Nunc dicam de voluptate, nihil scilicet novi, ea tamen, quae te ipsum probaturum esse confidam.

#POST 101
Memini vero, inquam; At, illa, ut vobis placet, partem quandam tuetur, reliquam deserit. Nam de summo mox, ut dixi, videbimus et ad id explicandum disputationem omnem conferemus.

#POST 110
Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Sed vos squalidius, illorum vides quam niteat oratio.

#POST 155
Te ipsum, dignissimum maioribus tuis, voluptasne induxit, ut adolescentulus eriperes P. Hoc mihi cum tuo fratre convenit.

#POST 173
Negabat igitur ullam esse artem, quae ipsa a se proficisceretur; Et hunc idem dico, inquieta sed ad virtutes et ad vitia nihil interesse.

#POST 179a
Summum a vobis bonum voluptas dicitur. Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit.

#POST 179b
Quamquam id quidem licebit iis existimare, qui legerint. Isto modo, ne si avia quidem eius nata non esset. Huius ego nunc auctoritatem sequens idem faciam.

#POST 179c
Quod mihi quidem visus est, cum sciret, velle tamen confitentem audire Torquatum. Sequitur disserendi ratio cognitioque naturae.

#POST 179d
Isto modo, ne si avia quidem eius nata non esset. Quo plebiscito decreta a senatu est consuli quaestio Cn.

1 Like
2

The following doesn’t work (showing Post 84%):

From W3Schools

<a href="#section2">Go to Section 2</a>
which I substituted for
<h2><a href="#84">Go to POST 84</a></h2>

 and

<h2 id="section2">Section 2</h2>
which I substituted for
<td class="post84">84</td>

3

You didn’t follow the pattern they showed. The two mistakes are:

  1. the href on the anchor must be the same as the ID on the target:

    <h2><a href="#post84">Go to POST 84</a></h2>
<td id="post84">84</td>

  2. The other mistake was to use class on the td rather than an ID. It must be an ID.

Also note that IDs (and classes, I think), aren’t meant to start with a digit, so use href="#post84" & <td id="post84">84</td> etc.

1 Like
4

Thank you Ralph. I vaguely recall something about the ID on these little guys but the no-number naming convention was new to me.

1 Like
5

I’d like to get a little more ambitious with this block of URIs Ralph (or anyone). This page runs about 3,000 lines of code with 12 Posts. I cannot believe attempting what I’m hoping to achieve would be possible in a traditional Table format without great pain so I’m going to let a graphic show you what I want to accomplish:

There will be 4 columns to this (Grid, Flex, Other) Layout and as you can see the number of entries in column 4 is significantly longer than in column 2. I want to have rotated column headings occupying the “space” of what would be columns 1 & 3 in a traditional table. And I’ll need to style the respective indices as is obvious by their size differences. Here is the graphic. It’s very basic as you can see. Thank you in advance anyone willing to help me take this to the next level! Oh — before I forget, much of the action in column 4 is landing in the CSS of this document. I don’t think that’s going to be a problem but if so let me know and I’ll have to seriously limit column 4 (which is not what I want to do if I can help it!). :biggrin:

TABLES WITH ROTATED TEXT
TABLES WITH ROTATED TEXT700×1200 246 KB

6

Here’s the bare bones of what you need as I’m still away and too busy too flesh this out fully :slight_smile: .

You can remove the borders and change the widths as required but you shouldn’t try to later the vertical text too much apart from font-size etc.

You should be able to work it out with any luck.

1 Like
7

Maestro! Well I won’t pretend I haven’t missed you (I feel like one of my limbs is missing!!) :tongue: I got most of your post. Okay let me look at this. We’re going vertical! :weee:

8

Okay I have a question about Paul’s code: Up to now I’ve styled each of the posts and it wasn’t too bad because there’s only 12 of them. But the line links are too many to attach an individual styles to each link; there are 30 of them and I’m cognizant of Ralph reminding me that these have to be IDs. Is there no way to avoid 30 individual styles on the line links? Or some way to — I don’t know — zip them or something?

9

Unless you actually want to style (ie, specific fonts, colors, etc) each of these posts or lines, they don’t need to be referenced in your css at all. You would just have the Line 1234 in the nav, and blah blah in the html body where you expect the nav link to jump to (or “near” is more accurate). There need be no other mention of an id called #line1234 anywhere.

But yes, if each is styled differently from the others, then you need all 30 of them listed and defined in your css.

Get too many of these and of course even that will be troublesome, at which point you probably want a different solution, like server-side code to write this all out, or some JS to watch for the clicks and figure out where to jump to.

10

Thank you, yes I’ve got to style all of them. It was only the matter of a few minutes and it’s done. They look great and man are these links fast! BOOM and you’re there. I forgot how much fun these are. :biggrin:

11

I’m almost afraid to ask this question (it’s so dumb) and I wouldn’t were it not for the fact that I’m having difficulty with just one of my URIs. They can go backwards, can’t they? In other words I can have a URI at the end of the page that links you back to the beginning of the page? I have an updated Codepen following. The line I’m having trouble with is line 3284 all the way at the end of the document. It should be a link back to the abbreviation ‘RFC’ in my aside (the very beginning of the page). Here is the Codepen: https://codepen.io/semicodin/pen/abgZzzP

12

Yes you can go anywhere.

You didn’t use an anchor with an href as in all the other examples.

It should be:

<td><a href="#line885" style="color: crimson">Go back to the beginning.</a></td>

1 Like
13

Thank you Paul! :biggrin:

14

I’m sorry one last question Paul: I’m trying to style the anchor for that last URI and nothing I’ve tried works. I’ve labeled the style “goback” and given it its own ID. Here’s my latest attempt:

#goback a:link {
    color: crimson;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 3rem;
    line-height: 1.1;
}
#goback a:visited {
    color: crimson;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 3rem;
    line-height: 1.1;
}

and in the HTML:

<td><span id="goback">
<a href="#line885">
Go back to the beginning.</a></span></td></tr>

It basically displays as just another bit of content in the table, and thus isn’t distinguishing itself with the color and font I want to use to make it stand out.

15

That looks as though it should work but I’m only on a mobile at the moment and can’t double check the code until later.

The span is superfluos though and you could have styled the anchor directly.

1 Like
16

Paul I fiddled with some things and got it working. Please enjoy your vacation! :tongue:

1 Like
17

This is off topic for my thread but it is sort of related. In this document the main content consists of even/odd nth-child striping. I want to radically alter the layout to have the striping appear every 3rd row . . . and then I want a top-border on every 3rd row starting with the 5th row. So the border would be 5 8 11 14 etc. Two rows of white then a pale blue stripe.

I figured out how to do the striping by myself and I researched this solution for the border —

.table3 tbody tr:nth-child(3n+5) {
    border-top: 6px solid black;
}

— but it doesn’t work. Thank you for your help in getting this border to work anybody! :tongue:

18

Borders only work on the tr element in the collapsing border model.

e.g.

table {
  border-collapse: collapse;
}

However that will likely break your other borders although I can’t test at the moment as only on a mobile.

Maybe instead try:

.table3 tbody tr:nth-child(3n+5) td {
    border-top: 6px solid black;
}
1 Like
19

No it doesn’t work. Thanks anyway Paul. If you have any other ideas let me know. I may have to hold my nose and go (cue theme from Jaws) inline. :tongue:

20

Try it again but this time use the code I gave you and not your code.:slight_smile:

.table3 tbody tr:nth-child(3n+5) td {
    border-top: 6px solid black;
}

Note the above code is styling the td element and not the tr element because the tr element cannot have a border in that context.

1 Like