5 replies to this topic

[Pax]

Ive beel searching all over the net for some help with getting a div tag to have an image for each border (top, bottom, left, right each having their own border image). As of yet, I havnt found anything. I tried to use a background image for the div, which would work, but 1)File sizes are higher and 2)I can't get it to stretch/shrink to the div size needed. I want this border to be applied to multiple div tags without each tag having to have its own style with its own specially sized background image.

Any help available here would be very appreciated. I'm trying to do this for a school assignment.

[coolaid]

make a div like below.

<div class="mainBox">
  <div class="boxTop"></div>
  <div class="boxContent"></div>
  <div class="boxBottom"></div>

then you can either, use one long image for the background of "boxTop" that will be the two top borders, or an alternative is to use
<span> to float two seperate images in the "boxTop" (two seperate corners)

then you would do the same to "boxBottom" and in "boxContent" is just the content

... i dont know how much sense that made, maybe i can create a test page if you didn't understand fully.

[Pax]

Great! Thanks coolaid, I'm going to try this out at school tomorrow and see if it works. Thanks a bunch mate!

[Pax]

Hrm...I'm having some troubles getting things to work. I had the top and bottom working, but once I added in the left/right part of the border, it all kinda broke.

Edit:

I've got the top and bottom workign properly now...I think. The left and right edge borders show up now, but they wont repeat. I'm going to try using a div, rather than a span for that part.

Edited by Pax, 14 October 2005 - 10:32 AM.

[Pax]

I decided just to use a div tag's border to get the side border, but now, in IE, I get a gap between the top border and the top of the side borders...works fine in firefox tho.

[coolaid]

check for white space. i.e is so delicate,
e.g, dont do:

<div> <span> <img /> </span> </div

instead, do:

<div><span><img /></span></div