Unable to center menu titles in menu fields

Question

venetian_jigsaw 0 Newbie Poster

19 Years Ago

I am trying to center a table and know I need to use <div class=''></div>. Here's my problem: I have a menu that was written in JavaScript and is using <div style=''></div> for placement. I would like to center the table, but am finding it a "hard row to hoe!" Any suggestions?

<tr>
<td width='100' style='text-align:center;'><a class="menu" href="javascript:void" onclick="window.location.href='aboutUs.htm';return false;"
onmouseover="FP_changeProp(/*id*/'leaf1',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf2',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf3',0,'style.visibility','hidden','visibility','show');
FP_changeProp(/*id*/'leaf4',0,'style.visibility','hidden','visibility','hide'); FP_changeProp(/*id*/'menubg',0,'style.visibility','inherit','visibility','show')"><span class="font">About Us</span></a></td>

<td width='100' style='text-align:center;'><a class="menu" href="javascript:void" onclick="window.location.href='qstatim.htm';return false;"
onmouseover="FP_changeProp(/*id*/'leaf1',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf2',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf3',0,'style.visibility','hidden','visibility','show');
FP_changeProp(/*id*/'leaf4',0,'style.visibility','visible','visibility','hide'); FP_changeProp(/*id*/'menubg',0,'style.visibility','visible','visibility','show')"><span class="font">QStatim</span></a></td>

<td width='100' style='text-align:center;'><a class="menu" href="javascript:void" onclick="window.location.href='partners.htm';return false;"
onmouseover="FP_changeProp(/*id*/'leaf1',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf2',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf3',0,'style.visibility','hidden','visibility','show');
FP_changeProp(/*id*/'leaf4',0,'style.visibility','hidden','visibility','hide'); FP_changeProp(/*id*/'menubg',0,'style.visibility','inherit','visibility','show')"><span class="font">Partners</span></a></td>

<td width='100' style="text-align:center;"><a class="menu" href="javascript:void" onclick="window.location.href='contactUs.htm';return false;"
onmouseover="FP_changeProp(/*id*/'leaf1',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf2',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf3',0,'style.visibility','hidden','visibility','show');
FP_changeProp(/*id*/'leaf4',0,'style.visibility','hidden','visibility','hide'); FP_changeProp(/*id*/'menubg',0,'style.visibility','visible','visibility','show')"><span class="font">Contact Us</span></a></td>
</tr>

</table>
</div>

Thanks!!!

javascript

2 Contributors
5 Replies
233 Views
1 Week Discussion Span
Latest Post 19 Years Ago Latest Post by tgreer

tgreer 189 Made Her Cry

19 Years Ago

What doctype are you using? Without a doctype, you'll have different behaviors in different browsers.

Try adding "margin: auto;" to your div's inline style declaration.

tgreer 189 Made Her Cry

19 Years Ago

So did adding "margin: auto", fix things for you, or do you still need help?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

venetian_jigsaw 0 Newbie Poster · Answer 1 · 2005-05-20T21:57:57+00:00

Sorry about that. Here's the doctype:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

venetian_jigsaw 0 Newbie Poster · Answer 2 · 2005-06-02T00:35:34+00:00

Sorry about not responding sooner. My wife and I just had our first baby...May 27th.

I tried "margin:auto", but that did not work either.

tgreer 189 Made Her Cry Team Colleague · Answer 3 · 2005-06-02T01:44:54+00:00

Congrats!

The margin statement should be:

margin: 0 auto;

As that sets the top margin to 0, and the left/right to "auto", which centers the control, relative to any containing elements.

So my point is, "margin: 0 auto" is the proper way to center things in CSS, and if things aren't centering, look to see how you're nesting your controls.