putting a <div> in the middle fo the screen
hey guys,
im making a website and i have like an intro page thing with 4 links on it, in an imagemap, and i dont know how to pit it in the middle of the screen... ive tried using VALIGN but i cant get it to work.. anyone have any ideas?
Busy posted this at 10:05 — 28th March 2006.
He has: 6,151 posts
Joined: May 2001
whatever
JeevesBond posted this at 12:47 — 28th March 2006.
He has: 3,956 posts
Joined: Jun 2002
: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!
a Padded Cell our articles site!
mikehannon posted this at 16:59 — 28th March 2006.
They have: 64 posts
Joined: Oct 2005
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!
Megan posted this at 17:15 — 28th March 2006.
She has: 11,421 posts
Joined: Jun 1999
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.
Megan
Connect with us on Facebook!
JeevesBond posted this at 18:17 — 28th March 2006.
He has: 3,956 posts
Joined: Jun 2002
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).
a Padded Cell our articles site!
Busy posted this at 21:58 — 28th March 2006.
He has: 6,151 posts
Joined: May 2001
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
dk01 posted this at 08:22 — 29th March 2006.
He has: 516 posts
Joined: Mar 2002
I use this method:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
here:
http://www.dk01.org
thunderbox posted this at 08:49 — 29th March 2006.
They have: 3 posts
Joined: Apr 2005
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>
JeevesBond posted this at 14:14 — 29th March 2006.
He has: 3,956 posts
Joined: Jun 2002
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.
a Padded Cell our articles site!
The Ape posted this at 12:46 — 2nd April 2006.
He has: 26 posts
Joined: Apr 2006
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.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.