Creating a border out of images

HTML & CSS
1

Hi

I’m trying to create a content box with a particular style of border that I need to build using 3 images: the top, the bottom and the middle, which repeats to fit the content.

The problem I’m having is getting the top and the bottom to align with the central section so it looks like a ‘whole’.

This is what I want it to look like:

[URL=“http://i792.photobucket.com/albums/yy204/la_tessitore/border.jpg”]http://i792.photobucket.com/albums/yy204/la_tessitore/border.jpg

This is the relevant HTML:

<div id=“mainContent”>
<div class=“bodytop”><img src=“images/bodytop.jpg” /></div>
<h1>Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<div class=“bodybottom”><img src=“Images/bodybottom.jpg” /></div>
</div>

And this is the CSS I’ve got so far:

#mainContent {
margin: 30px 5px 0px 245px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div’s text to fill the #sidebar1 space when the content in #sidebar1 ends. /
padding: 0 20px; / remember that padding is the space inside the div box and margin is the space outside the div box */
background-image:url(Images/bodyback.jpg);
background-position:center;
background-repeat:repeat-y;
}

.bodytop img {
margin: 0;
position:relative;
}

.bodybottom img {
margin: 0;
float:inherit;

}

Can anybody give me pointers on how to make this happen?

Thanks

2

Ok, apparently you’ve not fully grasped how position:absolute works. See, if you set position:relative on the container… or on your containing DIV, then top:0 left:0 is the upper corner of that containing element, not the page. Since I’m only absolute positioning elements INSIDE the .topBorder and .bottomBorder div’s, all I have to do is set those to postion:relative and right:-8px on that nested div is based off the right edge of it’s parent.

Take a look at the more recent demo, or the one I made for you - centering and alignment of each is a non-issue, it’s all handled.

– edit – oh, and why would you be wasting an image on a solid border? Isn’t that what border is for?

3

… and here we are:
http://www.cutcodedown.com/for_others/pollythena/template.html

Took me longer to type in the copy than it did to make the effect :wink:

sliding doors before the content, sliding doors behind the content, sliding doors after the content… all using a single image. The image I made for that:

at 4096 wide means it maxes out at 2048 width, wider than that an it will break hence the use of max-width. Production copy I’d probably also have the IE expression to fake max-width as well. Thankfully despite the rather large dimensions (4096x16) the color depth is fairly low allowing us to use a mere 770 byte .png thanks to the long horizontal runs of the same color. I also pulled the GAMA line using tweakpng so IE won’t apply incorrect gamma to it.

As with all my examples the directory:
http://www.cutcodedown.com/for_others/pollythena

is unlocked for easy access to all the pieces.

Basically it’s just my eight corners technique… the reduction in handshakes for it more than making up for the extra markup. Should work all the way back to IE 5.5 and in every modern browser just fine.

The left side of the image is your rounded corners, the right side is the repeat-y. The nested DIV’s are absolute positioned over the margin for their parent so transparencies can work (I set up palette transparency to test that) and likewise the margin and relative positioning on the sides allows transparency.

4

Raffles for the most part hit it on the head, those images have no place in the markup - but I would not be trying to hook the content since generally I design templates where the content would change, and constantly remembering to try and hook that last paragraph is impractical at best, a disaster at worst.

Of course, that last ‘technique’ linked to is suck a fat bloated disaster you might as well use the extra markup, it will be less code!

The technique I usually use uses a single image and slides the background around using ‘sliding doors’. I explain one version of the technique here:
http://battletech.hopto.org/html_tutorials/eightcorners/

and have a more modern example of it in action here:
http://battletech.hopto.org/html_tutorials/eightcorners/corners2/template.html

Because it uses sliding doors you do have to set up a max-width, but the technique is sound.

Gimme a few minutes I’ll toss together an example for you.

5

Since these images are being used for presentation only and not to convey any information, you should use background images instead of the IMG element. Unfortunately browser support is not good enough yet for a single element to support many background images. However, we can work around it.

For example, you can make the H1 stretch all the way across, and use it to create the top border (including the corners). Then the side borders can be added by having a repeat-y image that stretches all the way across the containing DIV.

For the very bottom, you can use the last paragraph to add the background image.

The benefit of all this is that you don’t need any extraneous DIVs to get the effect. The drawback is that you must know the width of the box and that the styling requirements for the H1 and last paragraphs may be restrictive.

If the box is to be flexible, then you will need to add some extra elements, like with this technique.

6

I’ve spent hours trying avoid putting them in the markup but in the end it was the only way I could get the top and bottom even vaguely in the right place. Another complication is that I’d already got a background image on the H1 element (the underline) which I’d like to keep.

The content section is actually going to be the same width on all pages anyway (it’s inside a fixed width container) and the images for the border are the correct width for what it needs to be. Could I simplify what you’ve done to something more like:

&lt;div class="maincontent"&gt;
	&lt;div class="borderTop"&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;
             &lt;h1&gt;Main heading&lt;/h1&gt;
		&lt;p&gt;Some test content&lt;/p&gt;
	&lt;div class="borderBottom"&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;
&lt;/div&gt;

The other problem is that the container is centered on the page so I can’t use absolute positioning for the images, which from looking at the CSS is what you’ve done.