CSS is not one of my strong points! I'm trying to find a tutorial or something that will give me a premade div and css arrangement if I have a repeating top, left,bottom, right and corners graphic. I feel like I'm getting just close enough but then something breaks horribly. I don't want to use the new css3 implementation.
edit: SOrry for being unclear. I just want to use an image as a border. I have a graphic for the topleft,topright,bottomleft,bottom right, and repeating left and right and top and bottom graphics. I thought that HTML tables were deprecated so I stayed away from them, but I still have problems aligning the border correctly. I'll either have little gaps inbetween somehow, and/or I can't force the border to repeat only every X pixels so the corner graphics line up with the top/bottom and left/right graphics.
Edit: I got pretty close, but there ar开发者_运维问答e still ugly problems with the repeating graphic not starting or ending in the right place, and getting the background of the inside to be a solid color behind the png transparency. I'll post what I have.
<div id="box">
<div id="tl"><div id="tr"><div id="top"></div></div></div>
<div id="left"><div id="right"><div id="content">
test text
</div>
</div></div>
<div id="bl"><div id="br"><div id="bottom"></div></div></div>
</div>
my css:
#top {background: url(top.png) repeat-x; width:79%}
#bottom {background: url(bottom.png) repeat-x;height:58px;width:auto;margin-left:auto;margin-right:auto;width:79%;}
#left {background: url(left.png) repeat-y}
#right {background: url(right.png) repeat-y 100% 100%}
#bl {background: url(corner4.png) 0 100% no-repeat;height:55px;margin-left:-6px;}
#br {background: url(corner3.png) 100% 100% no-repeat;height:55px;}
#tl {background: url(corner1.png) 0 0 no-repeat;height:55px;}
#tr {background: url(corner2.png) 100% 0 no-repeat;height:55px; }
Ok... got it. Well, does your container have fixed width? If yes....
Create one image for the top which extends across the entire container. Put that image as a normal image inside your container in the HTML, as the first element.
Create another image for the bottom which extends across the entire container. Put this image as a normal image inside your container in the HTML, as the last element.
Create a horizontal background image (1 pixel high) which extends across the entire container and use CSS repeat-y. This gives you the sides for any height container.
... What you'll end up with is something like:
<div with background image>
<top image>
<your content>
<bottom image>
</div>
精彩评论