Graeme Posted November 25, 2010 Report Share Posted November 25, 2010 Hello All, I am adapting a template and I have used my own menu style. However there are a couple of things that don't look right. I could alter them easily on the other site but for some reason this is proving a litle tricky. On the menu there is a gap on the bottom and when you use the menu I would like a gap between the drop down boxes. I guess it might be a browser thing as I have had no probs before. Thank you as always, Best wishes Graeme Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 25, 2010 Report Share Posted November 25, 2010 My crystal ball was in my trunk, so I just went outside and brought it in. Nope -- still can't help you. How about a link - or at least the code Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 25, 2010 Author Report Share Posted November 25, 2010 Arghhhhh, I forgot to put in the URL Andrea, Thank you http://www.btinternet.com/~gj.d/garytest/ Best wishes Graeme Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 25, 2010 Report Share Posted November 25, 2010 Three things: -- remove any padding/margins from the <li>s -- add "display:block" to the <a> tags, so padding works properly -- with those two changes in place, you may need to tweak the padding on the <a> tags Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 25, 2010 Author Report Share Posted November 25, 2010 Hello, I tried your advice but everything went out of line, without being cheeky may I ask which tags ect, you suggested to change and which style sheets? I played around with both but could not see any improvement! Best wishes Graeme Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 25, 2010 Report Share Posted November 25, 2010 Here is what I would do... Business.css: -- remove from business.css, move to menu.css (keep all styling relating to menu in one place): #menu a:link, #menu a:visited, #menu a:active { background-color: #F7CB33; padding: 13px; text-decoration: none; color: #000000; } #menu a:hover { padding: 8px; background-color: #F01E1E; text-decoration: none; color: #FFFFFF; } Menu.css Replace with this: #menu ul { /* all lists */ padding: 0; margin: 0; list-style: none; } #menu li { /* all list items */ float: left; position: relative; width: 8em; /* padding: 1em; */ background-color: #F7CB33; border:solid 1px #FFF; list-style: none; } #menu li a { display: block; padding:13px; } #menu li ul { /* second-level lists */ display: none; left:-1px; position:absolute; top:42px; } li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */ top: auto; left: auto; } #menu li:hover ul, #menu li.over ul { /* lists nested under hovered list items */ display: block; } #menu a:link, #menu a:visited, #menu a:active { background-color: #F7CB33; text-decoration: none; color: #000000; } #menu a:hover { background-color: #F01E1E; text-decoration: none; color: #FFFFFF; } My changes included: -- standardizing the padding on <a> elements -- removed the padding on <li>s -- adding display:block to <a> elements Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 26, 2010 Author Report Share Posted November 26, 2010 Thank you so much my friend, that's amazing advice. I thought I was getting the two style sheets confused but didn't thunk to keep the menu in one. Thanks again, Best wishes Graeme Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 27, 2010 Author Report Share Posted November 27, 2010 Hello again, I wondered if the menu is showing right. When I view the page locally it looks great but when I upload it and view it there is a gap on the box at the bottom on the menu. Thank you, Best wishes Graeme Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 27, 2010 Report Share Posted November 27, 2010 Have you uploaded your revised CSS files? When I look at the page, it appears that you haven't. (or maybe you uploaded them to the wrong location?) Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 27, 2010 Author Report Share Posted November 27, 2010 Hello, Thank you, I didn't upload all the style sheets. Best wishes Graeme Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 29, 2010 Author Report Share Posted November 29, 2010 Hello Again, I would like to have some space between the menu list items, along the top horizontally and also the drop down lists. Do I do this in the menu.css file? Thank you as always, Best wishes Graeme Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 29, 2010 Report Share Posted November 29, 2010 I would like to have some space between the menu list items, along the top horizontally and also the drop down lists. Do I do this in the menu.css file? Yes, you would need to add margins to your <li>s. For spacing between the horizontal items, you'd need to add a right margin to #menu li For spacing between the items in the dropdown list, you'd need to add a bottom margin to #menu li li, as well as removing any right margin due to the line above. 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.
Note: Your post will require moderator approval before it will be visible.