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. This guide just shows you the basic skeleton, which I think is common enough in many blog-style layouts. There are only a few ways to code certain things!

Helpful 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):

• Basics of CSS - Learn about style tags, and how selectors work
• Classes and IDs - Learn about Classes and IDs in CSS
• Margin/Padding - Be familiar with Margin and Padding
• CSS Shorthand - A useful trick to know! I use these shortcuts throughout this guide
• Page Anchors - All about page anchors, and some troubleshooting

Now let's begin! I hope you will find this lesson to be quick and painless.

Thank you readers :)

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)

table {background: COLOR;} .sf {display: none;}

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:

<style> table { background: #000; } .sf { display: none; } </style>

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:

<table style="background: none;"><tr><td> Your content here. </td></tr></table>

2: Inserting the layout image

body {background: COLOR;} #bg { background: url("IMAGE URL"); width: NUMBERpx; height: NUMBERpx; }<div id="bg"></div>

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.

<style> table { background: #000; } .sf { display: none; } body { background: #CAE9E6; } #bg { background: url("http://farm7.static.flickr.com/6013/5947813786_a0feba1bc7_o.jpg"); width: 500px; height: 400px; } </style> <div id="bg"></div>

3: Centering the layout (continued from 2)

body { ... text-align: center; } #bg { ... margin: 0 auto; }

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 (surprise)! 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:

<style> table { background: #000; } .sf { display: none; } body { background: #CAE9E6; text-align: center; } #bg { background: url("http://farm7.static.flickr.com/6013/5947813786_a0feba1bc7_o.jpg"); width: 500px; height: 400px; margin: 0 auto; } </style> <div id="bg"></div>

4: The content box

#content { width: NUMBERpx; height: NUMBERpx; top: NUMBERpx; left: NUMBERpx; }<div id="bg" style="position: relative;"> <div id="content" style="position: absolute;"></div> </div>

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:

<style> table { background: #000; } .sf { display: none; } body { background: #CAE9E6; text-align: center; } #bg { background: url("http://farm7.static.flickr.com/6013/5947813786_a0feba1bc7_o.jpg"); width: 500px; height: 400px; margin: 0 auto; } #content { width: 261px; height: 187px; top: 99px; left: 173px; } </style> <div id="bg" style="position: relative;"> <div id="content" style="position: absolute;"> My content </div> </div>

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):

<style> table { background: #000; } .sf { display: none; } body { background: #CAE9E6; text-align: center; } #bg { background: url("http://farm7.static.flickr.com/6013/5947813786_a0feba1bc7_o.jpg"); width: 500px; height: 400px; margin: 0 auto; } #content { width: 200px; height: 100px; top: 100px; left: 100px; background: blue; } </style> <div id="bg" style="position: relative;"> <div id="content" style="position: absolute;"></div> </div>

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

#content { ... overflow: hidden; } .box { width: WIDTHpx; height: HEIGHTpx; overflow: auto; text-align: left; font: 11px Verdana; line-height: 19px; } <div class="box">Page one</div> <div class="box">Page two</div> <div class="box">Page three</div>

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:

<style> table { background: #000; } .sf { display: none; } body { background: #CAE9E6; text-align: center; } #bg { background: url("http://farm7.static.flickr.com/6013/5947813786_a0feba1bc7_o.jpg"); width: 500px; height: 400px; margin: 0 auto; } #content { width: 261px; height: 187px; top: 99px; left: 173px; overflow: hidden; } .box { width: 261px; height: 187px; overflow: auto; text-align: left; font: 11px Verdana; line-height: 19px; } </style> <div id="bg" style="position: relative;"> <div id="content" style="position: absolute;"> <div class="box">Page one</div> <div class="box">Page two</div> <div class="box">Page three</div> <div class="box">Page four</div> </div> </div>

6: Your first anchor link

.link1 { width: NUMBERpx; height: NUMBERpx; top: NUMBERpx; left: NUMBERpx; (background: blue;) }1) <a href="#link1" class="link1" style="position: absolute;"></a> 2) <a name="link1"></a>

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:

<style> table { background: #000; } .sf { display: none; } body { background: #CAE9E6; text-align: center; } #bg { background: url("http://farm7.static.flickr.com/6013/5947813786_a0feba1bc7_o.jpg"); width: 500px; height: 400px; margin: 0 auto; } #content { width: 261px; height: 187px; top: 99px; left: 173px; overflow: hidden; } .box { width: 261px; height: 187px; overflow: auto; text-align: left; font: 11px Verdana; line-height: 19px; } .link1 { width: 80px; height: 30px; top: 165px; left: 75px; } </style> <div id="bg" style="position: relative;"> <a href="#link1" class="link1" style="position: absolute;"></a> <div id="content" style="position: absolute;"> <a name="link1"></a> <div class="box">Page one</div> <div class="box">Page two</div> <div class="box">Page three</div> <div class="box">Page four</div> </div> </div>

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!

<style> table { background: #000; } .sf { display: none; } body { background: #CAE9E6; text-align: center; } #bg { background: url("http://farm7.static.flickr.com/6013/5947813786_a0feba1bc7_o.jpg"); width: 500px; height: 400px; margin: 0 auto; } #content { width: 261px; height: 187px; top: 99px; left: 173px; overflow: hidden; } .box { width: 261px; height: 187px; overflow: auto; text-align: left; font: 11px Verdana; line-height: 19px; } .link1 { width: 80px; height: 30px; top: 168px; left: 75px; } .link2 { width: 80px; height: 30px; top: 211px; left: 75px; } .link3 { width: 80px; height: 30px; top: 254px; left: 75px; } .link4 { width: 80px; height: 30px; top: 297px; left: 104px; } </style> <div id="bg" style="position: relative;"> <a href="#link1" class="link1" style="position: absolute;"></a> <a href="#link2" class="link2" style="position: absolute;"></a> <a href="#link3" class="link3" style="position: absolute;"></a> <a href="#link4" class="link4" style="position: absolute;"></a> <div id="content" style="position: absolute;"> <a name="link1"></a> <div class="box">Page one</div> <a name="link2"></a> <div class="box">Page two</div> <a name="link3"></a> <div class="box">Page three</div> <a name="link4"></a> <div class="box">Page four</div> </div> </div>

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.

Instead of every:

<a name="linkname"></a> <div class="box"> A typical page </div>

Change to:

<a name="linkname"></a> <div class="box"><div style="padding: 5px;"> A page with padding! </div></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:

body { background: url("IMAGE URL"); text-align: center; }

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

body { background: COLOR url("IMAGE URL") no-repeat LEFT TOP; text-align:center; }

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:

body { background: COLOR url("IMAGE URL") repeat-x TOP; text-align:center; }

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".

Thank you for visiting!

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.