how to move navigaotor buttons to center [Archive]

View Full Version : how to move navigaotor buttons to center

hariprasad

03-27-2010, 05:15 PM

hi,

i designed a website using rvsitebuilder in cpanel...the navigator buttons are aligned towards left but i want to move the buttons to the center...pls help
below is the screenshot (see attachment) and code in index.php...what change should i make to move buttons to middle...

http://img269.imageshack.us/img269/473/ddhelp.jpg

<tr>
<td align="left" valign="top" height="32" class="bgmenu"><div id="navigator">
<ul id="navigator">
<li><div id="hormenu1L1" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="index.php" id="current" onmouseover="shutdown();" target="_self" ><span>Home</span></a></div></li>
<li><div id="hormenu1L2" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="Property-Listing.php" id="normal" onmouseover="moveLayerX1('L2', 'hormenu1'); LMPopUp('L2', false);" target="_self" ><span>Property Listing <img src="images/down-arrow.gif" border="0" alt=">" /></span></a></div></li>
<li><div id="hormenu1L7" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="About-Us.php" id="normal" onmouseover="moveLayerX1('L7', 'hormenu1'); LMPopUp('L7', false);" target="_self" ><span>About Us <img src="images/down-arrow.gif" border="0" alt=">" /></span></a></div></li>
<li><div id="hormenu1L12" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="Sister-Concerns.php" id="normal" onmouseover="shutdown();" target="_self" ><span>Sister Concerns</span></a></div></li>
<li><div id="hormenu1L13" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="Services.php" id="normal" onmouseover="moveLayerX1('L13', 'hormenu1'); LMPopUp('L13', false);" target="_self" ><span>Services <img src="images/down-arrow.gif" border="0" alt=">" /></span></a></div></li>
<li><div id="hormenu1L19" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="Contact-Us.php" id="normal" onmouseover="shutdown();" target="_self" ><span>Contact Us</span></a></div></li>
</ul>
</div>



<div id="L2" class="submenu" onmouseover="clearLMTO();" onmouseout="setLMTO();">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td nowrap="nowrap">
<div class="subframe">
<div id="refL3" class="item">
<a href="Warehouse.php" onmouseover="LMPopUp('L2', true);" target="_self" ><span> Warehouse                    </span></a>
</div>
<div id="refL4" class="item">
<a href="Land.php" onmouseover="LMPopUp('L2', true);" target="_self" ><span> Land                         </span></a>
</div>
<div id="refL5" class="item">
<a href="Flat.php" onmouseover="LMPopUp('L2', true);" target="_self" ><span> Flat                         </span></a>
</div>
<div id="refL6" class="item">
<a href="Villas.php" onmouseover="LMPopUp('L2', true);" target="_self" ><span> Villas                       </span></a>
</div>
</div>
</td>
</tr>
</table>
</div>
<div id="L7" class="submenu" onmouseover="clearLMTO();" onmouseout="setLMTO();">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td nowrap="nowrap">
<div class="subframe">
<div id="refL8" class="item">
<a href="Profile.php" onmouseover="LMPopUp('L7', true);" target="_self" ><span> Profile                      </span></a>
</div>
<div id="refL9" class="item">
<a href="Vision-And-Mission.php" onmouseover="LMPopUp('L7', true);" target="_self" ><span> Vision & Mission             </span></a>
</div>
<div id="refL10" class="item">
<a href="Why-GV.php" onmouseover="LMPopUp('L7', true);" target="_self" ><span> Why GV?                      </span></a>
</div>
<div id="refL11" class="item">
<a href="Membership-and-Affliation.php" onmouseover="LMPopUp('L7', true);" target="_self" ><span> Membership & Affliation      </span></a>
</div>
</div>
</td>
</tr>
</table>
</div>
<div id="L13" class="submenu" onmouseover="clearLMTO();" onmouseout="setLMTO();">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td nowrap="nowrap">
<div class="subframe">
<div id="refL14" class="item">
<a href="Property-Valuators.php" onmouseover="LMPopUp('L13', true);" target="_self" ><span> Property Valuators           </span></a>
</div>
<div id="refL15" class="item">
<a href="Project-Marketing.php" onmouseover="LMPopUp('L13', true);" target="_self" ><span> Project Marketing            </span></a>
</div>
<div id="refL16" class="item">
<a href="Consultancy.php" onmouseover="LMPopUp('L13', true);" target="_self" ><span> Consultancy                  </span></a>
</div>
<div id="refL17" class="item">
<a href="Partnership--and--Joint-Ventures.php" onmouseover="LMPopUp('L13', true);" target="_self" ><span> Partnership & Joint Ventures </span></a>
</div>
<div id="refL18" class="item">
<a href="Land-Development--and--Sale.php" onmouseover="LMPopUp('L13', true);" target="_self" ><span> Land Development & Sale      </span></a>
</div>
</div>
</td>
</tr>
</table>

