I've been trying for days to learn how to make anchor links in a pet profile (I think this is how it's called???), I've searched for tutorials with no success, so I wonder if someone could point me in the right direction?

: Would you like to make links to different section in a long text or different tabs? The codes for links to different text sections can be done by placing the 'anchors' in front of the first word of the section you want to jump to (or at the beginning of the first line of that text area, like this: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus magna ut magna condimentum, eget porta felis pharetra. Duis volutpat nisl aliquet metus eleifend rutrum. Quisque fermentum, elit sit amet faucibus bibendum, sapien mi porta tellus, sollicitudin condimentum nunc dui at lectus. Suspendisse accumsan a lectus id vulputate. Curabitur hendrerit elit non lacus porttitor, non dapibus ante tristique. Duis eget risus placerat, tincidunt nisl et, efficitur ex. Aliquam venenatis urna risus, convallis pellentesque odio dictum et. Curabitur mi leo, rutrum et feugiat et, efficitur sed metus. Etiam eget felis sollicitudin, mollis augue at, vulputate mi. Morbi condimentum eros vel urna feugiat, at venenatis lectus venenatis. Praesent orci quam, ullamcorper at lacus eu, egestas hendrerit nisi. Mauris finibus leo nec mauris tincidunt tincidunt. Duis erat orci, fermentum nec imperdiet non, volutpat hendrerit sem.

Then at the top of the page where you put the navigation, you use the following code: Jump to Sample Anchor

This will create a link at the top of a text block and when you click on it, it will direct you to the paragraph or section that you link to.

Anchor tabs are a little bit more complicated. wrote a guide here. There is a glitch so the first post wouldn't show, but if you click quote then copy the text to a notepad you should be able to access the guide. Down in the comments there is one user who linked to one of 's pets who has got a tab sample on their profile. If you click Ctrl U or View page code on that pet's profile you'll see how created tabs. If you've got any more questions I'd be happy to help where I can, though I'm pretty sure someone with expertise in coding would be more experienced and knowledgeable than me ^^

[edit] Please ignore all the slashes in the code box, except for the Somehow subeta automatically adds slashes whenever a quotation marks are used.

thank you very much for your explanation! And for the tabs tutorial too, it's all that I needed for both ^-^ Also, just one more thing... I'm not sure if it's possible and maybe I'm wanting too much for someone who just started to code like me, but I wanted to put a book on my pet's profile, like, when you click to change tabs the page flips... is that possible? Like, changing the background of each tab or something?

: Hiya yes I'm pretty sure you can change background for new 'pages', but I'm not sure whether or not the flip effect can be achieved with pure CSS (and whether Subeta actually allows it). I'll need to do some research on flip effect but if you're good with new background for different tabs then the answer is you can definitely do it :D

Ah yes, I dont need the flip effect, just changing background is good! I'll try to do some research around it now that I know it is possible (and what I need to do ^^)

I recall there being an issue with empty anchor tags not working properly in Firefox. I would recommend using IDs instead of for your anchors in any case. That is, instead of:

You would write:

(NOTE: Ignore the backslashes in the above code blocks, that's an annoying thing Subeta does when it formats the code. The forward slashes are fine.)

You can link to this exactly the same way as you would before, using the # symbol before the anchor.

Finally, I want to note that there are two ways to do anchor tabs. One is by using the :target attribute. You can think of it like this: when you click on a link to an anchor, it adds that anchor to the end of the URL in the address bar. Just like :hover styles an element when it's being hovered over, :target styles an element when it's being "targeted" by the URL like that.

The other way to do it avoids usage of the :target attribute, and also does not require any sort of absolute or fixed positioning, so it's sometimes preferable. The setup for this is:

1. A main container div that does NOT scroll (the scroll is set to hidden), and has a fixed size.
2. The main div contains a bunch of divs which I'll call pages. These pages have a fixed size as well - the same size as the main div - but they DO scroll. And each page has an ID.
3. Link to each page using its ID as an anchor.

Essentially, the pages are arranged one after another in the main div. But because of their fixed size, you can only see one at a time, depending on which one is currently scrolled to. You cannot manually scroll to any of them because scroll is hidden on the main container; when you scroll, it'll be the individual page that scrolls instead. But clicking the anchor will cause the main container to scroll to the correct page.

If there's interest, I can maybe write a clearer, more detailed tutorial on this (like with screenshots/examples and stuff)... But I hope this makes sense for now. Feel free to ask if something is confusing. Good luck!

Sorry to bother you again but I need a bit more help ;n; I made this profile with tabs and the page jumps every time you click it. I already tried both solutions in 's guide but they don't work D; Maybe you can tell me what's wrong?

the jumping happens because when you click an anchor link, it tries to bring you to the beginning of the section it's linking to. try setting your page height to 650px.

still jumping :<

hmm, i'm not 100% sure it'll work but i think the "height:650px" ought to go in the "html" styling, like this:

html {background:url(http://ava7patterns.com/patterns/1490.png) repeat white; height:650px; overflow:hidden}

If I did it right (which I'm not sure cause I'm a total noob at this), didn't worked Dx

You set the height for the overlay div (div#dark) too high. See here for my correction of the issue. I made the following changes to your code:

• I changed the html code to this one: body {background:url('http://ava7patterns.com/patterns/1490.png') repeat white; }

Then I changed the code for div#dark to this: { position:fixed; top:0px; left:0px; height:100%; width:100%; background-color:black; opacity:.3; z-index:1}

Basically if you set the overlay div's position to fixed and width and height to 100%, it will cover the whole page and even if the page is long enough to be scrollable, it will make sure the div always covers the whole screen. There is no need to set its height and width to 9000px :P. Just to make sure it inherits the height and width value from the body itself it's safe to place this div at the top of your html code, but I don't think it's necessary.

Hope it helps. I'll clear your code from my pet profile once you have taken a look.

You are awesome, thank you so much!! <3