PDA

Click to See Complete Forum and Search --> : centered pages

moondance
06-25-2003, 06:06 AM
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?

*scratches head* :confused:
DaveSW
06-25-2003, 07:07 AM
tables or css for layout?
David Harrison
06-25-2003, 07:19 AM
<div style="width:100px;height:100px;margin:0, auto;">Content</div>
pyro
06-25-2003, 07:53 AM
http://www.infinitypages.com/research/cssverticalcentereddiv.htm
moondance
06-25-2003, 08:44 AM
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?
pyro
06-25-2003, 08:48 AM
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.
moondance
06-25-2003, 09:03 AM
what does that mean? whats a z-index?

i can put the background image in a table, and put the table in the div, but i don't understand the style properties.
pyro
06-25-2003, 09:07 AM
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?
moondance
06-25-2003, 09:11 AM
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.

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.
pyro
06-25-2003, 09:17 AM
This is the relavant source, with comments to make it easier:

<html>
<head>
<title>Vertically and Horizontally Centering a DIV</title>

<style type="text/css">
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:400px; /*set this to the width of your table*/
height:250px; /*set this to the height of your table*/
margin-top: -125px; /*set to a negative number 1/2 of your height*/
margin-left: -200px; /*set to a negative number 1/2 of your width*/
border: 1px solid;
background-color: #eeeeee; /*to use an image, chang to background: url(yourimage.gif);*/
overflow: auto;
}

</style>

</head>
<body>
<div id="mydiv">
This is a vertically and horizontally centered &lt;div&gt; tag. Try resizing your browser.
<br>
<br>
</div>
</body>
</html>
DaveSW
06-25-2003, 09:40 AM
If you change pyro's background to an image you can use the following:
background-image: url("pic.jpg");
background-repeat: no-repeat;
background-position:center;

no-repeat will stop it tiling.
moondance
06-25-2003, 10:16 AM
Finished! Thanks for your help pyro and dave, i was about to get a bald patch. Your help is appreciated.

*buys a cumberland sausage for each of you*
DaveSW
06-25-2003, 10:38 AM
Originally posted by moondance
*buys a cumberland sausage for each of you*

mmm thanks