BLiZZaRD

03-27-2010, 06:01 PM

Well for starters you have a div and a ul designated to the same ID. If you want them to share attributes, then make the ID a class. Classes can have multiple instances on a page, ID's only one per page.

Add a CSS declaration for the ul, li elements. To center them within the container (in this case the div) Set a width for the div, and set the li margin-left and margin-right to auto;

hariprasad

03-29-2010, 06:32 AM

i dont know anything....can u pls explain...

BLiZZaRD

03-31-2010, 02:05 AM

I can try...

you have this:

<td align="left" valign="top" height="32" class="bgmenu"><div id="navigator">
<ul id="navigator">
<li><div id="hormenu1L1" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="index.php" id="current" onmouseover="shutdown();" target="_self" ><span>Home</span></a></div></li>
<li><div id="hormenu1L2" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="Property-Listing.php" id="normal" onmouseover="moveLayerX1('L2', 'hormenu1'); LMPopUp('L2', false);" target="_self" ><span>Property Listing <img src="images/down-arrow.gif" border="0" alt=">" /></span></a></div></li>
<li><div id="hormenu1L7" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="About-Us.php" id="normal" onmouseover="moveLayerX1('L7', 'hormenu1'); LMPopUp('L7', false);" target="_self" ><span>About Us <img src="images/down-arrow.gif" border="0" alt=">" /></span></a></div></li>
<li><div id="hormenu1L12" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="Sister-Concerns.php" id="normal" onmouseover="shutdown();" target="_self" ><span>Sister Concerns</span></a></div></li>
<li><div id="hormenu1L13" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="Services.php" id="normal" onmouseover="moveLayerX1('L13', 'hormenu1'); LMPopUp('L13', false);" target="_self" ><span>Services <img src="images/down-arrow.gif" border="0" alt=">" /></span></a></div></li>
<li><div id="hormenu1L19" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="Contact-Us.php" id="normal" onmouseover="shutdown();" target="_self" ><span>Contact Us</span></a></div></li>
</ul>
</div>

It needs to have some changes made. Look at the first line...

<div id="navigator">

the 'id' is navigator, which is fine. But then look...

<ul id="navigator">

Again, an 'id' of navigator.. now not so fine. ID is defined as a single element per page. You have 2 elements... So one of them needs to go. I suggest the UL

Next...

The div needs a width declared, I assume you have a .css file somewhere with the #navigator styles in it, yes? Find it and ensure it has a width: ???px; (or ???em; or ???%;) Then, if there is no ul or li elements within the navigator ID in the CSS you need to add them, setting a margin-left and margin-right to auto, like so:

#navigator ul li {
margin-left: auto;
margin-right: auto;
}

This tells the page that the UL and LI's inside the div with the ID of 'navigation' should be centered in the predetermined width of that div. They will spread out and take up the space needed starting from the center and working outwards.

hariprasad

03-31-2010, 06:03 AM

this is the code in css file...what should i change...

/**** tab_middle ****/

