Welcome to part 4 of our series on making your CSS Journal stand out from the rest. This part will be a carry on from the last one, so it's about usage of images on this.

First bit, if you remember in the last one, we made a header image, so in this, how do we move our subject further up to be on top of this image? (If you've been following the series and the exact code.)

You first need to change the padding on our journalbox to move the stuff up, so our subject in on our header. Then we need to add a margin (remember those?) to our journaltop so that we can move our journaltext down further so it's not on the header plus making the background transparent. This may take a bit of fiddling to get at first, but here's the CSS code I have for both of them.

.journalbox{
background: #FCFCFC url('[link]) repeat-x;
border: 2px solid #333333;
padding: 10px 0 0 0;
}
.journaltop{
background: transparent;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 9px;
color: #CCCCCC;
margin-bottom: 80px;
}

Content Box Header Image
Using an image for a heading inside the content.

Here is the image that I shall be using for this [link] - not the best image to use but this is only an example right?

.subimage{
background: url('imageurl') no-repeat;
width: 400px;
height: 20px;
}

<div class="subimage">Sub Heading</div>

Simple?

Placing Images
This bit is for placing images, or anything at all actually, into a certain area. For example, looking a this journal you see a thumbnail of my free CSS Journal to download. This was placed there using some simple CSS.

.featured{
position: absolute;
top: 10px;
right: 10px;
}

You place your div tag anywhere (header, body or footer).

Oh yes, it's really that simple. But for first tries, it may be annoying. I'll wait for you to find out. When doing these, you always want to use position: absolute. This means that you yourself are manually choosing where to place this div using the top or bottom, and the left or right. As you can see, I've used the top and right. We can continue adding this simply.

The top defines how far from the top the div should be placed, and the right does the same but with the right side inside.

.stamps{
position: absolute;
bottom: 10px;
left: 10px;
width: 100%;
text-align: center;
margin-bottom: 5px;
}

It's exactly the same here. We're placing it at the bottom of the journal.

Well, that's all for now, it's a small one, but can be helpful. And now, for the usual bit, some CSS Journals.

=dot-Silver - Now I don't really like to suggest myself for things, but this journal was requested to be made, and shows a journal with very basic CSS, also uses extra divs for the sub-headings and also the surrounding text boxes. Hint: transparent is also a background type.

*Lilyas - A lovely female who has the hobby of creating some interesting CSS designs and allows them to be downloaded for free (with copyright I believe)

*AnnaKirsten - Also having the snacks for creating free to use journals, but her current journal is a nice example of the scrollable divs.

Well who said simple can't be nice? Which is also why =f1lly is being put here.

Watch out for some free css journals coming from myself soon, and also the next part in the series which will be released tomorrow, though I shall tell you know, IE users, don't be impressed, since the stuff in it don't work in IE (Apart from one or two things).

Also, I'm available for any CSS Journal Commissions... for free! You have the design, I do the coding (Sounds fair)