how do i get my site to look like this?

[jayeskreezy]

Ok I know this is simple, but it's erking me that I can't do it right. I want to do something with my page like on http://nerdyshirts.com/ , but I can't seem to get this effect. I've tried making the image a bg image in a cell, then I tried in a table, and I also tried to make it a page bg although I knew that wasn't what I really wanted. Basically I have an image of an old piece of paper that I'd like to be my webpage bg that holds all the content kind of like on nerdyshirts, but the thing that's not working right is when I add text past the visible part of the paper the image repeats making it look extremely tacky.

Basically I want the paper to stretch down the page if necessary, but not to repeat. Currently, I've been using tables to achieve this effect, but I feel like I might have to use some CSS instead.

Please let me know how I can go about doing this. It's really buggin me.

 

[CanadaRAM]

Umm. Have you, like, looked at the nerdyshirts source?

The reason they don't have a repeat is that all the tables and cells have absolute heights and widths. And there's no HTML text, so they control the cell size, and therefore the background image can be sized exactly.

But there is a way to do it even if you need expandable body area. That is to stop thinking of the background as a single graphic. Think of it as jigsaw puzzle that fits together and only certain pieces have to stretch.

Here's a simple example. Visualize a checkerboard of 9 squares

1 2 3
4 5 6
7 8 9

Number 5 is your body area, where the site content will go. You want it to be able to stretch. Columns 1.4.7 and 3.6.9 are fixed width. Rows 1.2.3 and 7.8.9 are fixed height. Cells 1,3,7, and 9 therefore are fixed both height and width, which is good because - wait for it - they are the only cells that have non-repeatable patterns in both dimensions.

So you slice your "notepaper" graphic into left edge, middle, right edge. Then you slice them top, middle bottom.

Then you carefully choose your body pattern (ruled lines) so that it repeats seamlessly in two dimensions. If you want, you can make the body cell BG wider than the anticipated table width, so that it won't repeat horizontally very often. Stretching a pattern like this horizontally in PS is pretty much invisible.

Your tattered edge on the left (4) and the edge on the right (6) have to repeat vertically and be the same height as the body BG -- so the rules match up. Make them tall enough so that the perforation pattern on the left isn't an obvious repeat. These left and right edges contain the detail that makes it look like notepaper, allowing the body to use a fairly static pattern.

The 2 and 8 cells aren't much of a challenge to make horizontally repeat because they are more or less plain background.

Now, when you add text and the page stretches down, the bottom edge maintains its integrity, and its only the 4.5.6 cells that repeat, so it preserves the illusion of a continuous page.

Your main challenge is getting a scan that is consistent in the body area, so you don't have colour gradients that will gum up the repeats.

An of course, if you make the table width fixed, you only have to worry about the vertical repeats.

Thanks
Trevor
CanadaRAM.com

 

[jayeskreezy]

Umm. Have you, like, looked at the nerdyshirts source?

Yes, actually I looked at it a lot before I did it. It appears they probably used photoshop to design it, but the # of tables in the source got to be too much for my eyes.

Thanks for your help though. It was very helpful reading through it and I will take a stab at it tomorrow. I tried to do the fixed thing though vertically, but not horizontally. I didn't even think about that. I didn't because I kind of hate fixed websites because I'm not a fan of scrolling horizontally, but I guess for the purpose I'm trying to serve I have no other choice.

Your main challenge is getting a scan that is consistent in the body area, so you don't have colour gradients that will gum up the repeats.

Yes, that is a challenge, but if you cheat and use the notebook paper pattern overlay in PS it makes it a little easier.

The reason they don't have a repeat is that all the tables and cells have absolute heights and widths. And there's no HTML text, so they control the cell size, and therefore the background image can be sized exactly.

Now, on the homepage they don't have much html text, but on the other pages they do have some.


*One last question. How do they get the images at the top to change every time the page loads? Is that javascript or php? Is there a site I can go to that will produce a similar code for me?

 

[pulsewidth947]

don't mind me, just bookmarking the thread for when I get home. Why are all the good tshirt places in the US? Dammit.

:EDIT: I felt guilty about jumping into your thread without any real input, so I found this link on Dynamic Javascript images thats easily hackable to do what you want. You could do it with PHP, I'd tell you how to do it, but I've been at work now for an hour and havent actually done any work yet, so I cant


:EDIT2: God I love PHP. An equivalent script is just 5 lines including the PHP tags

<?php 
$g_MaxImages = 6; 
$num = ( rand(0,$g_MaxImages-1)) + 1; 
print('<div id="headleft-rndpic" style="background-image:url(' . "$mosConfig_live_site/templates/caxton2/images/rand/$num" . '.jpg);"></div>'); 
?>

(I stole that from this site.)

 

[jayeskreezy]

canadaRAM your advice worked GREAT! The only thing i'm having trouble with now though is the body part or cell #5 in the example you gave. I want the text to wrap within the cell at the width I specify, but for some reason every time I type alot of text inside the cell instead of wrapping it just expands the cell and entire table. Is there a way to get this to wrap instead of expand? I tried creating a div and placing the text in there, but I still cant seem to get it and I don't know why. Please help me out if you can.

 

[CanadaRAM]

canadaRAM your advice worked GREAT! The only thing i'm having trouble with now though is the body part or cell #5 in the example you gave. I want the text to wrap within the cell at the width I specify, but for some reason every time I type alot of text inside the cell instead of wrapping it just expands the cell and entire table. Is there a way to get this to wrap instead of expand? I tried creating a div and placing the text in there, but I still cant seem to get it and I don't know why. Please help me out if you can.

Give the overall table a % width of the browser window like 90%
Make sure the NOWRAP tag is NOT on

Otherwise you'll have to go to a fixed width

 

[jayeskreezy]

how do I find out if the nowrap tag is on???