...

View Full Version : Cannot center ul list with dropdown menu



carbilldyer
05-05-2011, 11:17 AM
Teed kindly gave me a solution for drop down menus - and I've managed to get most of it working, but I can't seem to tidy up the last bits.
I want the ul list in my navigation bar to be centered on the page - but it keeps to the left. I've tried taking out the 'float: left' and various other things but nothing works correctly.

I want the items in the list to be left aligned and also the drop down list to be left aligned under the higher level and not wrapping text.

Can somebody please look at my code and see what I'm doing wrong? I'm sure it's an obvious solution but I keep drawing a blank.



/* the following is for drop down menu */

#content {
clear: left;
color: #ccc;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav a {
display: inline;
width: 7em;
}

#nav li { /* all list items */
float: left;
width: 7em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
overflow: visible;
position: absolute;
background: #ffe4af;
z-index: 2;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
clear: left;
color: #ccc;
}
/* end of drop down menu code */
<!-- banner and link row -->
<div align="center" style="background-image: url(i/bg/bodybg.PNG)">
<img src="i/flamedradiator-header4.png" alt="RADyCAL Heating, Moraira, Costa Blanca, Infrared Heating" width="721" height="150"></img>
</div>
<div style="background-image: url(i/bg/imagebar2r.png); margin: 0px; height: 20px; text-align: center" >
<ul id="nav">
<li><a href="indexeng.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'">Home</img></a></li>

<li><a href="whatisit.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'"><span style="padding: 1px">What Is It?</span></a></li>
<li><a href="#" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'"><span style="padding: 1px">Products</span></a>
<ul>
<li><a href="infraredp.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'"><span style="padding: 1px">Infrared Radiators</span></a></li>
<li><a href="bbqindex.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'"><span style="padding: 1px">Traditional Barbecues</span></a></li>
<li><a href="#" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'"><span style="padding: 1px">Air Coolers</span></a></li>
<li><a href="energyp.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'"><span style="padding: 1px">Energy Monitors</span></a></li>
</ul>
</li>
<li><a href="images.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'"><span style="padding: 1px">Gallery</span></a></li>
<li><a href="aboutus.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'"><span style="padding: 1px">About Us</span></a></li>
<li><a href="contact.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'"><span style="padding: 1px">Contact Us</span></a></li>

</ul>
</div>


the webpage with the drop down list is www.radycalheating.com/indexeng1.php

the webpage before I added the dropdown code (and how I want it to look) is www.radycalheating.com/indexeng.php

thanks in anticipation.

harbingerOTV
05-05-2011, 03:27 PM
take a gander at:

http://www.codingforums.com/showthread.php?t=126313

carbilldyer
05-06-2011, 12:37 PM
Thanks Harbinger OTV

I've applied the suggestions as suggested and the ul is now centered but I'm still having a problem with the dropdown. There appears to be 2 areas in it - on the left is the text of the li's (with text still wrapped) and on the right is an area with the background I used.

I've tried several combinations of the changes you suggested but some just make it even worse.

All I need to finalise now is the dropdown items aligning to the left, not wrapping text with the background situated correctly.

Hope you can help me again.

see www.radycalheating.com/indexeng1.php for example prob.
relevant code is


#content {
clear: left;
color: #ccc;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
float: left;
left: 50%;
position: relative;

}

#nav a {
display: block;
width: 6.5em;
}

#nav li { /* all list items */
width: 6.5em; /* width needed or else Opera goes nuts */
float: left;
left: -50%;
position: relative;
margin: 0 2px;

}

#nav li ul { /* second-level lists */
overflow: visible;
position: relative;
background: #ffe4af;
z-index: 2;
width: 12em;
float: left;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
clear: left;
color: #ccc;
}
<div style="background-image: url(i/bg/imagebar2r.png); margin: 0px; height: 20px; text-align: center" >
<ul id="nav">
<li><a href="indexeng.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'">Home<img src="i/redline-sep.bmp" alt=" " width="2" height="15" style="padding-left: 10px; padding-right: 10px"></img></a></li>

<li><a href="whatisit.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'">What Is It?<img src="i/redline-sep.bmp" alt=" " width="2" height="15" style="padding-left: 10px; padding-right: 10px"></img></a></li>
<li><a href="#" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'">Products<img src="i/redline-sep.bmp" alt=" " width="2" height="15" style="padding-left: 10px; padding-right: 10px"></a>
<ul>
<li><a href="infraredp.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'">Infrared Radiators</a></li>
<li><a href="bbqindex.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'">Traditional Barbecues</a></li>
<li><a href="#" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'">Air Coolers</a></li>
<li><a href="energyp.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'">Energy Monitors</a></li>
</ul>
</li>
<li><a href="images.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'">Gallery<img src="i/redline-sep.bmp" alt=" " width="2" height="15" style="padding-left: 10px; padding-right: 10px"></a></li>
<li><a href="aboutus.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'">About Us<img src="i/redline-sep.bmp" alt=" " width="2" height="15" style="padding-left: 10px; padding-right: 10px"></a></li>
<li><a href="contact.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'">Contact Us</a></li>

</ul>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum