araah Posted July 1, 2012 Share Posted July 1, 2012 I have hit a brick wall with this coding. So... id like to know how to remove the spacing from in between the two navigation links. There a large gap, which is somehow active and id like to remove the gap so there is less of a space between the two links. Here is the code: Just paste the following code into this website: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position <!DOCTYPE html> <html> <head> <style type="text/css"> #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 10em; } #nav li { float: left; width: 10em; } #nav li ul { position: absolute; width: 10em; left: -999em; } #nav li:hover ul { left: auto; } </style> </head> <body> <ul id="nav"> <li><a href="#">Percoidei</a> <ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <li><a href="#">Bluefishes</a></li> <li><a href="#">Tigerfishes</a></li> </ul> </li> <li><a href="#">Anabantoidei</a> <ul> <li><a href="#">Climbing perches</a></li> <li><a href="#">Labyrinthfishes</a></li> <li><a href="#">Kissing gouramis</a></li> <li><a href="#">Pike-heads</a></li> <li><a href="#">Giant gouramis</a></li> </ul> </li> <!-- etc. --> </ul> </body> </html> Help would be greatly appreciated! Thank You Quote Link to comment Share on other sites More sharing options...
Mahngiel Posted July 2, 2012 Share Posted July 2, 2012 Everything works just fine here. Are you talking about horizontal spacing or vertical spacing? I assume you mean you had a problem with vertical spacing / alignment? http://i.imm.io/uMVD.png Quote Link to comment Share on other sites More sharing options...
araah Posted July 2, 2012 Author Share Posted July 2, 2012 hi thank you for the reply. It is the horizontal direction i want to be able to increase and decrease of the 'parent' navigation link. Quote Link to comment Share on other sites More sharing options...
anevins Posted July 2, 2012 Share Posted July 2, 2012 The spacing is made through the '10em' width on the <li>, therefore reduce the width value. Quote Link to comment Share on other sites More sharing options...
araah Posted July 3, 2012 Author Share Posted July 3, 2012 The spacing is made through the '10em' width on the <li>, therefore reduce the width value. Thank you for your reply. Yes i know that part, but changing the value or leaving it as it is results in all of the navigation links having the same equal widths of 10em or the changed value. I want to be able to change or specify the width of each navigation link depending on their actual size. any ideas? Quote Link to comment Share on other sites More sharing options...
Mahngiel Posted July 3, 2012 Share Posted July 3, 2012 I want to be able to change or specify the width of each navigation link depending on their actual size. any ideas? Then give each list item it's own class and style the class. It's the best way to do what you're (unreasonably) wanting to do. You could also do li:nth-child() to target patterns Quote Link to comment Share on other sites More sharing options...
anevins Posted July 3, 2012 Share Posted July 3, 2012 The spacing is made through the '10em' width on the <li>, therefore reduce the width value. Thank you for your reply. Yes i know that part, but changing the value or leaving it as it is results in all of the navigation links having the same equal widths of 10em or the changed value. I want to be able to change or specify the width of each navigation link depending on their actual size. any ideas? Perhaps add padding and margin instead of width Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.