Use background images to create fluid table border

HTML & CSS
1

hello everyone

i have 4 images (top, left, right, bottom). together they create a graphical border for my table

you can see how the table looks here:

http://londonheathrowcars.com/test.htm

it is very straightforward, here is the working code:


<HTML>
 
<BODY>
  
<table cellpadding="0" cellspacing="0" width="515">
<tr><td background="top.jpg" align="left" width="515" height="37" valign="top" colspan="3"></td></tr>

<tr>
<td background="left.jpg" align="left" width="16" height="11" valign="top" ></td>
<td align="left" width="483" height="11" valign="top" ></td>
<td background="right.jpg" align="left" width="16" height="11" valign="top" ></td>
</tr>

<tr><td background="bottom.jpg" align="left" width="515" height="13" valign="top" colspan="3"></td></tr>
</table>

</BODY>

</HTML>

rather than use a table i would like to create a fluid div (or css enhanced table) that changes height to match the content. this will involve repeating the left and right images in order to create the fluid column heights.

can anyone assist me with this? thanks

2

I’d suggest my own technique for that, called “eight corners of the world under one roof” (aka ten thousand lives for the coordinator – long story)

Eight Corners Under One Roof

Markup stays pretty simple, and it only requires ONE image to build it instead of four – and can do fluid width and fluid height.

Though if you want only fixed width that’s much simpler.

It’s also valid/modern markup – something you lack by using outdated/nonexistent attributes in your HTML like align, valign and background.

In a few minutes I’ll be back on my workstation – I’ll take your example and code up quickly how I’d approach handling that for you.

3

hi there, thanks for the reply.

i just created that table to give an example of how the table looks and for my own re-assurance to make sure the individual images lined up (which thankfully they do).

bit puzzled as to how you can use one image without distorting the image files. i would guess you set the size of the border and create a space inside the image to add content?

i await your response. thanks.

4

also if it is possible i am happy to create a top row, and bottom row chunk to be repeated so the width can be fluid.

thanks

5

Here’s what I came up with:
http://www.cutcodedown.com/for_others/antonyx/template.html

The image:
http://www.cutcodedown.com/for_others/antonyx/images/borders.png

You just make wider and redo the math if you want to increase the size. I tweaked the corners, borderline and shadow slightly, hope you don’t mind :wink:

as with all my examples the directory:
Index of /for_others/antonyx

Is unlocked for easy access to it’s bits and pieces like the CSS.

Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for the expression I used to demo the fluid width in legacy IE. Tested working IE 5.5, 6, 7, 8 and 9, FF 3.5 and 4, and the latest flavors each of Opera, Saffy and Chrome. Resize your browser window, and you can see the fluid width in action (set to 608…1248 min/max) – and the content area is fully fluid to any height.

The “eight corners under one roof” method I use is just an expansion on an older concept called “sliding doors” – basically I make three sets of ‘sliding doors’ – header, content and bottom. In order to repeat-y the content it has to go on the left of the image so we can use “top right” to position it… all the others being ‘fixed’ or ‘close enough to fixed’ in height.

Sliding doors is just like it sounds – as they slide apart it gets wider – the two images just overlapping each-other… or in this case, the two slices we are showing of the same image. This unfortunately means at least one of the two images in a sliding doors pair ends up having to be the same as the maximum width you’d want it to display – thankfully if you use .png it is RUTHLESSLY efficient at compressing long horizontal runs of the same pixel if you can use a 8 bit (aka 256 color) file…

Which is why you’ll also note the single .png used comes in at only 1.2k, as opposed to the 12k in four .jpeg you were using on the original. I also took the time to use tweakpng to strip the GAMA line so there are no color matching issues. The low color count of the line-art you are using works well with narrow bit-width png as well, resulting in no real data loss (unlike jpeg which ALWAYS has loss).

I use an overflow cutoff on the floated span in the heading to set it to the maximum allowable height, which I upped to 84px so that at large fonts/120dpi it should still be able to fit two lines of heading text if needed. It may be in your best interest to increase the entire height of the image to around 256px (moving the bottom border down) just to be on the safe side with that, though that depends on your headings.

I moved the text out of the image because images as text is ALWAYS a miserable /FAIL/ at web design, especially on a content area. Don’t get so attached to a font you need to put it in the image :smiley:

Thankfully yours was pretty simple to code because you aren’t using transparencies – I always count a LACK of transparencies in images as good web design since alpha transparent .png are wastefully large in filesize and have compatibility issues a normal 8 bit .png don’t.

Hope this helps – I know it’s a lot to digest, but this is a really versatile technique that no matter how much code it ends up looking like, it’ll still load many times faster than using multiple separate files thanks to handshaking. SOMEDAY we’ll be able to replace this with CSS3’s border-image – but that won’t be real world deployable IMHO until sometime in 2020 at the rate things are going.

Any questions, fire away.

6

well that is probably the most considerate and substantial reply i have ever received. fantastic.

one question, confused as to how i would set the original width of the box. if for example i wanted to set the original width to 515px, what do i edit?

thanks

7

Everything inside the .contentBox div is fluid, so the only thing you need to set width on is that outermost div.

Bascially, see this:


.contentBox {
	width:95%;
	min-width:608px;
	max-width:1248px;
	margin:0 auto;
	text-align:left;
}

* html .contentBox {
	width:608px;
	width:expression(
		(document.body.clientWidth>1280) ? "1248px"
			: ((document.body.clientWidth>640) ? "95%" : "608px")
	);
}

replace with :


.contentBox {
	width:515px;
	margin:0 auto;
	text-align:left;
}

… and you can strip the margin declaration if you don’t want it auto-centering.

When designing sections I like to declare widths as little as possible, so it’s possible if that box was inside a column, I’d set the width on the column and not .contentBox… since it will expand to fit whatever you put it in that way.

I generally find it’s good practice to design fluid, even when working with fixed layouts – sounds weird, but it means you can set widths on two or three containers (outer wrapper, the floated columns leaving a single column fluid), and everything else just ‘fits’ into place automatically… It’s kind of a strange revelation that hits you when suddenly fluid is EASIER than fixed to work with because you don’t have to sit there micromanaging the widths of every element.

8

you’re right, i shall set the width of a container and let this baby fill it. thanks again

9

hello again. i was just trying to implement your container into my website template and slowly realised that it was a lot of bother trying to integrate it into my table heavy design.

if you have the time and it’s not too much trouble would you be able to create my css template (your bordered box being in the middle). all of the divs would need fluid height but the widths would be fixed. also none of the other containers would need image borders, just the main middle section.

thanks, here is an example of how i want it to look:

http://www.londonheathrowcars.com/example.jpg

10

Well, that pic (and the site it’s on) adds more questions…

  1. What are you using tables for, even as a a table based layout there’s no need for more than one table – the parent page uses seven. That’s how you end up with 60k of markup doing 8k’s job.

  2. your example pic has a fixed width of 1000px, you know that’s not even 1024 friendly, right? You really should take another 16-24px off that, NOT that I advise fixed width layouts in the first place.

  3. That parent page also seems to have fixed metric fonts on the content (accessibility /FAIL/) and color contrast issues…

As to your question – I’m assuming you want it to stretch to the full height, which is where your problems might occur. The “trick” is to put the sides of the center column NOT on the column itself, but in as a faux-column image behind all three columns.

… which isn’t as hard as it sounds. If I have time later I’ll do up an example for you.

11

hello, i’m back!

ok i have taken on board what you have said with regards to the 1000px width and have made the adjustment as you suggested. the container will now be 976px wide.

also please ignore the ‘parent’ page. once the divs are ready i shall ensure that all elements are compliant etc.

for this website it is necessary that i use fixed widths, i know it is not advisable but this is the decision. i have uploaded a new example of my div structure here… if you have the time (and the inclination) please create this structure for me. once that is done i can actually start building the website :slight_smile:

http://heathrowcar.co.uk/divs.jpg

12

hi death shadow, i have been trying to incorporate your content box into another 3div layout and am having great difficulty.

i think i will have to wait for you to code a full layout as my example or i will have to start over.

hope to hear from you soon.

13

I got much more information from here. thanks guys.