Roxanne Posted April 6, 2012 Share Posted April 6, 2012 I created a horizontal drop-down menu by using code a found in a tutorial, but I have a problem with my main menu items. The items which have more text are crowded together next to the menu items after them. How can I get my menu items to appear all in one line and evenly spaced? I tried changing my code in the "#menu-bar li" class by settting the width to auto, and I also tried removing the width value from it, but when I did that the menu items were so widely spaced that they went to a second line, my first sub menu didn't show, and the other sub menus appeared in one line without any spaces in between them. Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><link href='http://fonts.googleapis.com/css?family=Pontano+Sans' rel='stylesheet' type='text/css'><title>CSS drop-down menu</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css">body{padding:0px;background: #000000;}#menu-bar, #menu-bar ul, #menu-bar li{font-family: 'Pontano Sans', sans-serif;font-size:19px;}{padding:0;margin:0;} #menu-bar li{list-style: none;position: relative;float: left; /* this makes the lists to appear horizontally */ white-space:nowrap;width:150px;height: 50px;text-align: left;background-color: #000000;line-height: 50px;}#menu-bar li a{text-decoration:none;color: white;}#menu-bar li:hover{background-color:#000000;}#menu-bar ul ul{top:0;visibility:hidden;}#menu-bar ul li:hover ul{visibility:visible;}</style></head><body><div id="menu-bar"><ul> <li><a href="#">Portfolio</a> <ul> <li><a href="#">Seniors</a></li> <li><a href="#">Wedding</a></li> <li><a href="#">People & Portraits</a></li> <li><a href="#">Pets</a></li> <li><a href="#">Commercial</a></li> <li><a href="#">Graphics</a></li> </ul> </li> <li><a href="#">Bands</a> <ul> <li><a href="#">D'espairsRay</a></li> <li><a href="#">Versailles</a></li> <li><a href="#">Queensrÿche</a></li> <li><a href="#">Love Said No</a></li> <li><a href="#">Soundevice</a></li> </ul> </li> <li><a href="#">Price Lists</a> <ul> <li><a href="#">Senior Price List</a></li> <li><a href="#">Wedding Price List</a></li> <li><a href="#">Portrait Price List</a></li> <li><a href="#">Pet Portrait Price List</a></li> </ul> </li> <li><a href="#">Contact Me</a> </li> <li><a href="#">About The Owner</a> </li> <li><a href="#">Fine Art Prints</a> <ul> <li><a href="#">Scenic</a></li> <li><a href="#">Wildlife</a></li> <li><a href="#">Nature</a></li> <li><a href="#">Miscellaneous</a></li> </ul> </li> <li><a href="#">Tips for choosing a photographer</a> </li></ul></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted April 6, 2012 Share Posted April 6, 2012 ? top level or does that include submenu as as well. for top level you could try min-width: with percentage value (100 / number of menu items) #menu-bar li { min-width: 16.66%;} /*6 menu items*/ then reset submenu list items to normal #menu-bar li li { width: 200px;} /*no min-width*/ Link to comment Share on other sites More sharing options...
Roxanne Posted April 7, 2012 Author Share Posted April 7, 2012 It's the top level that I am trying to space. The submenus are fine. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2012 Share Posted April 7, 2012 if you use#menu-bar li it will apply styling to all li items from top level and all submenu below, that is why you use #menu-bar li li to reset 1st submenus and below back to normal styling Link to comment Share on other sites More sharing options...
Roxanne Posted April 9, 2012 Author Share Posted April 9, 2012 I tried doing a you suggested, and the menu items are evenly spaced when I view them on a browser page with just the menu on it, but when I put it on my website in the table I created for the menu, they are not evenly spaced, and the last item in the main menu is dropping down to form a second row. Here is a link to my website:http://www.reflectio...aphy/test2.html By the way, your percentages were off, there were actually 7 menu items, so I had to change#menu-bar li { min-width: 16.66%;} to #menu-bar li { min-width: 14.28%;} Link to comment Share on other sites More sharing options...
dsonesuk Posted April 9, 2012 Share Posted April 9, 2012 I didn't count how many menus you had, i just used six as an example. Anyway forget min-height use padding and adjust to needs, I had too correct a few syntax errors in css (misplaced '{' and '}'), and add position absolute to submenu ul so they occupy no space, and no longer affect width of parent li element, adjust a few more here and there to come up with this body{ padding:0px; background: #000000; } #menu-bar, #menu-bar ul, #menu-bar li{font-family: 'Pontano Sans', sans-serif;font-size:19px;text-indent:0;/*added by dsonesuk */ padding:0; margin:0; } #menu-bar li{ white-space:nowrap; /* min-width: 10.28%; removed by dsonesuk*/ list-style: none; position: relative; float: left; /* this makes the lists to appear horizontally */ /* width:150px; removed by dsonesuk*/ height: 50px; text-align: left; background-color: #000000; line-height: 50px;padding: 0 23px 0 0; /*added by dsonesuk */ }#menu-bar li:last-child {padding:0; } #menu-bar li li, #menu-bar li li:last-child/*added by dsonesuk */{ /*width: 200px;*/ width:100%;/*added by dsonesuk */ text-align: left; padding: 0 0 0 10px;/*added by dsonesuk */ } #menu-bar li a{ display:block; /*added by dsonesuk */ text-decoration:none; color: white; } #menu-bar li:hover{ background-color:#000000; } #menu-bar ul ul{ position:absolute; /*added by dsonesuk */ width:200px; /*added by dsonesuk */ top:50px;/*amended by dsonesuk */ visibility:hidden; } #menu-bar ul li:hover ul{ visibility:visible; } Link to comment Share on other sites More sharing options...
Roxanne Posted April 10, 2012 Author Share Posted April 10, 2012 Thank you so much for your help! I just did a little tweeting to get everything to align the way I wanted it to, and it is working great now. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.