Stooney Posted March 21, 2008 Share Posted March 21, 2008 I'm looking for the best way to go about this. I need to put a border around a div using 8 images I have. The images are just topleft.gif, topright.gif, topbar.gif, etc. Now I can't use background-image obviously unless I have 8 divs (or p, span, whatever is generally used) to apply each image to and position accordingly. If this isn't the best way to do it what is? Quote Link to comment Share on other sites More sharing options...
mb81 Posted March 21, 2008 Share Posted March 21, 2008 Why not use a 3x3 table? Quote Link to comment Share on other sites More sharing options...
Stooney Posted March 21, 2008 Author Share Posted March 21, 2008 I generally stay away from tables when it comes to design, but you're probably right in this case. I hadn't thought about tables Thanks. Other ideas are still welcome though. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted March 21, 2008 Share Posted March 21, 2008 No, tables are not the answer. I don't see why you need 8 images...just combine the images. Is the div scalable or fixed in width and/or height? There are dozens of techniques for rounded corners and complex borders out there, there best of which combine all the images into a single image. Even a completely scalable website doesn't need 8 divs. Give a bit more info about what you're requirements are...or just google "css complex borders" or "css rounded corners" or "css simple rounded corners". Quote Link to comment Share on other sites More sharing options...
haku Posted March 22, 2008 Share Posted March 22, 2008 I agree fully. Tables are not the way to go for this, this (page layout) is the exact thing that you shouldn't be using tables for. Quote Link to comment Share on other sites More sharing options...
Stooney Posted March 22, 2008 Author Share Posted March 22, 2008 Alright, well basically the border is not a fixed width/height. It will go around whatever div I choose at the time. The size of the div is determined by the content of the included file. So I'm basically using include() inside the div meaning that it can vary in size. I was using 8 images so I could have the four corners, and the 'middle' pieces could repeat depending on the size of the div. _ ___ _ | | =3 pieces | | | | =2 pieces |_ __ _| =3 pieces What do you guys recommend? Quote Link to comment Share on other sites More sharing options...
AndyB Posted March 22, 2008 Share Posted March 22, 2008 What do we recommend? Doing what bronzemonkey suggests - google it - turns up hundreds of technical solutions. Here's just one: http://www.cssjuice.com/25-rounded-corners-techniques-with-css/ Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted March 22, 2008 Share Posted March 22, 2008 It sounds to me like you need to use a cobination of "faux columns" and "sliding doors" techniques. These use simple gif images that are larger than the dimensions of the element for which they are the background ... this allows them to expand and contract along with the flexible content of the container element. It is a way to appear as if you have more than one background graphic in a single container element. I know you said the height isn't fixed, but Is the width fixed or percentage? Dan Cederholm's "faux columns" technique is a very cool way of creating a flexible percentage width graphic (which borrows a little from the Doug Bowman's "sliding doors" technique). faux columns sliding doors Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.