PDA

View Full Version : I'm trying to align my drop down menu to the center and not to the left



ataraxiss
Jul 12th, 2009, 01:50 AM
Hello experts ..

I've trying all day to achieve a drop down menu like the one http://www.hydroswing.co.uk has. I can achieve everything except i'm not being able to align in to the center like the above website has.

Heres the code that i have so far ..


the css...


.chromestyle{
background-color: #000000;
width: 770px;
height: 23px;
}


.chromestyle ul{
width: 100%;
background-color:#000;
padding:0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
width:143px;
}

.chromestyle ul li a{
color: #ffffff;
padding: 0pt 0pt;
margin: 0 8px;
text-decoration: none;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background-color:#000;
}

.chromestyle ul li a:hover.last, .chromestyle ul li a.last.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background-color:#AA7906;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
margin-top:-2pt;
font:normal 10px Verdana;
line-height:18px;
z-index:100;
width: 143px;
visibility: hidden;
}


.dropmenudiv a{
background-image: url('../images/mnu_bkg_2.png');
background-repeat: no-repeat;
width: 100%;
display: block;
text-align: center;
text-decoration: none;
color: #333;
}

.dropmenudiv a.bottom{
background-image: url('../images/mnu_bkg_3.png');
background-repeat: no-repeat;
width: 100%;
display: block;
text-align: center;
text-decoration: none;
color: #333;
}


.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
width: 100%;
display: block;
text-align: center;
text-decoration: none;
color: #FFF;
}

.dropmenudiv a:hover.bottom{ /*THEME CHANGE HERE*/
width: 100%;
display: block;
text-align: center;
text-decoration: none;
color: #fff;
background-image: url('../images/mnu_bkg_3.png');
background-repeat: no-repeat;
}


.. the html


<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="#" rel="dropmenu1"><img src="images/nav_about_us2.gif" onmouseover="this.src='images/nav_about_us2_over.gif'" onmouseout="this.src='images/nav_about_us2.gif'" /></a></li>
<li><a href="#" rel="dropmenu2"><img src="images/nav_aviation2.gif" onmouseover="this.src='images/nav_aviation2_over.gif'" onmouseout="this.src='images/nav_aviation2.gif'" /></a></li>
<li><a href="#" rel="dropmenu3"><img src="images/nav_agriculture.gif" onmouseover="this.src='images/nav_agriculture_over.gif'" onmouseout="this.src='images/nav_agriculture.gif'" /></a></li>
<li><a href="#" rel="dropmenu4"><img src="images/nav_industrial.jpg" onmouseover="this.src='images/nav_industrial_over.jpg'" onmouseout="this.src='images/nav_industrial.jpg'" /></a></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
<li><a href="#"><img src="images/nav_quote.gif" onmouseover="this.src='images/nav_quote_over.gif'" onmouseout="this.src='images/nav_quote.gif'" /></a></li>
<li><a href="#" rel="dropmenu5"><img src="images/nav_door_comparisons.gif" /></a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="About_Us_History.aspx" title="HydroSwing History">History</a>
<a href="About_Us_The_Door_Guy.aspx" title="The Door Guy">Meet the Owner</a>
<a href="newsletter.aspx" title="Newsletter">Newsletters</a>
<a href="About_Us_News_Events.aspx" title="HydroSwing News and Events">News &amp; Events</a>
<a href="About_Us_Brochures.aspx" title="HydroSwing Brochures" class='bottom'>Brochures</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv">
<a href="Aviation_Hydroswing_vs_Bi-Fold.aspx" title="HydroSwing vs. By-Fold">HydroSwing vs. Bi-fold</a>
<a href="Aviation_Products.aspx" title="HydroSwing Product Features">Product Features</a>
<a href="Aviation_Accessories.aspx" title="HydroSwing Accessories">Accessories</a>
<a href="Aviation_Portfolio.aspx" title="HydroSwing Portfolio">Portfolio</a>
<a href="Aviation_News_Events.aspx" title="HydroSwing News and Events">News &amp; Events</a>
<a href="Aviation_Testimonials.aspx" title="HydroSwing Testimonials">Testimonials</a>
<a href="About_Us_Brochures.aspx" title="Brochures" class="bottom">Brochures</a>

