A tricky CSS problem that is too easy with tables!

The leftPane and rightPane tds must have widths set to 25%, either in CSS or XHTML, doesn't matter

CSS challenge, anyone? Must work in all browsers 5.5+ (including IE 5 mac) for it to be a suitable solution

Yeehah!

Just out of interest why have you creates a mummybot and a mummybot2??

Also have you gone anyway to solving this yourself not using tables? If so do you have the results somewhere?

There is no need to split the header into three sections. Problem solved.

The reason I was mummybot2, and I am now mummybot, is because I am a retard (sorry for all you 'lets get it started' fans out there). I mucked up my registration, so officially I am mummybot and only mummybot

As for this post, no I haven't figured out how to do it in CSS, and for the mean time I'm not going to. I have fully implemented the full template, which can be viewed in it's gloriously valid XHTML state here:
http://www.onhm.net/index.php
This site isn't live yet, there are a few PHP bugs still to go, and the photo gallery is looking spartan to say the least. The table solution works a treat, and to sort of reply to your statement Triumph, I don't really understand what you mean. By not splitting the header into three, how do I have the central title bar image with left and right repeating images? Check out the link above if you want to see the end result (albeit with tables) that I am after.

Cheers guys,
mummybot (not 2)

http://www.imaginekitty.com/53/53.html

Looks good on 1024*768, but when I blow up to 1600*1200 the left and right image that you added don't repeat-x, they just stop

I need the left and right to be repeating background images on the x axis so that they repeat as wide as a surfers screen resolution is.

Oh, good gravy!!! So expand the image. What I showed was an example. An example for you to interpret any way you like. I wasn't giving you a final layout (I thought the text would give that away ).

A side effect using the technique in my example is you don't need to have a repeating image. Which is so 1990's.

Cheers Triumph

Given the nature of this site - being accessed by many photographers/graphic designer and the like I would prefer to not have to have a massive 1600+ title image as the background so that they can see it stretch across the whole page.

Also, I thought it would be an interesting exercise in trying to create what at first seems simple behaviour with CSS. Yes your solution sort of answers my problem with a purely CSS layout, but I don't mind sacrificing one table to add what I believe to be a better way of displaying it.

As for so 90s, that may well be but I have never been one to follow the crowd - good design is good design.

Thank you very much for your help, I reckon I might try and crack this one day - a challenge for the sake of it

Why would you prefer not to have a massive 1600+px title image? It would be perfect for your viewers. And, it would be a smaller file size than your two images (the repeating and the center section). And, it would be more semantically correct, eliminating the table.

So, why is your way a better way of displaying it?
Good design is good design and should be separated from content.

The technique I posted above is only one way to do it in css. It could also be easily done with a repeating body background that would seamlessly merge with a smaller header image but I was using your images and they weren't patterned properly for the technique. (Basically, the edges of the header image would have to be re-created to match the repeating background in a seamless manner.)

Thanks for your comments, I just wonder a few things though.

How will having a 1600 or wider image be a smaller file size than having two images, one that is 800 wide and one that is 337 wide?

My images do line up and repeat correctly, just look at the page I created. It is the issue of having to start the repeat from the right and left respectively that is not lining them up

Also the point of this exercise is to discuss a different technique using CSS.

An example where what I am trying to achieve would maybe make more sense if the center div was for arguments sake 200 wide, and the repeating element was only repeating each 50px. I am asking for a technique that would enable only these two images to span the whole way across the page. Then the file sizes of the images would make a more noticable difference.
http://webdesign.mummybot.com/title-repeat.htm

The difference between the two methods is: the table layout has around 12 lines of extra CSS, 8 lines of XHTML and the images are 9kb; whereas the CSS method recommended has less CSS, only 4 lines of XHTML but the image is 40kb. It also does not repeat on resolutions higher than 1600 wide.

Yes I know that the table layout is not semantically correct, which is why I am interested in a solution that has the elegance of CSS with the image size of a method similar to the one with tables I am using.

I intended this as a challenge, I am very interested if anyone can come up with a solution to the problem rather than work arounds.

Well how about that! Sorted and all thanks to Triumph and Wolfcry911

Close to the technique that you guys recommended, but with a slight variation:

<style>
div#header2 {
  display: block;
  background: url(image/rp-title2.jpg) center top repeat-x;
  height: 100px;
  text-align: center;
}

div#headerbox2 {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  width: 200px;
  height: 100px;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
}

div#header2 h1 {
  display: block;
  text-indent: -9999px;
  background: url(image/title.jpg) top left no-repeat;
  width: 200px;
  height: 100px;
  margin: 0;
}
</style>
<div id="header2">
	<div id="headerbox2"><h1>Site title</h1></div>
</div>

Make the repeating background image the exact same width as the central column, which means your background must repeat over that width (200px in the above example) and center the repeat to the page. Then if the central graphic needs any different treatment apply a second title image over the top in the center panel.

You can see this in action as the third example here:
http://webdesign.mummybot.com/title-repeat.htm

There are still some problems with this solution: it won't work on fluid layouts, a really large fixed layout will mean you may need two large title images, and you are forced to make your repeating element a specific size which could be annoying if using photographs or smaller images that could be repeated with less width.

None the less thanks for your help guys, group brainstorming is always great Big ups!

I don't know where you're getting your file size from, but from this end I'm seeing 25kb and 42kb totalling 67kb. When I combine them into a 1600px wide image and save at high quality (which undoubtedly could be lowered) I get an image size of 60kb.

Those sizes are for the spiral example I posted, not the ONHM fern ones. Sorry, should have cleared that up

It should if you center the repeating background (so it tiles from the middle out instead of from left to right). Unless I am misunderstanding your problem.