Graphical Border

Pheonix · #1 Dec 16th, 2006, 18:47

Question: Is there a way to create a graphical border (using 15x15px corner and side images) without using tables? Preferably, the solution would be equally as clean as tables. As well as scalable.

ukgeoff · #2 Dec 16th, 2006, 21:43

Not quite sure what it is you are trying to achieve but the answer is yes.

One possible solution is to use what would amount to a top, bottom, left and right div.

Another might be to make the border graphic cover the whole background and then have a wrapper div of a size, that when centred, leaves a 15px border around the edge.

Pheonix · #3 Dec 16th, 2006, 23:31

So basically recreate the cells with divs? :-/

Ryan Fait · #4 Dec 16th, 2006, 23:34

It depends on what you want...

Pheonix · #5 Dec 17th, 2006, 00:19

What I have is

HTML: Select all

<table id="Table_02">
	<tr>
		<td style="background-image: url(images/blue2_1.jpg); height: 15px; width: 20px;"></td>
		<td style="background-image: url(images/blue2_2.jpg); height: 15px;"></td>
		<td style="background-image: url(images/blue2_3.jpg); height: 15px; width: 15px;"></td>
	</tr>
	<tr>
		<td style="background-image: url(images/blue2_4.jpg); width: 20px;"></td>
		<td style="background-color: #243d4a; width: 150px;"><p>content</p>
			</td>
		<td style="background-image: url(images/blue2_5.jpg); height: 15px; width: 15px;"></td>
	</tr>
	<tr>
		<td style="background-image: url(images/blue2_6.jpg); height: 20px; width: 20px;"></td>
		<td style="background-image: url(images/blue2_7.jpg); height: 20px;"></td>
		<td style="background-image: url(images/blue2_8.jpg); height: 20px; width: 15px;"></td>
	</tr>
</table>

But I would rather not use tables, for various reasons. The corners should remain fixed, while the top, bottom and sides must be scalable and will dynamically change size depending on the content.

snow · #6 Dec 17th, 2006, 00:34

Here's a tutorial:
http://kalsey.com/2003/07/rounded_corners_in_css/

AListApart ones:
For complex, pretty borders:
http://alistapart.com/articles/customcorners/
For simpler ones:
http://alistapart.com/articles/mountaintop/

There are more tutorials out there - I used the one at the top before and it worked just fine.

Basically you have to use images for the rounded bits

Pheonix · #7 Dec 17th, 2006, 05:00

Thanks, second link is what I was looking for

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Data collection and graphical representation	chrisse	Starting Out	1	Aug 31st, 2007 14:10
Question regarding Graphical Layout: Images/Thumbnails in an E-Commerce site	TwentyFourSeven	Web Page Design	7	Apr 6th, 2007 17:09
Why only one border?	timmytots	Web Page Design	1	Nov 30th, 2005 21:32

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Graphical Border