Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2010
    Location
    Costa Blanca Spain
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Cannot center ul list with dropdown menu

    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.

    Code:
    /* 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.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New Coder
    Join Date
    Apr 2010
    Location
    Costa Blanca Spain
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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
    Code:
    #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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •