Layout challenge : Does CSS hold all the answers?

I'm walking out the door so I can't show you how but I have to comment about questions like these. ANYTHING that can be done in tables can be done using CSS. It is the nature of the beast! It's what it is supposed to do. CSS is what creates the look of a page. Tables are not designed to create the looks of a page.

Now, onto my holiday trip to the country.

Anything to get you motivated!!

If I understand you correctly (and I'm not sure that I do), you want the background image (overlay as you call it) to always be in line with the content left margin (40% out of content and 60% in)? So that if the browser window shrunk to fit just the content the background image would actually be partly off screen - is this correct? If so, the only way I can think to do this is to create an image that is wider than the content. It would need to be 750px wide plus double the amount the image sticks out the left side. You can then place this image in the body background at 50% and it would always be in line with the centered content. There's no reason to cut the image into 4 slices...

You could easily adapt this technique: http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html

I'm not so sure it works in IE/Win though.

Wolf,

Yep, that sounds good!

The header, midsection & footer all have different textured backgrounds, but I can see a workaround to that.

Also makes the image a bit larger than I would have liked (can't use transparency with jpg's...), for the 10k difference I may just load that pic with onLoad().

Thanks for the suggestion!

Triumph,

The example there isn't what I'm after, imagine the same thing but with the whole thing smaller, at a fixed-width, centered, and the hidden left hand side of the shell visible for as far as your browser goes.

So you want the same thing as the example but with different pictures?

Well then, there's your answer.

hummm.... nope!

I've updated the picture at the top of the post to give you a better idea.

let's see your code. Your updated pic is what I pictured and my suggestion should work. Wait - I just noticed you stated that the header and midsection have different textured backgrounds. Those will cover the body background. You may have to slice the image after all. Well, you could leave it as is for the body background (so the portion left of content will show as you want), and put the other portion in the header and midsection backgrounds (or an element therein).

The update really doesn't change my suggestion. It is what I would use in this situation.

Triumph,

...? Ok, but that's not what I want to do...

Wolf,

Got it sorted : Haven't sliced the picture, just used it in the header, clipped by the fixed height, AND in the midsection, offset from the top by the height of the header.

Using an interlaced gif format actually cut down the size of the pic by a bit ( "only" 15k now versus 9k for the 4 jpegs ), still a tad slow to my liking so I'll soon be making an effort to trim that down.

Here's how the template is looking so far : http://nick.byethost22.com/template.html
(comments welcome, of course!)

Thanks for the help!

...? Ok, but that's not what I want to do...I was just going by your pictures. Sorry. I though I was helping.

http://www.imaginekitty.com/lesigh/Triumph76599.html

Hey, that's it! -> http://www.imaginekitty.com/lesigh/Triumph76599.html

Seems to be a bit of confusion somewhere...

The page at the 1st url you posted had quite a different layout, is that the page you wanted to link to or should I have been reading something between the lines?

Are you sure? If you continue to reduce the size of that page the watermark image continues to move to the left, eventually disappearing altogether.

You could try splitting the image into three. The left portion of the globe, the right portion of the globe, and a slice to repeat outside of those two portions (that isn't quite true to your original images as the left and right hand tri-colours are slightly different, but its not a big alteration).

Sample page
Summary of code:

css - 
html {
  height: 100%;
}

body {
  background: #ffffde url(/images/background-right.gif) repeat-x;
  height:100%;
  margin: 0;
  padding: 0;
}

#page {
  width: 588px;   /* the width of the background-middle.gif */
  margin: 0 auto;
  background:  #ffff94 url(/images/background-middle.gif) no-repeat;
  height: 100%;
  position:relative;
}

#innerwrap {
  margin: 0;
  padding: 1px;    /* prevent unwanted margin collapsing */
  background:  #ffff94 url(/images/background-middle.gif) no-repeat;
}

#leftmargin {
  position:absolute;
  width: 155px;  /* the width of the background-left.gif */
  height: 100%;
  right:100%;
  top:0;
  background:  url(/images/background-left.gif) no-repeat top right;
}

html -
<div id='page'>
  <div id='leftmargin'></div>
  <div id='innerwrap'>
  <!-- main content goes here -->
  </div>
</div>

[edit, added fixes to support IE and Opera]
Fixes explanation:
ideally, #page should have min-height:100% to ensure the central background keeps repeating downwards along with the contents of long pages. IE doesn't support min-height. Opera doesn't correctly support height:100% on position:absolute elements when the display context height is controlled by min-height.

fix, give #page height:100%. create an extra inner wrapper div apply the same background as #page, leave height set at auto. If the page has long content the background will now continue correctly with the content. If there is not much content the background will show through from the height:100% #page element.

Yes, Triumph's demo does illustrate what I'm trying to do.

Well, actually I've just checked again, and Triumph's method seems to disable the horizontal scrollbar in IE... Seeing this I re-checked FF : no problems there. Hadn't checked Opera 1st time round so I did : Nothing displays.....?

Sorry Triumph!

I've opted to go with what Wolf suggested, it seems to do the trick!

--> http://nick.byethost22.com/template.html

...or the same but in pink...

--> http://nickpearson.atspace.com/

(Just dud templates)

1 html file, 1 psd file and 2 css files
(or at least will be!)

I'll do another completely different layout template at a later stage, just to see if I can make a pure-css website stand up to everything it's supposed to (This is my first).

I appreciate the merits of css, but often the real impact seems too small compared with the time and effort spent on juggling between backward compatibility (forward compatibility of course is granted) and browser incoherancies...

...I feel like ranting but you all know the story!

Thanks for the help!

I wasn't talking about the layout I was talking about the technique.

Sweet Louise! I'm not going to do all the work for you. I just flipped a quickie up with the layout generator here, I did not debug. I was just adding an option (as I usually do) and not claiming to have the be all end all. At least you see what I was talking about now and that gives me warm fuzzy feelings all over.