one column liquid layout

I'm a little confused as to what you're after.

I think an annotated image would make it easier for me to understand

Thank you,

Here is a wireframe with a little style and some really bad colors :jawdrop: but functionally it is what I have sketched. The navigation menu items will have images behind them too and will also change when the mouse hovers over them. This is not shown in the sketch.

TIA
-SR

oh yea, when the browser window is resized I want the content to stay in the middle ... I've attached an example.

Thanks again for any advice ...

What problems were you having with your earlier approaches? What did you attempt?

that's a tricky layout if you want the content to be able to expand vertically as well. seems like our design department is doing more and more of that and I'm losing more and more hair.

I think one of the questions you're asking in there is how to keep the background image centered. that's pretty easy.

#myDiv {
background: #yourhex url(bg.gif) 50% 0 repeat-x;
}


the key there is that 50%. that's positioning the the center of bg image at the horizontal center of the container.

Will

Here is the css - the issue is placing the text and images ("Logo", "Topic", etc.) over the background images and keeping them in the same spot when the browser is resized ...

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 100%;
}
#header {
color: #000000;
width: 100%;
float: left;
padding: 0px;
height: 68px;
margin: 0px 0px 0px 0px;
background: #333333 url(images/row1bkg.jpg) no-repeat scroll bottom center;
}
#headerseparator {
color: #000000;
width: 100%;
float: left;
padding: 0px;
height: 1px;
margin: 0px 0px 0px 0px;
background: #333333;
}
#banner {
color: #000000;
width: 100%;
float: left;
padding: 0px;
height: 169px;
margin: 0px 0px 0px 0px;
background: #333333 url(images/row2bkg.jpg) repeat scroll bottom center;
}
#mainshadow {
color: #000000;
width: 100%;
float: left;
padding: 0px;
height: 18px;
margin: 0px 0px 0px 0px;
background: #333333 url(images/row3shadow.png) no-repeat scroll top center;
}
#main {
color: #000000;
width:100%;
float: left;
padding:0px;
margin: 0px 0px 0px 0px;
background: #333333 url(images/row3shine.png) repeat-y scroll bottom center;
}
#footer {
color: #000000;
width: 100%;
clear: both;
margin: 0px 0px 0px 0px;
padding1: 0px;
background: #333333 url(images/row4shadow.jpg) no-repeat scroll top center;
}

/*
This is an attempt to place an image in a specific position on the screen
*/

img.center {
display: block;
margin-left: auto;
margin-right: auto;
padding-top:37px;
padding-left:590px;
}

and the html is a mess again, but

Title

Thanks Will,

Yea, but I do not want the content to expand vertically - I want it to stay centered. Although, I do want the divs to expand and let their color show on the left and right so it looks like the centered background images are expanding.

.... I'm gluing my hair back in as I type

hmmm ...

maybe I should do this ...

Not sure if there is a better way though.

The issue will be that I want to have the banner image on the right (the pie chart in the example attached) to float a little over the navigation and main rows (divs.)

Sorry Will,

EDIT - "Yea, but I do not want the content to expand horizontally - I want it to stay centered.

I had said “vertically” and that was incorrect.

Thanks
-SR

I've attached an annotated example.

Thank you in advance
-SR

the trick is that you are going to unfortunately need wrapper divs. since you need the images to expand full width but want to constrain the text. well, you could possibly do it without wrappers but it would be such a headache, I'd forgo a bit of semantics here (egad!).

header header-content leader leader-content content maincontent footer footer-content

is the basic structure that comes to mind. you apply the bg images to the top level ones and put you text inside the -content ones. that idea is that the top level ones do not get a width - they stretch the whole page width. each of the inner ones get a width and margin: 0em auto; to center them.

the reason to do it this way is so that you can have each 'row' have its own bg image. by aligning each rows bg image to the bottom of the container, your content can expand _vertically_ when some one either resizes the text or you dump more content in there then you originally intended.

hopefully that gets you going.

will

I think we're getting somewhere with this, but you're overcomplicating it slicing it up into too many different sections when you don't need to.

Could you possibly attach the images you want to use, for me to have a play with?

Yes I can. I thought it was too much complication for something simple.

I can slice up the Fireworks png I have, send the fireworks png or export to psd - what would be better?

I'm afraid that if I slice up the images I may continue to overcomplicate it and slice them up into too many different sections.

(I'll start making the images in the meantime ...)

Here are the images, let me know if you need the fireworks png or an exported psd.

if vertical expansion isn't required, you can make a vertical slice of your comp. make that the body bg. then, each section gets the centered background image slice that goes with it. this way, you wont need the inner containers (header-content...). when some one resizes the text though, your section backgrounds may lose alignment with the body background.

Thanks syrupcore, I appreciate the help.

A vertical slice of the back ground will not pick up the horizontal gradient across each of the horizontal rows.

Way too many slices, and you need to separate the text from the background images.

Going from this image here:

http://csscreator.com/files/wireframe.jpg

I see:

copyright text

I don't have photoshop I only have Paint Shop Pro X, do you know if that opens PSD files? If not I'll take a look at the image at work tomorrow, we have PS there. Could you attach the PSD file?

Thanks again Milton,

CSS has been an interesting experience for me. While I'm now clear on the possibilities of css, its practical / best use eludes me (i.e. what is the best way to architect a site giving a particular scenario.) I guess this comes from experience.

It would be great if, beyond the tutorials, there was a site that offered war stories - so new Users could learn practical skills from other user’s experience.

Glad I joined this site, I'm looking forward to learning more. I’m going to start playing with what you posted.

I'll send it to your email.
-SR

funny, I tried for a while to say that correctly - I obviously failed. I meant a vertical line from one of the far sides of your comp. if that tiles across the bg of your page, that will give you the horizontal slices for your gradient sections to fade into beyond your preset content width. so your content containers contain the horizontal gradients at 800px wide or whatever and then the vertical slice is there on the sides no matter how wide the browser gets. again though, this method ties you into preset heights. it's not really the way to go but if I was really short on time, I might pull a stunt like that.

The problem with full width stripes like this, I've found anyway, is that they really require two containers to be vertically flexible. One container to stretch all the way across the page and another container to constrain the width of the content. I seems thepineapplehead has a good idea going. So yeah, I'd ignore me. I don't know how the slicing will work but I'm looking forward to learning me a little something cause these sorts of layouts kick my butt.

will

Ah, I get it - I'm going to play with that.

Thanks will!