border design

[shaceko]

I was wondering how you can get an effect like the border on this web site:


LINK (http://thewebmachine.com)

[mlk]

using bevel&emboss, stroke and html tables i guess.

[shaceko]

Yeah but when you resize the window the image resizes with it! I think he got some crrazy code going on. My websites always look empty though or something.

[mlk]

what do you mean resizes with it ???

if you mean it keeps the same border size then that's why I said he used tables.. check his html code, it ain't too complicated to make... (especially if you have software like psp or ps to do the image slicing..)

[Mik3]

that's funkalicouse!

I don't know how he made all the images get small when you resize the window... mabe he used background images? But they seem to be a little slow at refreshing...

[Mik3]

yeh, it is a background image
(what he did is often used in forums and such for the banners)

[Marz]

Btw.. This is a trick in CSS that I use alot...

It's built out of tables.. and when tables are filled, if tyhey don't have a height or width specified.. they will automaticlla y resize...

So say you have a menu like this.. it is probably comprised up of 9 total areas... in a box type manner...

o|ooooo|o
-------------
o|xxxxxx|o
o|xxxxxx|o
o|xxxxxx|o
o|xxxxxx|o
-------------
o|ooooo|o

Now.. let's say the o's are the border and the x's are the information area.. All lines are what divide the area up into sections...

The top left o will be a set width.. no matter what resize the window does, this does not change.. because we can not repeat this...

the top o's are then a single background that is set on repeat... SO no matter how big the top bar is (could expand across the screen), it will always fill in with that repeated image...

the top right o, bottom left o and the bottom right o are exactly like the top left o, except they each will have their own non repeating image...

Now.. You can probably figure out the rest of the stuff.. Just make a table that can heavil;y expand and have repeating images in the background so that when it expands, so will the image in appearance.. ;)

If you need any specific CSS documentation on this method.. Ask and ye shall receive.

[neverrain]

It's a CSS thing I use ALL the time.

I beleive you are talking about this:

.yournamehere {
border-top-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
}

[eilsoe]

dude, he has a tutorial on it... look on the site under "combo"...

[shaceko]

ooooooooook, sory, didnt notice that tutorial but I no how to use normal borders but didnt know how to make imaged borders.

Thx very much for the help! Espically budderhammer even though I dont get a word hes saying?

[eilsoe]

here the ultra easy way... :)

Just whipped it up quickly.

[shaceko]

Thx very much guys. I have made something using this technique. What do you think?
http://matt.zaaz.co.uk/thingy.htm

[eilsoe]

nice.. 404 border :P

I can't see 'em :) pictures not available.. :)

[DDD]

you could do this with out an Iframe also. By using scrolling divs. I am not sure which one is better for the web (as far as browser acceptance). Last time I used an Iframe it was not widely accepted. BUt divs are.

[eilsoe]

Iframes are a ******...

[shaceko]

sorry, stupid mistake! I didnt upload the images! It look s really good with them. Should soon!