5 replies to this topic

[ayfine]

Hello

Normally I use tables for my layouts but I started using CSS instead. So I'm working on a layout from this and I've gotten a bit of the html and css working but I have no idea how to make it so the left and right borders repeat to go along with the rest of the page.

I have the design uploaded here so you can see what I mean.

The css for the left and right borders are

#left_border {
	background-image:url(images/chillb0x_01.jpg);
position:relative; 
left: 0px; 
top: 0px; 
width: 59px;
 height:100%; 
z-index: 1;  
vertical-align:top;
}

#right_bottom {
	position: absolute; 
	left: 1041px; 
	top: 212px; 
	width: 59px; 
	height: 688px; 
	z-index: 8; 
	vertical-align: middle;
	background-image:url(images/chillb0x_08.jpg);
}

any help is greatly appreciated

[Archangel]

A trick that I've done is create a surrounding div for the page and make up a background image that makes it look like it's a border...

So...say your page is 770px wide (without a border). You can create an image that's over 770 pixels wide...make the center white and put your border on each side. Then create a CSS id that makes this a repeating background.


So you would create an image like this  sample.jpg   1.81K   62 downloads and set it as a surrounding background (that repeats vertically) for your page content. This way you're handling both sides with one image and they will always got exactly the same height down.

Does that make any sense?

I don't know how "proper" it is. But I've seen that technique used a TON and I know that I've used it a time or two.

Edited by Archangel, 22 June 2007 - 09:52 AM.

[ayfine]

Archangel, on Jun 22 2007, 09:51 AM, said:

A trick that I've done is create a surrounding div for the page and make up a background image that makes it look like it's a border...

So...say your page is 770px wide (without a border). You can create an image that's over 770 pixels wide...make the center white and put your border on each side. Then create a CSS id that makes this a repeating background.


So you would create an image like this sample.jpg and set it as a surrounding background (that repeats vertically) for your page content. This way you're handling both sides with one image and they will always got exactly the same height down.

Does that make any sense?

I don't know how "proper" it is. But I've seen that technique used a TON and I know that I've used it a time or two.

Oo I might just have to try that.

So hard to make the transition from tables to divs I could do this in a second with tables XD

[Archangel]

Quote

So hard to make the transition from tables to divs I could do this in a second with tables XD

ROFL, I know exactly what you mean. It is a tough transition when you're so used to tables, but once you start doing it more, finding the quirks and work arounds you'll pick it up pretty fast I'm sure.

Edited by Archangel, 22 June 2007 - 09:55 AM.

[ayfine]

Archangel, on Jun 22 2007, 09:54 AM, said:

Quote

So hard to make the transition from tables to divs I could do this in a second with tables XD

ROFL, I know exactly what you mean. It is a tough transition when you're so used to tables, but once you start doing it more, finding the quirks and work arounds you'll pick it up pretty fast I'm sure.

I just got it working.

That was a lot easier than I thought it would be.

Thanks for your help!

[Archangel]

Awesome!