Replies

May 27, 2014 11 years ago
Deadeye
Kisrah
User Avatar
Brainfreeze

I'm trying to turn one of my pets into a sort of Wikipedia article parody, and I'm stuck.

Some sample text on WoodEch's profile. I've got superscript numbers in a section of text at the top, which I want to link to text at the bottom. The idea is to mimic citations on Wiki articles.

I looked through Subeta CSS Compendium, and I think I need to use anchors? But I'm not sure how to go about it, and all the other topics I've read seem to deal with making hidden sections which are linked to. That's not what I want to do. I want everything visible on the page, but clicking a link jumps down to the relevant citation.

Is this possible? How can I do this?


HONK!

May 27, 2014 11 years ago
Adventure Captain
sonata
User Avatar

Well you're right about needing anchor links.

You'll want your superscript numbers to be links that lead to something on the page with an id. To do that you might want to wrap each citation in a div.

So it'd be set up sort of like the following.

<sup><a href="">1.</a></sup>

<div id="one">1. CITATION.</div>

That should make clicking the superscripted number bring you to the citation in question.

Art by
[tot=sonata]

May 27, 2014 11 years ago
Deadeye
Kisrah
User Avatar
Brainfreeze

Yep, that's what I need. Thanks. :)

There is one problem though. It makes everything on the page move up when I click the link. Is there any way to restrict it to moving just the description?


HONK!

May 27, 2014 11 years ago
Adventure Captain
sonata
User Avatar

I actually think if you change your page reset code a bit it should work just fine.

I tried it with mine and only the textbox moves.

Here (ignore the fact that my reset code totally screwed up your positioning)

Art by
[tot=sonata]

May 27, 2014 11 years ago
Deadeye
Kisrah
User Avatar
Brainfreeze

That's great. Thanks so much! :)


HONK!

May 27, 2014 11 years ago
Adventure Captain
sonata
User Avatar

, , , , , , { display:none; } , { background-color:transparent !important;height: auto !important; }

, , { margin: 0 !important; border: 0; }

This is what I use to reset the page. I think it removes roughly 200px worth of padding and margin to the left side, so you'd need to adjust your left positioning.

Art by
[tot=sonata]

May 27, 2014 11 years ago
Deadeye
Kisrah
User Avatar
Brainfreeze

Yep, I'm moving things about now and it looks to be around 150-200. Thanks for the info. That really helps me get everything back in place. I normally move everything around by trial and error! xD


HONK!

May 27, 2014 11 years ago
Adventure Captain
sonata
User Avatar

Hehe this way you also won't need to go into negative positioning unless you want to move anything off the page. ^^

Art by
[tot=sonata]

May 27, 2014 11 years ago
Deadeye
Kisrah
User Avatar
Brainfreeze

That's true! I was having to do that before. This really makes figuring that part out much easier. :D

Thanks again for your help. This is just what I needed. :)


HONK!

May 27, 2014 11 years ago
Adventure Captain
sonata
User Avatar

No problem. I'm glad I could help. ^^

Art by
[tot=sonata]

Please log in to reply to this topic.