Div Layout - Repeating image help

Question

I am trying to get the main content portion of my website to be wrapped in this notebook style look.

However on the main content portion I have a repeating image that sometimes cuts off at halfway through the image and doesn't look right, does anyone have any ideas on how to fix this either in Photoshop or with CSS ?

I have to maintain a liquid layout vertically, with the fixed width, however I want it to look like a notebook and not cut out and look trashy.

Here is the site with the example of what happens, thanks:

http://www.seth-duncan.com/Test/Notebook/notebook.html

Answer 1

Your sample URL looks fine to me, but I think I know what you're talking about. What you would need to do, I think, is force the notebookContent div to a height that's the next multiple up of the binder-spine image's height. In jQuery, it'd be something like:

$(document).ready(function() {
    var height = $('#notebookContent').height();
    var offset = height % 24;
    if(offset)
        $('#notebookContent').css('min-height', height + 24 - offset);
});

Answer 2

If you want to use a repeating image as a background, you should use

div {line-height: 24px; /* equal to the height of the image */
    }

and then all other images (in your case content-Top.png and content-Bottom.png) should be multiples of that image-, or line-, height. The problem you're having, I think, is that the bottom image is 31px tall, the top image is 41px tall and the repeating image is 24px tall. Those heights aren't going to mesh well.

Javascript can resolve this, but you'll probably find it easier to simply edit your images so that they share common heights.

I think <br /> is equal to one line-height, and padding/margins between <p> tags should be adjusted to be equal to one (or whole multiples of) the line height to preserve the theme.

A List Apart has a good article on this kind of thing over here: http://www.alistapart.com/articles/settingtypeontheweb.

Also, because sometimes I just can't stop myself (ah, insomnia, my old enemy...), I cobbled together a demo-page for you, with the CSS on-page for your perusing-pleasure: http://www.davidrhysthomas.co.uk/so/notebook.html