15 replies [Last post]
mummybot2
Offline
newbie
New Zealand
Last seen: 15 years 12 weeks ago
New Zealand
Joined: 2005-11-04
Posts: 3
Points: 0

I have been wracking my brain on this one for the last day, and have given in due to how simple it is to do with a simple table, one row and three cells. If someone can give me a pure CSS solution that would be fantastic. You can view a copy of the site I am working on at http://www.onhm.net/index2.php

Problem:

I have a centered fixed width template at say 800px wide. The header for the page is a set of repeating ferns. I want these repeating ferns to repeat themselves for the entire browser width, so if the user is looking at 1600px, the ferns on the left repeat and connect at the EXACT point with the 800px div, and the ferns on the right repeat starting from the EXACT point at 800px plus whatever is 50% of the remaining space (in this case 400px).

If I set the background-image of the body or a containing div, I cannot think of any (not absolutely mental) CSS way of lining up the repeating the image to line up with both sides of the centre div. The table solution is so easy that I have to use it at this stage.

The only CSS solution I can think of is to float the columns, but as they are both fluid widths, it becomes a browser compatible nightmare compared to the table solution below.

<style>
#leftPane {
background: url(image/title-banner-repeat.jpg) right top repeat-x;
}
#centerPane {
width: 800px;
background: url(image/title-banner.jpg) left top no-repeat;
}
#rightPane {
background: url(image/title-banner-repeat.jpg) left top repeat-x;
}
</style>

<table width="100%">
<tr>
<td id="leftPane"></td>
<td id="centerPane"></td>
<td id="rightPane"></td>
</table>

See, so easy with just one table, no compatibility mess and bugger all extra code. Grrr! Stupid tables Wink

mummybot
mummybot's picture
Offline
Regular
New Zealand
Last seen: 10 years 38 weeks ago
New Zealand
Timezone: GMT+1
Joined: 2005-11-04
Posts: 16
Points: 0

Forgot to add

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

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

Yeehah!

Always a work in progress http//www.mummybot.com. What does it mean to be human?

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 32 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

A tricky CSS problem that is too easy with tables!

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?

Anonymous
Anonymous's picture
Guru

A tricky CSS problem that is too easy with tables!

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

mummybot
mummybot's picture
Offline
Regular
New Zealand
Last seen: 10 years 38 weeks ago
New Zealand
Timezone: GMT+1
Joined: 2005-11-04
Posts: 16
Points: 0

to answer

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

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) Smile

Always a work in progress http//www.mummybot.com. What does it mean to be human?

Anonymous
Anonymous's picture
Guru

Re: to answer

mummybot wrote:
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?

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

mummybot
mummybot's picture
Offline
Regular
New Zealand
Last seen: 10 years 38 weeks ago
New Zealand
Timezone: GMT+1
Joined: 2005-11-04
Posts: 16
Points: 0

Close but not quite

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 Sad

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.

Always a work in progress http//www.mummybot.com. What does it mean to be human?

Anonymous
Anonymous's picture
Guru

Re: Close but not quite

mummybot wrote:
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 Sad
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 Smile).

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

mummybot
mummybot's picture
Offline
Regular
New Zealand
Last seen: 10 years 38 weeks ago
New Zealand
Timezone: GMT+1
Joined: 2005-11-04
Posts: 16
Points: 0

A tricky CSS problem that is too easy with tables!

Cheers Triumph Smile

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 Smile

Always a work in progress http//www.mummybot.com. What does it mean to be human?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

A tricky CSS problem that is too easy with tables!

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.

Anonymous
Anonymous's picture
Guru

A tricky CSS problem that is too easy with tables!

mummybot wrote:
I don't mind sacrificing one table to add what I believe to be a better way of displaying it.
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.)

mummybot
mummybot's picture
Offline
Regular
New Zealand
Last seen: 10 years 38 weeks ago
New Zealand
Timezone: GMT+1
Joined: 2005-11-04
Posts: 16
Points: 0

A tricky CSS problem that is too easy with tables!

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

Quote:
it would be a smaller file size than your two images (the repeating and the center section)

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?

Quote:
I was using your images and they weren't patterned properly for the technique

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 Sad

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.

Always a work in progress http//www.mummybot.com. What does it mean to be human?

mummybot
mummybot's picture
Offline
Regular
New Zealand
Last seen: 10 years 38 weeks ago
New Zealand
Timezone: GMT+1
Joined: 2005-11-04
Posts: 16
Points: 0

A tricky CSS problem that is too easy with tables!

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

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 Smile Big ups!

Always a work in progress http//www.mummybot.com. What does it mean to be human?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

A tricky CSS problem that is too easy with tables!

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.

mummybot
mummybot's picture
Offline
Regular
New Zealand
Last seen: 10 years 38 weeks ago
New Zealand
Timezone: GMT+1
Joined: 2005-11-04
Posts: 16
Points: 0

A tricky CSS problem that is too easy with tables!

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

Always a work in progress http//www.mummybot.com. What does it mean to be human?

Anonymous
Anonymous's picture
Guru

A tricky CSS problem that is too easy with tables!

mummybot wrote:
There are still some problems with this solution: it won't work on fluid layouts...
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.