if i wanted to have information inside a "picture frame" that looks like this

how would you go about coding it so that text is inside, no scrollbar

would you use old fashioned tables with backgrounds of the segment of the frame

top, top left, top right, middle (y-repeat), bottom, bottom right, bottom left

or would you use divs and floats with same segments mentioned above?

can you avoid using segments? will it be a bitch to get it working right?

You’re thinking too hard. Keep it simple.

Wrapper container element with expandable background image supporting flexible content.

A header and footer element containing the background images of the corresponding header and footer. Each background will contain the corners.

A content element centered between the wrapper element with a specified width, and an additional padding element within that for padding support without fucking up ie box model.

<div class="picture-frame">
  <div class="picture-frame-header" />
  <div class="picture-frame-content">
    <div class="padding">
      <p>Hello World</p>
    </div>
  </div>
  <div class="picture-frame-footer" />
</div>

i would slice the mid section to about 2 or 3 pixels and have them repeat on y. would help with the image load.

<div class="picture-frame">
  <div class="picture-frame-header" />
  <div class="picture-frame-content">
    <div class="padding">
      <p>Hello World</p>
    </div>
  </div>
  <div class="picture-frame-footer" />
</div>

ok i know i got it wrong but i am following what you say and i come up with this layout

im misunderstanding 1 element that you describe, either its the header or the overall div class "picture-frame"

thats how i would do it.

but there would be a huge empty space in top if i wanted to put text in there.

do i have to work around that and design something that "fits" in that long header?

you can set those images as background images. this will give you the ability to put text on top of the images without any margin issues.

send me the precut images and i can probably code it for you in a few minutes.

I know.

You can essentially put anything between <header /> and <footer />. If you don’t want to, there is the margin attribute that you can apply to the <content /> element.

hello sexies

thats for a static design

what if i wanted it to be for a dynamic design if lets say the information i wanted in there would be passed on in there by php

u know what im getting into semantics here, that works ill just use the 3 div rule thanks kingtoad

no way dude. i PMd you

If you have any useful advice that is relevant to this thread, you should keep it public instead of PM. Many people could use that information and would prevent duplicate thread creations in the future.

I’m just not comfortable posting the link that i used this style sheet arrangement for , so i hope this helps

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: url(gfx/bk.jpg); /* GREEN- Vertical repeating section of picture frame */ 
	background-color: #000000; 
	background-position: 50% 0%; /* center it */
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
}
.oneColFixCtr #bigwrapper {
	background: url(gfx/bk-title.jpg) no-repeat; /* BLUE - Top Part of the frame */
	background-position: 50% 0%; /* center it */
	height: 500px;
	margin: 0 auto;
	padding: 285px 0 0 0; /* padded to clear  the top bar of the picture frame */
	border: 0;
	text-align: center;
	
}
.oneColFixCtr #container { /* i needed this but his design might not */
	width: 980px;  
	margin: 0 auto;
	padding: 0;
	border: 0px solid #000000;
	text-align: left;
 
 
}
 
.oneColFixCtr #wrapper	{  /* my content went in this one */
	float: right;
	background: #FFFFFF url(gfx/white-grad.gif) repeat-x; 
	width: 960px;
	padding: 10px;
	margin: 0px 0px 10px 0px;

the body gets the middle section repeating background. GREEN AREA
the bigwrapper on top of it gets the top part of the frame. BLUE AREA
the container is for the content.
the wrapper is for the black background and the content. Inside his frame (in his case he could probably do with out this bit, but in my project the background color wasnt cooperating)

The red section, bottom of the frame, could go in a container using a negative margin or something like that probably