CSS layout Container problems..

[TagUK2006]

Hi Guys,

Im trying to layout a page using CSS rather than the old way I was taught at college using tables many moons ago...

So I have my layout in mind its very simple I want to make a container that resembles a table layout of 1 column and 3 rows..

So I have done this on my main page...


<div class="Mainbox">

<div class="Maintop">
<!--#include virtual="/Templates/TopMain.asp" -->
</div>

<div style="padding-left:30px;">
<p>Any Content Here</p>
</div>

<div class="Mainbottom">
<!--#include virtual="/Templates/BottomMain.asp" -->
</div>

</div>


As you see the top and bottom of this container include external html files that show my header and footer as I want..this seems to be working.

My problem lies in the CSS as I cant seem to get the image for the ceneter of the container to show and repeat properly, It seems to show and cover the whole page until i set the body colour of the page then I have problems..The code I used is below : "background: url(/Templates/MainCenterSlice.jpg) repeat-y; this worked as I say but covered the whole page and not just the section where my content goes.
"

I also want the bottom Div "Mainbottom" in my container to stick to the bottom of the main box container and I cant seem to get it to do this either.

Here is a cut down of my style sheet to show you what im trying..

I also want to set the height of the container as you see Ive commented it out in the code as it wasnt working..


/* My CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-size: 10px;
color: #586BB7;
font-family: tahoma;
text-decoration:none;
min-width: 800px;
text-align: center;
background-color:#FFFFFF;



/* Main Box 1 */
.Mainbox {
width: 800px;
/* height:800px; */
padding: 0 0px;
background: url(/Templates/MainCenterSlice.jpg) repeat-y;
margin:0 auto;
text-align: left;

}
.Mainbox .Maintop {
height: 171px;
margin: 0 -0px;

}
.Mainbox .Mainbottom {
height: 183px;
margin: 0 -0px;

}


Thoughts are very welcome as Id like to do this with CSS instead of my old tables..

Kind Regards
Tag

[TagUK2006]

I seem to have solved most of this except my CSS for this background: url(/Templates/MainCenterSlice.jpg) repeat-y; Is still covering the whole page instead of just the center section of my container... Ive tried a few things and am juts getting no where... If I set the body tage to have a white background it also makes my center dive background white.. If I remove the bodys CSS for the BG colour my repeating image shows again but fills the whole page again...

I hope that all makes sence..
Thoughts appreciated.
Thanks
Tag

[WebJoel]

Is this hosted somewhere that it can be tested live? I don't want to re-create your page and still, without the image, won't work for me locally.

I am thinking that you want to position your background image as well as repeat-y but maybe I misunderstand the request..

[TagUK2006]

Hi,
There is a link to the page im testing with here.. http://tropical.staffdata.co.uk/Templates/Main1.asp

As you see the page seems white and the content area should have the image set in CSS to repeat to make it a pale blue to match the header and footer section..

Thanks again..

[TagUK2006]

Im making the page using DW as my editor and in the editor the page shows the image repeated correctly so I have my 3 sections and the image seems to be repeating there its when i view in any browser that the image is not showing? Its very odd but then im not too hot with CSS so i must have something wrong?????

[TagUK2006]

Oh My!!!!
Ive figured this out and am so ashamed !!!!
Its funny the things you over look when tired eh!!
It might have helped if id uploaded my image to the server so it could be seen ... but with not recieving a missing image display or error I just overlooked that possibility.. Doh!!!
Thanks again for your reply.. :-)