How do you do those pages wheres it seems like a central box or content area with all the content in, which is always in the centre of the screen, no matter what size the window displaying it is.... they sort of always stay in the middle, and stay in the middle when the window is resized, it just adds more space around the box/ content area?<br />
<br />
*scratches head*
<!--content-->tables or css for layout?<!--content--><div style="width:100px;height:100px;margin:0, auto;">Content</div><!--content-->http://www.infinitypages.com/research/cssverticalcentereddiv.htm<!--content-->thats exactly what im after pyro...only problem is, how can i stop my background image from tiling? is there any way i can make my background image move the same as the central table/ box thing?<!--content-->Not sure if I understand what you are looking for, but I'd think you will have to "fake" a background and put the image inside another <div> and do it the same. Just set the z-Index low (a negative number) so it remains below your other content.<!--content-->what does that mean? whats a z-index?<br />
<br />
i can put the background image in a table, and put the table in the div, but i don't understand the style properties.<!--content-->Could you explain better what you are trying to do, and I'll try to explain to you/show you what needs to be done?<!--content-->i want exactly the same as the example you just showed me, but with a background image as well. I've done this by putting the background image as the background to the table i have all my content in. Now i just want to put the table in the center of the page, like in your example. <br />
<br />
Where my table is bigger than size of the DIV properties, i'm getting scrollbars, so i'm trying to work out what DIV style properties i need to change so that the box is still in the center of the page (as in your example) but big enough to hold my table.<!--content-->This is the relavant source, with comments to make it easier:<br />
<br />
<html><br />
<head><br />
<title>Vertically and Horizontally Centering a DIV</title><br />
<br />
<style type="text/css"><br />
#mydiv {<br />
position:absolute;<br />
top: 50%;<br />
left: 50%;<br />
width:400px; /*set this to the width of your table*/<br />
height:250px; /*set this to the height of your table*/<br />
margin-top: -125px; /*set to a negative number 1/2 of your height*/<br />
margin-left: -200px; /*set to a negative number 1/2 of your width*/<br />
border: 1px solid;<br />
background-color: #eeeeee; /*to use an image, chang to background: url(yourimage.gif);*/<br />
overflow: auto;<br />
}<br />
<br />
</style><br />
<br />
</head><br />
<body><br />
<div id="mydiv"><br />
This is a vertically and horizontally centered <div> tag. Try resizing your browser.<br />
<br><br />
<br><br />
</div><br />
</body><br />
</html><!--content-->If you change pyro's background to an image you can use the following:<br />
background-image: url("pic.jpg");<br />
background-repeat: no-repeat;<br />
background-position:center;<br />
<br />
no-repeat will stop it tiling.<!--content-->Finished! Thanks for your help pyro and dave, i was about to get a bald patch. Your help is appreciated.<br />
<br />
*buys a cumberland sausage for each of you*<!--content-->Originally posted by moondance <br />
*buys a cumberland sausage for each of you* <br />
<br />
mmm thanks<!--content-->
<br />
*scratches head*
<!--content-->tables or css for layout?<!--content--><div style="width:100px;height:100px;margin:0, auto;">Content</div><!--content-->http://www.infinitypages.com/research/cssverticalcentereddiv.htm<!--content-->thats exactly what im after pyro...only problem is, how can i stop my background image from tiling? is there any way i can make my background image move the same as the central table/ box thing?<!--content-->Not sure if I understand what you are looking for, but I'd think you will have to "fake" a background and put the image inside another <div> and do it the same. Just set the z-Index low (a negative number) so it remains below your other content.<!--content-->what does that mean? whats a z-index?<br /><br />
i can put the background image in a table, and put the table in the div, but i don't understand the style properties.<!--content-->Could you explain better what you are trying to do, and I'll try to explain to you/show you what needs to be done?<!--content-->i want exactly the same as the example you just showed me, but with a background image as well. I've done this by putting the background image as the background to the table i have all my content in. Now i just want to put the table in the center of the page, like in your example. <br />
<br />
Where my table is bigger than size of the DIV properties, i'm getting scrollbars, so i'm trying to work out what DIV style properties i need to change so that the box is still in the center of the page (as in your example) but big enough to hold my table.<!--content-->This is the relavant source, with comments to make it easier:<br />
<br />
<html><br />
<head><br />
<title>Vertically and Horizontally Centering a DIV</title><br />
<br />
<style type="text/css"><br />
#mydiv {<br />
position:absolute;<br />
top: 50%;<br />
left: 50%;<br />
width:400px; /*set this to the width of your table*/<br />
height:250px; /*set this to the height of your table*/<br />
margin-top: -125px; /*set to a negative number 1/2 of your height*/<br />
margin-left: -200px; /*set to a negative number 1/2 of your width*/<br />
border: 1px solid;<br />
background-color: #eeeeee; /*to use an image, chang to background: url(yourimage.gif);*/<br />
overflow: auto;<br />
}<br />
<br />
</style><br />
<br />
</head><br />
<body><br />
<div id="mydiv"><br />
This is a vertically and horizontally centered <div> tag. Try resizing your browser.<br />
<br><br />
<br><br />
</div><br />
</body><br />
</html><!--content-->If you change pyro's background to an image you can use the following:<br />
background-image: url("pic.jpg");<br />
background-repeat: no-repeat;<br />
background-position:center;<br />
<br />
no-repeat will stop it tiling.<!--content-->Finished! Thanks for your help pyro and dave, i was about to get a bald patch. Your help is appreciated.<br />
<br />
*buys a cumberland sausage for each of you*<!--content-->Originally posted by moondance <br />
*buys a cumberland sausage for each of you* <br />
<br />
mmm thanks<!--content-->