Here's a picture of what I'm trying to do...
The idea is to overlay an image on the background in such a way that this image stays fixed relative to the main column, which is centered.
This can be done in quite a few ways but I'm looking to do it using background images, cutting my overlay into 4 areas then positioning them top-left/bottom-left/etc... This is because the width of the main column is to be around 750px, ie: the most you can get away with for users using 800x600, and I want to fill some of the empty space for users using higher resolutions without giving their browser an excuse to display the dreaded horizontal scrollbar.
Can this be done in pure CSS???
Tables are tools of evil, please help me before I revert to them!!!!!![/url]
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.
Layout challenge : Does CSS hold all the answers?
Anything to get you motivated!!
Layout challenge : Does CSS hold all the answers?
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...
Layout challenge : Does CSS hold all the answers?
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.
Layout challenge : Does CSS hold all the answers?
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.
Layout challenge : Does CSS hold all the answers?
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.

Well then, there's your answer.
Layout challenge : Does CSS hold all the answers?
hummm.... nope!
I've updated the picture at the top of the post to give you a better idea.
Layout challenge : Does CSS hold all the answers?
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).
Layout challenge : Does CSS hold all the answers?
I've updated the picture at the top of the post to give you a better idea.
Layout challenge : Does CSS hold all the answers?
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!
Layout challenge : Does CSS hold all the answers?
Triumph,
...? Ok, but that's not what I want to do...I was just going by your pictures. Sorry. I though I was helping.
Layout challenge : Does CSS hold all the answers?
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?
Layout challenge : Does CSS hold all the answers?
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.
Layout challenge : Does CSS hold all the answers?
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!
Layout challenge : Does CSS hold all the answers?
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?
You could easily adapt this technique: http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html
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.....?
