T U T O R I A L     S E R I E S

The rap div & Images

So you've changed some fonts, altered some colours, but now you want to make the whole page that bit more you. Would a background help ?
Here is one way to do it.

Your default page looks like this.

What I'll show you here will make everything you see narrower, and so leave space down the sides - and on the top - for some images of your choice.

Now you don't need to alter your 'index.php', but you do need to know that on line 34 of that file is this;
<div id="rap">
Now remember that computers are dumb, they do exactly as they are told. Because, in a default install, there is no such thing as 'rap' defined, this statement is ignored. What we do is define what we want the 'rap' to be. By the way, it's short for 'wrapper'. This 'div rap' will wrap the whole page up slightly differently.

First thing to do is define the 'rap'.
Here's what we are going to put into your style.css;

#rap {
margin: 0px 100px 0px 100px;
border: solid #000 1px;
background: white;
}

This code means that everything which follows it in the 'index.php' will be put into a wrapper that has no top margin, has a 100 pixel right margin, no bottom margin and a 100 pixel left margin.
Also, the border of the area will be a solid 1 pixel line in black.
The background of this new area will be white.
With me so far ?

Now paste that into your style.css. (It doesn't matter where at all).

Now go your weblog and refresh the page. Bingo ! It's not worked ! Yay!
The problem is the menu ..... it just is not behaving. But this is not a problem.

Go look at your css, and for the part that looks like this;

#menu {
background: #fff;
border-left: 1px dotted #ccc;
border-top: solid 3px #e0e6e0;
padding: 20px 0 10px 30px;
position: absolute;
right: 2px;
top: 0px;
width: 11em;
}

Now it doesn't really matter - because I'm not sure myself - why the menu didn't play ball, but all we need to change is a couple of numbers.
The guilty parts are these two lines;

right: 2px;
top: 0px;

The 'right' line there is how many pixels the menu should be away from the right side of the screen, and the 'top' line is how far from the top of the screen it must be.
This is where you need to fiddle as I can't give you the exact numbers to go with. I can't because I don't know your screen resolution, I don't know if you are actually doing this on a default template. Either way, alter only one value at a time.
I suggest these values;

right: 104px;
top: 88px;

See how your menu fits in either direction, and adjust the numbers accordingly.

Eventually, you should end up with a layout that looks pretty damn close to this;

and now you can put backgrounds in.

If the top border of the menu starts to annoy you because you can't seem to get the positioning spot on, then change it. At the moment it is;

border-top: solid 3px #e0e6e0;

Delete the line if you want, or make it smaller. Do what you need to make your design be what you want it to be.

I promised a space right at the top didn't I ?

#rap {
margin: 0px 200px 0px 0px;
border: solid #000 1px;
background: white;
}

You've probably figured it out, but if you change the first number after margin: to 100px, then your whole weblog will be bumped 100 pixels down the screen. Again, you will need to make changes to the top: in your #menu.

How do you want your image to appear ? You have a few options !

If you want it to be repeated horizontally only, add this line under your new line;
background-repeat: repeat x;

If you want the image repeated vertically only, add this line;
background-repeat: repeat y;

If you want the image to be repeated both across and down, it's this line;
background-repeat: repeat;

And if you want your image to only be shown the once;
background-repeat: no-repeat;

The best advice I can give is to experiment.......