HTML Forum

**SouthEast** · 07-19-2009, 06:17 PM

Hey, I apologise if this is in the wrong section,

Im having a spot of trouble with photoshop/dreamweaver.

I would like to make a layout in photoshop consisting of a simple header, body section, and footer. However I would like the body section to scroll/repeat as I add more content, like a layer in dreamweaver that automatically stretches down with the more content.

Im not too good at explaining things, so if anyone would like to ask questions Id be very happy to cooperate

Thanks.

**konetch** · 07-19-2009, 06:26 PM

I don't use dreamweaver so I wouldn't know how to make it with that, but if you would like to create it with code you'll have to add

Code:

overflow:auto

to whatever you're creating

Example:

Code:

<html>
<head>
<style>
#wrapper {
 width:100px;
 height:100px;
 overflow:auto;
}
</style>
</head>
<body>
<div id="wrapper">
Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. 

Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. 

Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. 

Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. 

Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. 

Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. 

Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. 

Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. 

Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. 

Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. 
</div>
</body>
</html>

**racer x** · 07-19-2009, 06:31 PM

For your background in the body section area, just take a section of your ps layout and set it to repeat. Lets say, for ie, it is white paper with torn edges on the left and right side. Grab a section maybe 20 pixels high by the full width and set that as the background image for the section like so:

#body-section {
background:url(torn_paper.jpg) repeat-y;
}

This way, your content can keep growing while the background will keep repeating as needed automatically.

Of course, there are MANY different scenarios for all websites. This was just one example. Perhaps a screenshot of what type of image you want to background?

BTW - That is not the full extent of using CSS shorthand, just a quickie for this example.
Have some fun here: http://www.w3schools.com/css/css_examples.asp

**marketingman100** · 07-20-2009, 12:45 AM

A lot depends on the graphic you want as your background.

For instance if you are using a simple gradient as your background
you could creat the graphic 1px height and the width of the body section and use the repeat method described by racer x. You would not even have to use his 20px.

But if you have a picture of a house for example. You would have to set it to the width of the body and the height of the picture and then use the above cited repeat method. Be aware though that most pictures repeated end up making the site look like crapola. Where as some designed patterns don't come out so bad when repeated.

A plain sedate background color is always the best for people with vision problems.
And won't conflict with your text. Remember Information Dissemination is your goal.
Not creating a design that will give people nightmares.

**SouthEast** · 08:58 AM

Hey thanks for all your help, Just to add more I will make a small example and highlight what I need.

Il edit this post with the graphic.

Thanks.

Sorry for my near retarded illustrations!

The reason I want it like this is so I can have another main background for the page,

**marketingman100** · 07-20-2009, 10:46 AM

If all you are doing is a plain white background you don't need a graphic at all.
Just use a background color. When you add content it will expand automatically.

Are you using two columns? Then one of them has to be a floating div.

Dreamweaver has a template for a two column layout with a fixed header and footer. Go look at it's code.

Barring the wrath of the "Standards Nazi's" you could do this with a table layout
too.