</div>

<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv">
<a href="Agriculture_Door_Comparison.aspx" title="Agriculture Door Comparison">Door Comparison</a>
<a href="Agriculture_Products.aspx" title="Agriculture Product Features">Product Features</a>
<a href="Agriculture_Accessories.aspx" title="Agriculture Accessories">Accessories</a>
<a href="Agriculture_Portfolio.aspx" title="Agriculture Portfolio">Portfolio</a>
<a href="Agriculture_News_Events.aspx" title="HydroSwing News and Events">News &amp; Events</a>
<a href="Agriculture_Testimonials.aspx" title="Agriculture Testimonials">Testimonials</a>
<a href="About_Us_Brochures.aspx" title="Brochures" class="bottom">Brochures</a>
</div>

<!--4th drop down menu -->
<div id="dropmenu4" class="dropmenudiv">
<a href="Industrial_Specifications.aspx" title="Industrial Specifications">Industrial Specifications</a>
<a href="Industrial_Brochures.aspx" title="Industrial Brochures" class="bottom">Industrial Brochures</a>
</div>

<!--5th drop down menu -->
<div id="dropmenu5" class="dropmenudiv">
<a href="Aviation_Hydroswing_vs_Bi-Fold.aspx" title="Aviation Door Comparison">Aviation</a>
<a href="Agriculture_Door_Comparison.aspx" title="Agriculture Door Comparison" class="bottom">Agriculture</a>
</div>


there is a js file that i do not think is required here.

Any help on this would greatly be appreciated. Thank you everyone.

abduraooft
Jul 12th, 2009, 02:24 PM
Heres the code that i have so far .. could you post a link to your page?

ataraxiss
Jul 12th, 2009, 05:47 PM
Here is the link abduraooft .. you'll notice that the drop down menu is left aligned. I need it to be centered. Thanks,

http://hydroswing.co.uk/default2.aspx

abduraooft
Jul 12th, 2009, 06:02 PM
<ul>
<li><a rel="dropmenu1" href="#"><img onmouseout="this.src='images/nav_about_us2.gif'" onmouseover="this.src='images/nav_about_us2_over.gif'" src="images/nav_about_us2.gif"/> </a></li>
<li><a rel="dropmenu2" href="#"><img onmouseout="this.src='images/nav_aviation2.gif'" onmouseover="this.src='images/nav_aviation2_over.gif'" src="images/nav_aviation2.gif"/> </a></li>
<li><a rel="dropmenu3" href="#" class=""><img onmouseout="this.src='images/nav_agriculture.gif'" onmouseover="this.src='images/nav_agriculture_over.gif'" src="images/nav_agriculture.gif"/> </a></li>
<li><a rel="dropmenu4" href="#" class=""><img onmouseout="this.src='images/nav_industrial.jpg'" onmouseover="this.src='images/nav_industrial_over.jpg'" src="images/nav_industrial.jpg"/> </a></li>
<li> </li>
<li><a href="#"><img onmouseout="this.src='images/nav_quote.gif'" onmouseover="this.src='images/nav_quote_over.gif'" src="images/nav_quote.gif"/></a></li>
<li><a rel="dropmenu5" href="#"><img src="images/nav_door_comparisons.gif"/> </a></li>
</ul> There is an empty <li> </li> in your code. Just remove that.

ataraxiss
Jul 12th, 2009, 06:40 PM
That was something I added in later. Doesn't do anything if i remove it . If you look at http://www.hydroswing.co.uk you'll see that all the drop downs are centered below their parent link . That is what i'm looking for.

Thanks for your reply.