Click to See Complete Forum and Search --> : Graphical borders?


sharkey
05-05-2004, 05:57 AM
Hey i was wondering what the css code is for like ryan brills sites have a graphical border on the left and right side of which looks like a container div. I think it looks great and have seen many other of my favorite sites use this technique.
Also how big does the image have to be. Im sure i seen how to do this on ALA but i cant find it now.


Any help is appreciated.

Jona
05-05-2004, 11:59 AM
The ALA article you're talking about is called, "Faux Columns (http://www.alistapart.com/articles/fauxcolumns/)."

sharkey
05-05-2004, 03:31 PM
Cheers thanks jona but i didnt understand abit of it. I dont know where to add the code to the container or to my left content div and right content div.

Thanks again

Jona
05-06-2004, 04:28 PM
Frankly, I don't either... I'd play around with the end result code and see what you can come up with, and then ask a less general question.

spufi
05-06-2004, 07:44 PM
Originally posted by Jona
The ALA article you're talking about is called, "Faux Columns (http://www.alistapart.com/articles/fauxcolumns/)."

Actually that's wrong. The link you posted is about making a second column appear to be the same length as a longer one that's right next to it.

Ryan's site isn't doing this because the white background can be defined throughout a container <div>. Not saying that's how he did it because I'm not looking at the code right now. I'm just using the idea.

Anyway, what I think they are talking about is the border that's on the ousite of the container <div> area. Basically what the person does is defines a container to be something like 750px wide and then they create a background image that wide, but fairly small height wise. They then repeat the image vertically to give it the left and right sides. Add a bacground image in the header and footer and it gives a feel for the whole container type area.

Sorry if this sounds jumbled. If I had more time I would explain it better. Just go right click on the image that's a "border" on the sides and click on "View background image" to start to see what I'm talking about.

TomDenver
05-08-2004, 05:36 PM
Spufi, if you scroll down farther in that article, it explains that background image technique. It was the correct article linked by Jona.

sharkey
05-09-2004, 05:43 AM
Hey thanks guys ill have a play with the end code jona and i will check out what spufi said.

Thanks again guys.