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

Welcome to my page!

This step-by-step 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.

Helpful references

These are some guides on the relevant topics which I do not cover. 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, and what I use profusely
• 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.

I'm listed!

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

1: Neopets bar and copyright (optional)

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

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

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> td { background: #000; } .sf { display: none; } </style>

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

<table><tr><td style="background: none;"> 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 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> td { 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> td { 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> td { 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> td { 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; margin-bottom: 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. Also note that "height" and "margin-bottom" of .box have the same HEIGHT value (you can edit the other styles, such as the font and line-height). 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> td { 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; margin-bottom: 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> td { 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; margin-bottom: 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> td { 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; margin-bottom: 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! (This list is currently being updated). I have no idea what else to put here!

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.

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.