How to code a blog-style layout with in-page anchors

Welcome! This tutorial introduces pieces of coding in a natural order that a layout is coded. At the end, you will have a finished product that looks like this. Each step (for a total of seven) has a working example at the end demonstrating our progress. If you prefer not to read, you could also skip to step 7 to see the full code which you can edit. Refer back if you need to!

Credit?

I have no rules about crediting because this guide just shows you the basic skeleton. Feel free to link back.

References

These are guides on some very relevant basics. Please take a brief look if you are new to CSS, they will be here if you need them (in order): Now let's begin! I hope you will find this lesson to be quick and painless.

0: Your layout image

Let's make sure your image is good and ready for the long run! This specific style of layout must have a specific image. You can refer to this model:

Of course, your image is probably bigger than this example. (Make it as large as you want to)! It should include a solid color background and the titles of the navigation links that are part of the graphic (decorate them in any way). You don't have to put exactly four links for your navigation; add as many or few links as you like.

Variants of the layout image

For your page layout, you might want to use an image background instead of a solid color background. In your layout image, this means that you should not include a solid color background like the above example! There will be a few adjustments in the code (but you can do this at the end). Click here for more information.

1: Neopets bar and copyright (optional)

This code removes the copyright text (.sf display none) and changes the background color of the neopets bar.

Actions: You can skip this code altogether, or go along with it and substitute COLOR with a hex value or color name to edit the background as shown in the image.

Here is a working example of what we have so far:

Extra: Note whatever formatting you use on table will affect all other tables on your page. So if you gave a background to the neopets header, this would also affect other tables. Fortunately, you can code your tables this way to get rid of that background:

2: Inserting the layout image

Now we will code the layout image onto the page. This code adds a solid color body background and a div (with the id "bg") used to display your layout image.

Actions: The COLOR of the body background must be the same as the background color of your image. Replace "IMAGE URL" with the url of your image, and keep the quotes. The width and height of #bg are the same width and height of your image in pixels. For example, "width: 700px;".

Here is a working example of what we have so far, using the example image from step 0. I encourage you to copy and paste this on a petpage to test it out before going onto the next step.

3: Centering the layout (continued from 2)

This is the previous code again, but with a few additions. The div #bg is now centered by margin: 0 auto; (the shorthand equivalent for "margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;"). You could see that the value "auto" on the left and right margins gives the horizontal centering effect.

However, this does not work on Internet Explorer (or at least old browser versions, but let us be on the safe side). So, we fix this by adding body {text-align: center;} to center the content of the body in IE. Therefore #bg, which is in the body, will be centered.

Now preview the code again to see the layout centered:

4: The content box

This code introduces another div called #content. This div will hold all the text and image content of your page, and it will be positioned over your layout image in the right place. It is contained inside #bg.

Actions: Add the CSS code inside your style tags. Edit your current HTML code to include the inline styles as shown above in the HTML section. The #content div will have dimension (width and height) and positioning (top and left) which you should edit. In your HTML code, the #content tag should be inside the #bg tag as shown.

As always, here is a working example:

Because our layout is centered, #content will not be positioned in respect to the body (outer edges of the page) as you might expect from absolute positioning. But notice how #content is absolute positioned inside a relative positioned #bg. In other words,

the positioning of #content is in respect to #bg, your image!

This means that "left:100px;" on #content will move it 100 pixels to the right from the left outer edge of #bg, NOT the outer edge of the body!

Figuring out all the numbers

Important tip: Having trouble finding the values for the dimension and positioning of #content? Here is a trick I like to use, and it requires a little trial and error.

First, put a temporary background on #content so you can see it on preview. Now you can edit the dimension and the positioning until they are correct. I like to first get #content positioned at the top left corner, then figure out its width and height. Here's what I mean (please preview):

Initially, you would enter arbitrary values based on your best guess for the width, height and positioning of #content. Then edit them as you go using trial and error.

5: Creating multiple pages

In order to create the multiple page effect, we introduce the last div called .box. Think of it as one "page" out of the other pages you may have. Each .box goes inside the #content div, which no longer scrolls due to "overflow: hidden;". However, a .box is scrollable by "overflow: auto;" as you add more content into it.

You can tell it is our intention for #content to be able to "view" only one .box at a time, while all other "pages" it contains are hidden (due to overflow hidden). Now imagine the #content div jumping from the first .box to the second. This is the multiple page effect, and soon to be our next goal using anchors!

Actions: Add the CSS code, including the "overflow: hidden;" line in #content. The WIDTH and HEIGHT of .box should be the same width and height of #content. You can edit the font and line-height styles. Finally, add some divs with class "box" inside the #content div as shown in the HTML section.

Your code should now look something like this:

6: Your first anchor link

Here is the format of one anchor link. We will give this link a name, .link1, and find its dimension and positioning. The trial and error trick from step 4 comes back into play, prompting the temporary background on .link1 ("background: blue;" shown in parentheses).

Same as #content, the positioning of your links is in respect to #bg, not body!

In the HTML section, there are two parts to an anchor link. The actual link tag (1) should go inside #bg but before #content. The anchor (2) goes directly above its corresponding .box. For either code, you should enter nothing inside the link tags.

This is what it should look like after the first link is coded:

7: The finished product

We will now add the next link, and it should have a unique name from the other links (link2, link3, link4 and so on). Repeat step 6 until every link is done.

Congratulations, you have coded a blog-style layout with in-page anchors in seven steps!

8: Some final adjustments

Here is a list of codes to finish off your awesome new layout. From this point, add and edit as you like! (Any suggestions? This list is currently being updated).

Padding

Provides a space to prevent your text from touching the edges of your div. Of course, you can adjust how much padding you want. The reason we have created a separate div with padding is for cross-browser compatibility.

Image body background

If your layout image has transparent parts or is entirely boxed in, you can choose to set an image body background. There are several ways to do this, and you can get really creative. Remember to edit your existing body background.

Tiled image:

Non-repeating image and its positioning, with background color:

Enter the appropriate things for COLOR and IMAGE URL. You can replace LEFT and TOP with pixel values (such as 100px) which specify the amount of pixels to move your background image from the left and top sides of the page, respectively.

LEFT also takes the values "left", "center" and "right". TOP also takes the values "top", "center" and "bottom". You can mix these words with pixel values, for example: "left 100px" which places the image on the left side of the screen and 100 pixels down from the top.

Horizontally-repeating image and its positioning with background color:

Enter the appropriate things for COLOR and IMAGE URL. Enter a pixel value for TOP (such as 100px) or the value "top", "center" or "bottom".

We've come now to the end

My goal was for you to be able to see all the building blocks that structured this layout, so hopefully that has been achieved! If this tutorial was helpful to you, feel free to link me or pass it on to a friend. Also, send me any questions or comments to my account, brexis.

Link back

Thank you for the Zeawn button, you know who you are!

Thank you readers :)

NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-infinity.




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions