PDA

View Full Version : Can't center div inside a td



guvenck
Aug 14th, 2007, 10:06 PM
Hi, please take a look at this HTML, I have no problems positioning the div to the left or right, but can't center the div in the td.

I tried the margin-left and margin-right method but it still does not work. Can anyone help?



<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">

body {
background-color: #99CC00;
}

#tdtopmenu {
padding: 4px;
background-color: #006600;
text-align: right;
}

#topmenu {
display: block;
margin-left: auto;
margin-right: auto;
}

#topmenu ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 6;
font-family: Arial;
font-size: 11px;
font-weight: bold;
text-align: left;
}
#topmenu li {
float: left;
position: relative;
width: 120px;
white-space: nowrap;
}

#topmenu ul a {
display: block;
text-decoration: none;
color: #FFFF00;
background-color: #993366;
padding: 6px;
border: 1px dotted #99FF00;
}
#topmenu ul a:hover {
color: #FFFFFF;
background-color: #0066FF;
}

</style>

</head>

<body>

<table width="780" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td id="tdtopmenu">
<div id="topmenu">
<ul>
<li><a href="#">Homepage</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</td>
</tr>
</table>


</body>
</html>

harbingerOTV
Aug 14th, 2007, 10:49 PM
well you cant use margin-left: auto and the right one on an element that doesn't have a set width.

try this


#topmenu {
text-align: center;
}

#topmenu ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 6;
font-family: Arial;
font-size: 11px;
font-weight: bold;
float: left;
left: 50%;
position: relative;
}
#topmenu li {
float: left;
position: relative;
width: 120px;
white-space: nowrap;
left: -50%;
position: relative;
text-align: left;
}


basically set the containing div to text-align: center and then float left th elements inside. left 50% the ul then left -50% all the li's and voila.

croatiankid
Aug 14th, 2007, 10:58 PM
By the way, you should use a strict DOCTYPE on the very first line of your code so IE doesn't render in quirks mode (use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">).

guvenck
Aug 15th, 2007, 02:06 AM
Thanks a lot, harbinger, your suggestion works for my example. Actually, mine was a multi-level menu and I had simplified the code to show here. The actual CSS code is as follows:

Do the rest needs to be changed somehow?



#topmenu {
text-align: center; /* harbinger */
}

#topmenu ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 6;
font-family: Arial;
font-size: 11px;
font-weight: bold;
float: left; /* harbinger */
left: 50%; /* harbinger */
position: relative; /* harbinger */
}

#topmenu li {
float: left;
position: relative;
width: 127px;
white-space: nowrap;
left: -50%; /* harbinger */
position: relative; /* harbinger */
text-align: left; /* harbinger */
}

/* this is the rest */

#topmenu li ul {
position: absolute;
display: block;
top: 2em;
left: 0;
}

#topmenu li>ul {
top: auto;
left: auto;
}

#topmenu li ul li ul {
position: absolute;
display: block;
top: 0;
left: 9em;
}

#topmenu li:hover ul { display: block; }

#topmenu li:hover>ul { visibility: visible; }

#topmenu ul ul { visibility: hidden; }

#topmenu ul, li {
margin: 0 0 0 0;
}

#topmenu ul a {
display: block;
text-decoration: none;
color: #FFFF99;
background-color: #000000;
padding: 6px;
border: 0px none #FFFF00;
}

#topmenu ul a:hover {
color: #FF0000;
background-color: #303030;
}

#topmenu li ul a {
text-decoration: none;
color: #FFFF99;
background-color: #000000;
border: 0px none #FFFF00;
padding: 6px;
}

#topmenu li ul a:hover {
color: #FF0000;
background-color: #303030;
}


And croatiankid, thanks for the tip, I changed my doctype according to your suggestion :)