elliotnewman Posted July 13, 2010 Share Posted July 13, 2010 http://www.elliotnewman.com/index/test8.htmlCan anybody help me find out how I can fill in the gap between the NEWS and CONTACT items on the navbar? I would like to continue the black region, I tried to insert a div tag with the same black colour fill, but could only get it half working by filling in the exact pixel dimensions, rather than for it to just fill the space automagically.Thanks in advance for any help.Elliot Link to comment Share on other sites More sharing options...
dsonesuk Posted July 13, 2010 Share Posted July 13, 2010 two ways to do this#nav_bar_wrapper {background-color:#000000; /*added*/margin-left:auto;margin-right:auto;overflow:hidden;width:1120px;}ORul#menu {margin:0;padding:0;background-color:#000000; /*added*/overflow:hidden; /*added*/}#nav_bar_wrapper adds background color to full width of menu, behind left and right menu items. Whereas ul#menu seems to be behind left menu items only, so #nav_bar_wrapper might be the best option. Link to comment Share on other sites More sharing options...
elliotnewman Posted July 14, 2010 Author Share Posted July 14, 2010 This is great, thanks for the advice. I do have one last question - if I want gaps between each navbar element do I do use margins? That is how I achieved it before when I was working with div tags:http://www.elliotnewman.com/index/test6.html Link to comment Share on other sites More sharing options...
dsonesuk Posted July 14, 2010 Share Posted July 14, 2010 looking at you site, margins would seem to work fine.couple of small points. 1. using div for every menu really is not neccessary, you could turn them, or just use the anchor tags you have already for that, by assigning display:block to the anchors, you are basically turning then into a sort of div (block element).2. if you plan to keep the divs, you are duplicating a lot of the menus css.instead#print_sales {background-color:#000000;color:#CCCCCC;float:left;font-size:13px;height:22px;letter-spacing:0.1em;margin-right:3px;padding-left:25px;padding-right:25px;padding-top:8px;}you could use#nav_bar div{background-color:#000000;color:#CCCCCC;float:left;font-size:13px;height:22px;letter-spacing:0.1em;margin-right:3px;padding-left:25px;padding-right:25px;padding-top:8px;}this will target all the divs within div with id 'nav_bar' used for menus Link to comment Share on other sites More sharing options...
thescientist Posted July 14, 2010 Share Posted July 14, 2010 couldn't it more appropriate to use classes instead of multiple id's? Link to comment Share on other sites More sharing options...
dsonesuk Posted July 14, 2010 Share Posted July 14, 2010 thescientist is right using multiple ids this way is not practical, but saying that you don't even require class as reference as you target all child elements within parent div of nav_bar Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.