#navigator{
margin: 0px;
padding: 0px;
}
#navigator ul{
margin: 0px;
padding: 0px;
color: #FFFFFF;
}
#navigator li {
display:inline;
list-style: none;
margin: 0px;
padding: 0px;
float:left;
}

#navigator li a {text-decoration: none; font-weight : bold; white-space:nowrap;}

#navigator li a#normal{
padding: 10px 12px 9px 12px;
color: #FFFFFF;
border-right: 1px solid #B4854D;
display:block;
}
#navigator li a#normal:hover{
background-color: #673800;
color: #B4854D;
}
#navigator li a#current{
background-color: #673800;
color: #B4854D;
padding: 10px 12px 9px 12px;
border-right: 1px solid #B4854D;
display:block;
}

/* css for PHP Layers Menu 3.2.0-rc (C) 2001-2004 Marco Pratesi - http://www.marcopratesi.it/ */

.submenu {
left: 0px;
top: 0px;
visibility: hidden;
position: absolute;
padding:0 0 0 5px;
z-index:25;
}
.subframe {
border: #6B3A00 1px solid;
display: block;
filter: alpha(opacity=95);
position: absolute;
background-color: #ffffff;
text-indent: 5px;
}
.item {
white-space: nowrap;
text-align: left;
border-bottom: 1px solid #673800;
margin-top: 0px;
}
.item a {
font-weight: normal;
color:#000000;
text-decoration: none;
position: relative;
display:block;
padding:3px 0;
}
.item a:hover {
font-weight:normal;
color:#ffffff;
text-decoration:none;
background-color:#B4854D;
position: relative;
display:block;
padding:3px 0;
}
.item .fwdarr {
right: 7px;
top: 5px;
position: absolute;
}

smrnsmile

03-31-2010, 09:44 AM

<tr>
<td align="left" valign="top" height="32" class="bgmenu"><div id="navigator">
<ul id="navigator">
<li><div id="hormenu1L1" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="index.php" id="current" onmouseover="shutdown();" target="_self" ><span>Home</span></a></div></li>
<li><div id="hormenu1L2" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="Property-Listing.php" id="normal" onmouseover="moveLayerX1('L2', 'hormenu1'); LMPopUp('L2', false);" target="_self" ><span>Property Listing <img src="images/down-arrow.gif" border="0" alt=">" /></span></a></div></li>
<li><div id="hormenu1L7" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="About-Us.php" id="normal" onmouseover="moveLayerX1('L7', 'hormenu1'); LMPopUp('L7', false);" target="_self" ><span>About Us <img src="images/down-arrow.gif" border="0" alt=">" /></span></a></div></li>
<li><div id="hormenu1L12" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="Sister-Concerns.php" id="normal" onmouseover="shutdown();" target="_self" ><span>Sister Concerns</span></a></div></li>
<li><div id="hormenu1L13" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="Services.php" id="normal" onmouseover="moveLayerX1('L13', 'hormenu1'); LMPopUp('L13', false);" target="_self" ><span>Services <img src="images/down-arrow.gif" border="0" alt=">" /></span></a></div></li>
<li><div id="hormenu1L19" onmouseover="clearLMTO();" onmouseout="setLMTO();"><a href="Contact-Us.php" id="normal" onmouseover="shutdown();" target="_self" ><span>Contact Us</span></a></div></li>
</ul>
</div>

simply try changing ur align="left" to align="center"

hariprasad

04-01-2010, 05:28 AM

i tried tat before but dint work....

smrnsmile

04-01-2010, 07:23 AM

In your css your u hv given style to ur id="navigator as below"

#navigator{
margin: 0px;
padding: 0px;
}

So just specify the total width of ur tabs and set margin as auto, example given below

#navigator{
width:800px;/*set ur width here*/
margin-left: auto;
margin-right: auto;
padding: 0px;
}

hariprasad

04-01-2010, 09:37 AM

Thank you very much it worked...