The Ape — Sun, 02 Apr 2006 12:46:50 +0000

If your image map isn't any larger than 755x450, then you could place all of it inside of a container with the css kind of like this...

.container {position: absolute;
	top: 50%;
	left: 50%;
        height: 450px;
	width: 700px;
        margin-bottom: 0px;
	margin-left: -350px;
	margin-right: 0px;
	margin-top: -225px}

This will always be centered, verticaly and horizontaly. To adjust, just create the size of the div, height and width, then divide the height by 2 and change the top margin to a negative equivalence (eg. 500 height= -250 margin-top.) Then do the same with your width. Making sure that you choose numbers that are evenly divisible by two, to assure perfect centering. Positions have to be 50%.

I have an example of this working on my site (just shrink the window down and drag the bottom right corner to watch it center its self.) Link in signature.

JeevesBond — Wed, 29 Mar 2006 14:14:48 +0000

Put this in your :

<style type="text/css" media="all">
body,html {
	display: table;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
#content {
	width: 100%;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	_position: absolute;
	_top: 50%;
}
#content table {
	margin: 0 auto;
	_position: relative;
	_top: -50%
}
</style>

And your code with some amendments (just copy and paste into your ):

<div id="content">
	<table>
    <tr> 
      <td width="159" height="51" align="center" valign="middle" > <div align="center"><a href="designs.htm"> 
          </a><a href="designs.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','images/roll4.gif',1)"><img src="images/Untitled-1_01.gif" alt="Designs" name="Image11" width="159" height="51" border="0"></a></div></td>
      <td width="300" rowspan="4" align="center" valign="middle"> <div align="center"><img src="images/index_02.gif" alt="" width="300" height="213" align="absmiddle"></div></td>
      <td width="141" rowspan="2" align="center" valign="middle"> <div align="center"><a href="links.htm"> 
          </a><a href="links.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/roll3.gif',1)"><img src="images/Untitled-1_03.gif" alt="Links" name="Image13" width="141" height="59" border="0"></a></div></td>
      <td width="1"> <img src="images/spacer.gif" width="1" height="51" alt=""></td>
    </tr>
    <tr> 
      <td rowspan="2" align="center" valign="middle"> <div align="center"><img src="images/index_04.gif" width="159" height="100" alt=""></div></td>
      <td height="8"> <img src="images/spacer.gif" width="1" height="8" alt=""></td>
    </tr>
    <tr> 
      <td height="92" align="center" valign="middle"> <div align="center"><img src="images/index_05.gif" width="141" height="92" alt=""></div></td>
      <td> <img src="images/spacer.gif" width="1" height="92" alt=""></td>
    </tr>
    <tr> 
      <td height="62" align="center" valign="middle"> <div align="center"><a href="customs.htm"> 
          </a><a href="customs.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/roll2.gif',1)"><img src="images/Untitled-1_06.gif" alt="Customs" name="Image12" width="159" height="62" border="0"></a></div></td>
      <td align="center" valign="middle"> <div align="center"><a href="others.htm"> 
          </a><a href="others.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','images/roll1.gif',1)"><img src="images/Untitled-1_08.gif" alt="Others" name="Image14" width="141" height="62" border="0"></a></div></td>
      <td> <img src="images/spacer.gif" width="1" height="62" alt=""></td>
    </tr>
  </table>
</div>

Setting the height of the body means that we make it 100% of the screen. Also setting it as a table means that it is then possible to vertical-align a table-cell within it.

Unfortunately IE lacks support for the table and table-cell values. So we have to cheat by moving the top of the "content" div 50% down the page, then move the table up by 50% of its own height. Confusing I know!

The reason only IE picks up these 50% rules is the underscore ( _ ) before them. All other browsers ignore these rules.

You might get problems when the height of your div gets bigger than the page, let us know if you do and we can fix it.

thunderbox — Wed, 29 Mar 2006 08:49:54 +0000

thats my code, im wating 2 align it vertically.. sorry if i didnt make it clear...

<div style="width:100%;height:100%; text-align:center; vertical-align:center;">
<table width="601" height="213" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#000000" id="Table_01" >
    <tr> 
      <td width="159" height="51" align="center" valign="middle" > <div align="center"><a href="designs.htm"> 
          </a><a href="designs.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','images/roll4.gif',1)"><img src="images/Untitled-1_01.gif" alt="Designs" name="Image11" width="159" height="51" border="0"></a></div></td>
      <td width="300" rowspan="4" align="center" valign="middle"> <div align="center"><img src="images/index_02.gif" alt="" width="300" height="213" align="absmiddle"></div></td>
      <td width="141" rowspan="2" align="center" valign="middle"> <div align="center"><a href="links.htm"> 
          </a><a href="links.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/roll3.gif',1)"><img src="images/Untitled-1_03.gif" alt="Links" name="Image13" width="141" height="59" border="0"></a></div></td>
      <td width="1"> <img src="images/spacer.gif" width="1" height="51" alt=""></td>
    </tr>
    <tr> 
      <td rowspan="2" align="center" valign="middle"> <div align="center"><img src="images/index_04.gif" width="159" height="100" alt=""></div></td>
      <td height="8"> <img src="images/spacer.gif" width="1" height="8" alt=""></td>
    </tr>
    <tr> 
      <td height="92" align="center" valign="middle"> <div align="center"><img src="images/index_05.gif" width="141" height="92" alt=""></div></td>
      <td> <img src="images/spacer.gif" width="1" height="92" alt=""></td>
    </tr>
    <tr> 
      <td height="62" align="center" valign="middle"> <div align="center"><a href="customs.htm"> 
          </a><a href="customs.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/roll2.gif',1)"><img src="images/Untitled-1_06.gif" alt="Customs" name="Image12" width="159" height="62" border="0"></a></div></td>
      <td align="center" valign="middle"> <div align="center"><a href="others.htm"> 
          </a><a href="others.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','images/roll1.gif',1)"><img src="images/Untitled-1_08.gif" alt="Others" name="Image14" width="141" height="62" border="0"></a></div></td>
      <td> <img src="images/spacer.gif" width="1" height="62" alt=""></td>
    </tr>
  </table>
</div>

dk01 — Wed, 29 Mar 2006 08:22:22 +0000

I use this method:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

here:
http://www.dk01.org

Busy — Tue, 28 Mar 2006 21:58:48 +0000

Doh, what happened to my post? that was only a bit of a line of it saying you'd think it would work,i did a whole thing on the auto, but used a nested div with fixed height to get it down the page, pretty much what you guys have said but without the techo terms

JeevesBond — Tue, 28 Mar 2006 18:17:34 +0000

Ah, my apologies. I didn't read the question right.

Could you post your code though? I think I have a method that might work (depends on the content though).

Megan — Tue, 28 Mar 2006 17:15:25 +0000

Centering things vertically is always tricky because the browser doesn't have a concept of what 100% height is. It is 100% of the page or 100% of the window? Since that is not fixed, it doesn't know how to position things.

In the olden days, you could make a table with 100% height and that would work. Of course, we don't use tables for layout anymore now do we? The best thing to do would be to do what JeevesBond suggested above and then set a margin-top to push the div down a little bit. It wouldn't be absolutely centered but it would be close in he most used screen resolutions.

I think it would also be possible to detect the screen size with javascript and set the margin that way but that's a little overcomplicated.

It would be helpful to give us a link to what you have done so far. That would make it easier to give you a solution that suits your needs.

mikehannon — Tue, 28 Mar 2006 16:59:31 +0000

Do you mean centering it vertically? This can be tricky... the best way to do that would be with css positioning. Though the problem doing this is that there are various screen sizes and what is centered vertically in a 800 x 600 screen is not centered in a 1280 x 1024. A solution to that would be to use percentages (i dont think the auto value works in vertical positioning) but this can also be tricky because i think different browsers have different ideas about how this is supposed to work...

I'm sure someone else here with e a bit more expertise in this area and can reccommend the simplist method!

JeevesBond — Tue, 28 Mar 2006 12:47:40 +0000

Busy wrote: whatever

:eek: No that won't do it. In your HTML:
<div id="whatever">blah</div>'
Then, in your css put:

body {
    text-align: center;
}
#whatever {
    margin: 0 auto;
}

'
The "body" part of the CSS is an Internet Explorer hack. The correct - standards compliant - way of centering content is setting the margin on the left and right sides of the element to auto. This might seem weird and confusing now, but will make sense later on.

For the IE hack to work the container of the div must have text-align set to centre.

Hope this helps!

Busy — Tue, 28 Mar 2006 10:05:52 +0000

whatever