Image Layout

[Lib Auth]

Hello,

I am an amateur web designer who is stuck - obviously.

I want to create a web site that uses semi transparency, but after some research discovered earlier versions of internet explorer hate transparency.

A such i found a way around that. Technically ignore transparency by making all effects in images. This works fine.

However, I am not sure how to achieve a layout made of images.

Here is one column of my website:
http://img6.imageshack.us/img6/2010/26395665.png

The issue I am having is I want to use the image as the column, however, I will need to break it up into three sections - top middle and bottom - so that I can allow for more text if required.

So, after that long statement, what I need is the following:

1. How to make the layout from images
2. How do I make it so the middle section duplicates itself to cover the text.

You would have

DIV for the top section
DIV for the middle section
DIV for the bottom section

But I need it so the middle DIV; when more text is added, will in essence repeat the image.

[pritaeas]

the top and bottom div's can be fixed size. the middle div will have a background-image 1 pixel high with a repeat-y. You can see something similar at one of my sites: kledingbank-limburg.nl The yellow/blue/white left and top is actually a 1 pixel image. Extract the css from the page, tidy it, and you'll have your example.

[MJ Pieterse]

so your html will look something like this

<div class="top"></div>
<div class="middel">
	<%--content--%>
</div>
<div class="bottom"></div>

and your css

.top {
	background-image:url(../Images/TopBack.jpg);
	background-repeat:no-repeat;
	height:30px;
	background-position:center;
}
.middel {
	background-position:center;
	background-image:url(../Images/MiddelBack.jpg);
	background-repeat:repeat-y;
	padding-left:0px;
	padding-right:10px;
}
.bottom {
	background-image:url(../Images/BottomBack.jpg);
	background-repeat:no-repeat;
	height:30px;
	background-position:center;
}

obviously you would use your own heights, image names etc.

[Lib Auth]

mj080,

I tried your way and it didnt work :(

edit:
I removed the centre tags from your code and it worked

[Lib Auth]

I have one more question.
How do I make it so the text doesnt go past 30px?
so that it doesnt extend past the borders of my image background?

Also, how would I make it so that if I link text within the box, the backgrounddue to the hover will touch the white border?

I have this bit of code:

a:hover {
 background-color: #DEF;
 border: 1px dashed #ACE;
 margin: 0 -3px 0 -3px;
 padding: 0 40px 0 2px;
}

However, that changes for each link, with one link fitting perfect, and anothers background going paste the border line (of the image)

[kpeter]

Thanks a lot for your help guys, i was also looking for the solution, as i was trying to change layout of one of my <URL SNIPPED>cheap web hostingsite, but failed to do it, will give it a shot again today.