Forum Moderators: not2easy

Message Too Old, No Replies

News Table Borders

News Table Borders

         

PumpkinHead

12:57 pm on May 4, 2004 (gmt 0)

10+ Year Member



Hi :)

I have a site I am making that has a news section. Basicaly I need each table that contains a news entry to have a border all the way round (torn paper).

Anyone have any idea where I can find a guide to show me how this is done? I tried for ages last night by having each graphic in its own cell i.e

top left, top middle, top right, left, right, bottom left, bottom middle, bottom right.

The main problem with this is that a space appears between each graphic or the cell repeats the same graphic over and over.

Hope this makes sense! HELP!

korkus2000

3:57 pm on May 4, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



can the width be fixed?

PumpkinHead

11:53 am on May 5, 2004 (gmt 0)

10+ Year Member



Yep thats what I'm looking to do. Still stuck though!

dillonstars

3:07 pm on May 5, 2004 (gmt 0)

10+ Year Member



Try this tapart.com/articles/customcorners/]A List Apart article [alis] to show you how to do it without tables...

[edited by: korkus2000 at 6:26 pm (utc) on May 5, 2004]
[edit reason] fixed url [/edit]

SuzyUK

4:07 pm on May 5, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi I'll try to explain, could be fun without pictures :)

You've already stated that you have a fixed width which makes it easier..

2 x slices should do this. and although the theory may work actually matching torn paper may not work very well, it depends on how exaggerated the tears are... so no promises ;)

make your graphic the width you require but make it very tall (enough so it won't run out with stretched content.)

then slice off the top enough to contain the top corners (preferably more than 16-20px too for table cell height).

I don't know if you use divs inside your table cells or not but it can be done 2 x ways
Table only:

1. Put the top graphic as a background to an extra cell on the top (and make the cell the right height to contain it) this could be where you were getting gaps but as a background to the cell you shouldn't be affected by cellpadding)

2. Then put the larger slice as a background to the bottom cell but position it to the bottom so the bottom corners always stay there, this is your content cell and as the content expands the cell will grow and more of the top part of this large slice will appear to keep matching (hopefully) with the top slice.

Table with a div inside it:
part 2 above is the same, but instead put the top slice as the background to the div inside the table cell, make its background color transparent, and set the background not to repeat, your content would then go inside the div and because it's transparent the table cell background shows through as it stretches..

Does that make any sense?

Suzy

dillonstars

12:55 pm on May 6, 2004 (gmt 0)

10+ Year Member



I'm not sure what happened to the link I posted above but it was meant to point to an article on A List Apart called Custom Corners. For some reason **** is now a dirty word on this forum....